Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 phil...
A true renaissance woman                                                        Author, Speaker & Trainer,                ...
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 ...
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                        ...
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  tro...
Browsers: 2002-2007•   2001: our favorite browser, IE6 is released•   2002: Netscape dies•   2003: Safari grows with Mac m...
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 a...
Experience Design“…Designing products, processes, services, events,and environments with a focus placed on thequality of t...
“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 con...
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  differen...
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 deserv...
3 Components of Responsive Design1) Flexible grid2) Flexible images3) Media Queries                      http://www.flickr...
“Instead of thinking in terms of pixel  perfection, we should be thinking of  proportion perfection.”                     ...
Flexible grid                http://simplegrid.info
Flexible & FluidSize everything in ems or percentages• Flexible: Ems for everything• Fluid: Percentages for width, ems for...
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....
@media queries@media queries allow the web developer to serve different styles based on the device and it’s orientation   ...
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.flick...
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...
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...
“Be the web designer and create the  interfaces that you want to see in the  world, for all of the world.”                ...
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                  ...
Linkshttp://www.delicious.com/denisejacobs/ responsivewebdesignhttp://www.delicious.com/denisejacobs/ aeed
Upcoming SlideShare
Loading in …5
×

Linkshttp://www.delicious.com/denisejacobs/ responsivewebdesignhttp://www.delicious.com/denisejacobs/ aeed The Age of Responsive Design

5,249 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

×