Welcome tothe Age ofResponsive Design
Denise R. JacobsRich Web Experience 2011 30 November 2011

The Age of Twitter I
am: @denisejacobs Our fine event is: # Rwx2011 @NoFluff And I will wax philosophic on: #arwd

A true renaissance woman Author,
Speaker & Trainer, Pan-Creativehttp://www.flickr.com/photos/aarronwalter/4629078087/

Web design comes of age

The Age of What?The web
is experiencing a kind of renaissance: a blossoming of growth and possibilities.This is due to a confluence of 4 technical factors:

Code http://www.flickr.com/photos/s4xton/2425718415/

Browsers

Devices

Access http://www.marksson.com/my-two-cents/ipad-the-perfect-holiday-companion/attachment/ipad-on-the-beach

How did we get here?
http://www.flickr.com/photos/barretthall/205175534/

Evolution of the web http://commons.wikimedia.org/wiki/File:Geological_time_spiral.png

http://mikenu.deviantart.com/art/ASCII-Mona-Lisa-74823952?q=sort%3Atime+favby%3Amadlabsstudio&qo=3 http://www.flickr.com/photos/ivyfield/4486938457/

The World Wide What? Era
1992 to 1996

The general populace http://www.flickr.com/photos/rossaroni/4134794550/

HTML: 1991

CSS: 1996

CSS: Usage of the time
http://www.flickr.com/photos/peregrinari/2050430721/

Browsers: pre-1993

Browsers: 1993

Browsers: 1992-1997• 1994: Netscape Navigator•
1995: Internet Explorer• 1996: Opera

Design: very first website

Web Design: circa 1996 http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css

Computers: circa 1996

1992-96: Mobile Phones http://www.flickr.com/photos/krystiano/4136881193/

Mobile Phones: 1992-1997

Environment: 1992-1996http://www.flickr.com/photos/stewf/393637161/

Dot.com Bubble Boom Insanity Era
1997 to 2001

HTML: 1997-2001• Beginning1997: HTML 3.2•
End of 1997: HTML 4.0• Late 1999: HTML 4.01• 2000: XHTML 1.0

CSS: 1998CSS 2 introduced• Not
yet full Recommendation status, remains Candidate Recommendation to present.

Browsers: IE v. NN http://www.flickr.com/photos/ivyfield/4486938457/

Design: circa 1997

Design: circa 2000

Design: Flash websites, circa 2000

Computers: 1999 http://www.flickr.com/photos/pigpogm/1951963648/

Mobile Phones: 1997-2000

Access: circa 2000http://www.flickr.com/photos/net9/122099189/

Era of Web Standards and
the Beginnings of Ubiquity 2002 to 2007

HTML: 2002-2007• HTML 4.01 and
XHTML hold steady as the favorite versions• XHTML 1.1 released (but noone seems to care)

CSS: 2002-2007• WaSP started in
1998, but started to take off around 2002-3• Browser support still patchy – need mad troubleshooting skills• 2005: Development of CSS3 begins

Browsers: 2002-2007• 2001: our favorite
browser, IE6 is released• 2002: Netscape dies• 2003: Safari grows with Mac market• 2004: Firefox rises from the ashes

Design: circa 2003

Design: circa 2005

Mobile Phones: 2002-2007 • 2002:
Bl/Crackberry • 2003: Treo combines PDA with Smartphone • 2004: Motorola Razr released

Modern Era 2008 & 2009

HTML & CSS: 2008-2009• Web
Standards widely promoted and embraced• 2008: Development of HTML5 begins

Browsers: 2008-2009

Design: 2008-2009 http://www.flickr.com/photos/ivyfield/4486938457/

Computers: 2002-2007

Mobile Phones: 2007

Environment & Access: 2008-9http://www.flickr.com/photos/yourdon/3475417696/

Present http://www.flickr.com/photos/stormbirdstudio/4025884624/

We’re lucky! http://www.flickr.com/photos/stn1978/3459778423/

Improved Code: Easier Implementation http://naomiatkinsondesign.com

Improved Browsers

Great deviceshttp://www.flickr.com/photos/indyplanets/5693073535/

Can access anywhere http://www.flickr.com/photos/yourdon/3869874855/

So much figured out http://www.flickr.com/photos/argonne/4435608143/

From this... http://www.flickr.com/photos/ivyfield/4486938457/

Technical confluence

Foundations for this... http://www.flickr.com/photos/ivyfield/4486938457/

Design confluence

Emotional Design“Aesthetically pleasing objects appear
to usersto be more effective by virtue of their sensualappeal and an affinity the user feels for theobject based on a formation of an emotionalconnection to it. “ - Wikipedia (with liberal edits)

Experience Design“…Designing products, processes, services,
events,and environments with a focus placed on thequality of the user experience….Experience designis driven by consideration of the moments ofengagement between people and [objects], and theideas, emotions, and memories that these momentscreate.” - Wikipedia (with liberal edits)

