O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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                  ...
The Age of Responsive Design
Próximos SlideShares
Carregando em…5
×

The Age of Responsive Design

5.232 visualizações

Publicada em

The web is finally coming of age with respect to increasing sophistication of the structure and presentation of visual information, the standardization of technologies to more easily create and display this information, physical devices that make this information easily accessible, and finally growing social connectivity. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

The Age of Responsive Design

  1. Welcome tothe Age ofResponsive Design Denise R. JacobsRich Web Experience 2011 30 November 2011
  2. The Age of Twitter I am: @denisejacobs Our fine event is: # Rwx2011 @NoFluff And I will wax philosophic on: #arwd
  3. A true renaissance woman Author, Speaker & Trainer, Pan-Creativehttp://www.flickr.com/photos/aarronwalter/4629078087/
  4. Web design comes of age
  5. 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:
  6. Code http://www.flickr.com/photos/s4xton/2425718415/
  7. Browsers
  8. Devices
  9. Access http://www.marksson.com/my-two-cents/ipad-the-perfect-holiday-companion/attachment/ipad-on-the-beach
  10. How did we get here? http://www.flickr.com/photos/barretthall/205175534/
  11. Evolution of the web http://commons.wikimedia.org/wiki/File:Geological_time_spiral.png
  12. http://mikenu.deviantart.com/art/ASCII-Mona-Lisa-74823952?q=sort%3Atime+favby%3Amadlabsstudio&qo=3 http://www.flickr.com/photos/ivyfield/4486938457/
  13. The World Wide What? Era 1992 to 1996
  14. The general populace http://www.flickr.com/photos/rossaroni/4134794550/
  15. HTML: 1991
  16. CSS: 1996
  17. CSS: Usage of the time http://www.flickr.com/photos/peregrinari/2050430721/
  18. Browsers: pre-1993
  19. Browsers: 1993
  20. Browsers: 1992-1997• 1994: Netscape Navigator• 1995: Internet Explorer• 1996: Opera
  21. Design: very first website
  22. Web Design: circa 1996 http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
  23. Computers: circa 1996
  24. 1992-96: Mobile Phones http://www.flickr.com/photos/krystiano/4136881193/
  25. Mobile Phones: 1992-1997
  26. Environment: 1992-1996http://www.flickr.com/photos/stewf/393637161/
  27. Dot.com Bubble Boom Insanity Era 1997 to 2001
  28. HTML: 1997-2001• Beginning1997: HTML 3.2• End of 1997: HTML 4.0• Late 1999: HTML 4.01• 2000: XHTML 1.0
  29. CSS: 1998CSS 2 introduced• Not yet full Recommendation status, remains Candidate Recommendation to present.
  30. Browsers: IE v. NN http://www.flickr.com/photos/ivyfield/4486938457/
  31. Design: circa 1997
  32. Design: circa 2000
  33. Design: Flash websites, circa 2000
  34. Computers: 1999 http://www.flickr.com/photos/pigpogm/1951963648/
  35. Mobile Phones: 1997-2000
  36. Access: circa 2000http://www.flickr.com/photos/net9/122099189/
  37. Era of Web Standards and the Beginnings of Ubiquity 2002 to 2007
  38. HTML: 2002-2007• HTML 4.01 and XHTML hold steady as the favorite versions• XHTML 1.1 released (but noone seems to care)
  39. 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
  40. 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
  41. Design: circa 2003
  42. Design: circa 2005
  43. Mobile Phones: 2002-2007 • 2002: Bl/Crackberry • 2003: Treo combines PDA with Smartphone • 2004: Motorola Razr released
  44. Modern Era 2008 & 2009
  45. HTML & CSS: 2008-2009• Web Standards widely promoted and embraced• 2008: Development of HTML5 begins
  46. Browsers: 2008-2009
  47. Design: 2008-2009 http://www.flickr.com/photos/ivyfield/4486938457/
  48. Computers: 2002-2007
  49. Mobile Phones: 2007
  50. Environment & Access: 2008-9http://www.flickr.com/photos/yourdon/3475417696/
  51. Present http://www.flickr.com/photos/stormbirdstudio/4025884624/
  52. We’re lucky! http://www.flickr.com/photos/stn1978/3459778423/
  53. Improved Code: Easier Implementation http://naomiatkinsondesign.com
  54. Improved Browsers
  55. Great deviceshttp://www.flickr.com/photos/indyplanets/5693073535/
  56. Can access anywhere http://www.flickr.com/photos/yourdon/3869874855/
  57. So much figured out http://www.flickr.com/photos/argonne/4435608143/
  58. From this... http://www.flickr.com/photos/ivyfield/4486938457/
  59. Technical confluence
  60. Foundations for this... http://www.flickr.com/photos/ivyfield/4486938457/
  61. Design confluence
  62. 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)
  63. 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)
  64. “Social Design”Design of sites (and applications) thatencourage connection and interaction of usersand build community.
  65. 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.
  66. The Age of Responsive Design
  67. Becoming Responsive http://www.flickr.com/photos/gc_photography/4662878037/
  68. Responsive Devices? http://www.flickr.com/photos/ivyfield/4486938457/
  69. Responsive Devices!
  70. “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/
  71. Brain shift http://www.flickr.com/photos/tza/3214197147/
  72. Mobile first
  73. “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”
  74. 3 Components of Responsive Design1) Flexible grid2) Flexible images3) Media Queries http://www.flickr.com/photos/boklm/486646798/
  75. “Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.” - Jeremy Keith “Responsive enhancement” http://adactio.com/journal/1700/
  76. Flexible grid http://simplegrid.info
  77. Flexible & FluidSize everything in ems or percentages• Flexible: Ems for everything• Fluid: Percentages for width, ems for height
  78. Flexible Images: Foregroundimg {max-width: 100%;} http://www.flickr.com/photos/ivyfield/4486938457/
  79. Flexible Images: BackgroundUse background-position to selectively crop your backgrounds http://www.flickr.com/photos/ivyfield/4486938457/
  80. @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/
  81. The Goal http://www.flickr.com/photos/bhenak/2664682330/
  82. Avoid this desktop stylesheet + media queries = mobile site
  83. =“Switchy” layout http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  84. Instead this mobile stylesheet + media queries = desktop site
  85. = Truly responsive http://ri.gov
  86. What to do with this new perspective?
  87. Challenge yourself http://www.flickr.com/photos/danielsilliman/4489863368/
  88. Don’t do what you’re used to doing http://www.flickr.com/photos/jamiecampbell/446301597/
  89. Leverage the current confluences
  90. To produce http://mailchimp.com
  91. Or http://twitter.com
  92. Or http://morphix.si
  93. Or even http://html5readiness.com
  94. Or http://www.anderssonwise.com/
  95. Which is actually http://www.anderssonwise.com/
  96. Future http://www.flickr.com/photos/steffe/351623859/
  97. Widen perspective http://instagr.am/p/EvW6C/
  98. 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/
  99. If you start thinking differently http://www.flickr.com/photos/winni3/3363376446/
  100. “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/
  101. Responsive = Responsible http://www.flickr.com/photos/mazgrp/2050810720/
  102. Why we’re here http://www.flickr.com/photos/br1dotcom/4034902679/
  103. And http://www.flickr.com/photos/cristeenq/2360468936/
  104. For(crowd) http://www.flickr.com/photos/laubarnes/5449810357/
  105. Technical and Designconfluences
  106. http://www.flickr.com/photos/dougbelshaw/4168593521/
  107. “Design to where the Web will be, and not where it is.” Faruk Ates, “Technology And The Web”
  108. “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”
  109. The present and future http://www.flickr.com/photos/cdoublew/2663137942/
  110. The Age of Responsive Design http://www.flickr.com/photos/slicktrix/2738150928/
  111. Resources http://www.flickr.com/photos/ed_gaillard/4453249094/
  112. Linkshttp://www.delicious.com/denisejacobs/ responsivewebdesignhttp://www.delicious.com/denisejacobs/ aeed
  113. Books http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg
  114. The book on Responsive Web DesignResponsive Web Design by Ethan Marcotte
  115. CSS3 and Media QueriesHardboiled Web Design by Andy Clarke
  116. Responsive Design and solid CSS Handcrafted CSSby Dan Cederholm with Ethan Marcotte
  117. Flexible LayoutsFlexible Web Designby Zoe Mickley Gillenwater
  118. CSS Troubleshooting The CSS Detective Guideby Denise Jacobs
  119. Holistic Web DesignInteract with Web Standards: AHolistic Approach to Web Design
  120. How to find meDeniseJacobs.comdenise@denisejacobs.comtwitter.com/denisejacobsslideshare.net/denisejacobs Photo by Aaron Walter

×