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.

The Age of Responsive Design


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
  • Be the first to comment

  • Be the first to like this

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-Creative
  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
  7. Browsers
  8. Devices
  9. Access
  10. How did we get here?
  11. Evolution of the web
  13. The World Wide What? Era 1992 to 1996
  14. The general populace
  15. HTML: 1991
  16. CSS: 1996
  17. CSS: Usage of the time
  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
  23. Computers: circa 1996
  24. 1992-96: Mobile Phones
  25. Mobile Phones: 1992-1997
  26. Environment: 1992-1996
  27. 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
  31. Design: circa 1997
  32. Design: circa 2000
  33. Design: Flash websites, circa 2000
  34. Computers: 1999
  35. Mobile Phones: 1997-2000
  36. Access: circa 2000
  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
  48. Computers: 2002-2007
  49. Mobile Phones: 2007
  50. Environment & Access: 2008-9
  51. Present
  52. We’re lucky!
  53. Improved Code: Easier Implementation
  54. Improved Browsers
  55. Great devices
  56. Can access anywhere
  57. So much figured out
  58. From this...
  59. Technical confluence
  60. Foundations for this...
  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
  68. Responsive Devices?
  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”
  71. Brain shift
  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
  75. “Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.” - Jeremy Keith “Responsive enhancement”
  76. Flexible grid
  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%;}
  79. Flexible Images: BackgroundUse background-position to selectively crop your backgrounds
  80. @media queries@media queries allow the web developer to serve different styles based on the device and it’s orientation
  81. The Goal
  82. Avoid this desktop stylesheet + media queries = mobile site
  83. =“Switchy” layout
  84. Instead this mobile stylesheet + media queries = desktop site
  85. = Truly responsive
  86. What to do with this new perspective?
  87. Challenge yourself
  88. Don’t do what you’re used to doing
  89. Leverage the current confluences
  90. To produce
  91. Or
  92. Or
  93. Or even
  94. Or
  95. Which is actually
  96. Future
  97. Widen perspective
  98. Moving forwardWe need to build sites that can be accessed by anyone, anywhere, and on any device. 1), 2), 3), 4)
  99. If you start thinking differently
  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”
  101. Responsive = Responsible
  102. Why we’re here
  103. And
  104. For(crowd)
  105. Technical and Designconfluences
  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
  110. The Age of Responsive Design
  111. Resources
  112. Links responsivewebdesign aeed
  113. Books
  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 Photo by Aaron Walter