“Social Design”Design of sites (and
applications) thatencourage connection and interaction of usersand build community.

Responsive Web DesignWeb design that
anticipates and responds to the users’ needs, delivering a quality experience and content to a user appropriate to their device and display size.

The Age of Responsive Design

Becoming Responsive http://www.flickr.com/photos/gc_photography/4662878037/

Responsive Devices? http://www.flickr.com/photos/ivyfield/4486938457/

Responsive Devices!

“Responsive web design isn’t something
that can be tacked on to the end of an existing workflow. It requires a different mindset, one that considers the medium from the outset.” - Jeremy Keith “Responsive enhancement” http://adactio.com/journal/1700/

Brain shift http://www.flickr.com/photos/tza/3214197147/

Mobile first

“When you practice Mobile First,
you’re making a commitment to the content. Everything that’s displayed on the page deserves to be there. Mobile First really means Content First.” - Ethan Marcotte,“The Responsive Designer’s Workflow”

3 Components of Responsive Design1)
Flexible grid2) Flexible images3) Media Queries http://www.flickr.com/photos/boklm/486646798/

“Instead of thinking in terms
of pixel perfection, we should be thinking of proportion perfection.” - Jeremy Keith “Responsive enhancement” http://adactio.com/journal/1700/

Flexible grid http://simplegrid.info

Flexible & FluidSize everything in
ems or percentages• Flexible: Ems for everything• Fluid: Percentages for width, ems for height

Flexible Images: Foregroundimg {max-width: 100%;}
http://www.flickr.com/photos/ivyfield/4486938457/

Flexible Images: BackgroundUse background-position to
selectively crop your backgrounds http://www.flickr.com/photos/ivyfield/4486938457/

@media queries@media queries allow the
web developer to serve different styles based on the device and it’s orientation http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

The Goal http://www.flickr.com/photos/bhenak/2664682330/

Avoid this desktop stylesheet +
media queries = mobile site

=“Switchy” layout http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Instead this mobile stylesheet +
media queries = desktop site

= Truly responsive http://ri.gov

What to do with this
new perspective?

Challenge yourself http://www.flickr.com/photos/danielsilliman/4489863368/

Don’t do what you’re used
to doing http://www.flickr.com/photos/jamiecampbell/446301597/

Leverage the current confluences

To produce http://mailchimp.com

Or http://twitter.com

Or http://morphix.si

Or even http://html5readiness.com

Or http://www.anderssonwise.com/

Which is actually http://www.anderssonwise.com/

Future http://www.flickr.com/photos/steffe/351623859/

Widen perspective http://instagr.am/p/EvW6C/

Moving forwardWe need to build
sites that can be accessed by anyone, anywhere, and on any device. 1) http://www.flickr.com/photos/dcmetroblogger/4731961032/, 2) http://www.flickr.com/photos/dcmetroblogger/3861295403/, 3) http://www.flickr.com/photos/rosipaw/5308977361/, 4) http://www.flickr.com/photos/kiwanja/3169449999/

If you start thinking differently
http://www.flickr.com/photos/winni3/3363376446/

“Today, anything that’s fixed and
unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.Web design is responsive design, Responsive Web Design is web design, done right.” - Andy Clarke “I don’t care about responsive design” http://www.malarkey.co.uk/blog/about/i_dont_care_about_responsive_web_design/

Responsive = Responsible http://www.flickr.com/photos/mazgrp/2050810720/

Why we’re here http://www.flickr.com/photos/br1dotcom/4034902679/

And http://www.flickr.com/photos/cristeenq/2360468936/

For(crowd) http://www.flickr.com/photos/laubarnes/5449810357/

Technical and Designconfluences

http://www.flickr.com/photos/dougbelshaw/4168593521/

“Design to where the Web
will be, and not where it is.” Faruk Ates, “Technology And The Web”

“Be the web designer and
create the interfaces that you want to see in the world, for all of the world.” Denise Jacobs “The Age of Responsive Design”

The present and future http://www.flickr.com/photos/cdoublew/2663137942/

The Age of Responsive Design
http://www.flickr.com/photos/slicktrix/2738150928/

Resources http://www.flickr.com/photos/ed_gaillard/4453249094/

Linkshttp://www.delicious.com/denisejacobs/ responsivewebdesignhttp://www.delicious.com/denisejacobs/ aeed

Books http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg

The book on Responsive Web
DesignResponsive Web Design by Ethan Marcotte

CSS3 and Media QueriesHardboiled Web
Design by Andy Clarke

Responsive Design and solid CSS
Handcrafted CSSby Dan Cederholm with Ethan Marcotte

Flexible LayoutsFlexible Web Designby Zoe
Mickley Gillenwater

CSS Troubleshooting The CSS Detective
Guideby Denise Jacobs

Holistic Web DesignInteract with Web
Standards: AHolistic Approach to Web Design

How to find meDeniseJacobs.comdenise@denisejacobs.comtwitter.com/denisejacobsslideshare.net/denisejacobs Photo
by Aaron Walter