The Age of Responsive Design

2,539
-1

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,539
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×