Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design - The Past, Present, and Future

Aa84d76969c77f87a45610a98ceffba8?s=47 Lewis Nyman
March 23, 2012

Responsive Web Design - The Past, Present, and Future

This presentation examines the philosophy of "Responsive Web Design". It's suitable for newcomers to the term and experienced developers and designers who are already deeply involved in creating responsive sites.

Past

The web was stuck inside a lie we had created for ourselves called 960px. Designing sites for the lowest common denomination of screen size. Screens were getting bigger and more varied and we didn’t take advantage of them because it was hard.

Mobile web browsing came of age. Screen sizes suddenly got a lot smaller and forced us to stop looking at the web through the 960px view port and start thinking about how users were experiencing our site on different devices.

Present

Ethan Marcotte introduced a philosophy called 'Responsive Web Design'. It embraces the fact that devices are different and adapts to different contexts. Let's explore the roots of the philosophy and how it gave meaning to techniques people were already using.

Since the introduction of the term the web community has embraced it and expanded upon the original concepts. Mobile first responsive design is progressive enhancement taken a step further. Conditional loading introduces the concept of economical enhancement. Don't load what won't be used.

Future

There’s a lot more to a mobile device than a small screen. If a larger screen size is considered a device capability then what other capabilities do devices have we can take advantage of to create a better experience.

Aa84d76969c77f87a45610a98ceffba8?s=128

Lewis Nyman

March 23, 2012
Tweet

Transcript

  1. Responsive Web Design: The Past, Present, and Future. Tuesday, 20

    March 12
  2. Lewis Nyman Tuesday, 20 March 12

  3. Tuesday, 20 March 12

  4. Tuesday, 20 March 12

  5. Tuesday, 20 March 12

  6. #drupalcon #rwd @lewisnyman Tuesday, 20 March 12

  7. So yeah Tuesday, 20 March 12

  8. Tuesday, 20 March 12

  9. Past Tuesday, 20 March 12

  10. Present Tuesday, 20 March 12

  11. Future Tuesday, 20 March 12

  12. seatbelt67 Tuesday, 20 March 12

  13. This is not... Tuesday, 20 March 12

  14. Past Tuesday, 20 March 12

  15. Web Tuesday, 20 March 12

  16. Web 960 pixels Tuesday, 20 March 12

  17. Tuesday, 20 March 12

  18. splorp Tuesday, 20 March 12

  19. Tuesday, 20 March 12

  20. Renaissance Tuesday, 20 March 12

  21. annina_hey Tuesday, 20 March 12

  22. ollesvensson Tuesday, 20 March 12

  23. 1024 x 768 53% w3counter.com Tuesday, 20 March 12

  24. 1024 x 768 Tuesday, 20 March 12

  25. Wider grid system? Tuesday, 20 March 12

  26. Well... Tuesday, 20 March 12

  27. “Other” Tuesday, 20 March 12

  28. Tuesday, 20 March 12

  29. Tuesday, 20 March 12

  30. Present Tuesday, 20 March 12

  31. “Design for flexibility” drewm Tuesday, 20 March 12

  32. “A greater number of devices than ever before” kk Tuesday,

    20 March 12
  33. “We’re designing for mice and keyboards, for T9 keypads, for

    handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.” Tuesday, 20 March 12
  34. “This is our way forward” kk Tuesday, 20 March 12

  35. Responsive Web Design Tuesday, 20 March 12

  36. Fluid Grids Tuesday, 20 March 12

  37. Flexible Images Tuesday, 20 March 12

  38. Media Queries Tuesday, 20 March 12

  39. Tuesday, 20 March 12

  40. Responsive Architecture Tuesday, 20 March 12

  41. Tuesday, 20 March 12

  42. Tuesday, 20 March 12

  43. Tuesday, 20 March 12

  44. Tuesday, 20 March 12

  45. No reference to technology Tuesday, 20 March 12

  46. Philosophy & Implementation Tuesday, 20 March 12

  47. Tuesday, 20 March 12

  48. Built to last Tuesday, 20 March 12

  49. seesparkbox.com Tuesday, 20 March 12

  50. Mobile First Tuesday, 20 March 12

  51. Tuesday, 20 March 12

  52. Tuesday, 20 March 12

  53. Q4 2011 PC: 85m Smartphone: 158m Up 85% year on

    year Tuesday, 20 March 12
  54. Progressive enhancement on crack Tuesday, 20 March 12

  55. Conditional Loading Tuesday, 20 March 12

  56. “Good design is environmentally friendly” Dieter Rams Tuesday, 20 March

    12
  57. Don’t be wasteful Tuesday, 20 March 12

  58. +1% per 100ms +9% per 400ms strangeloopnetworks.com +60m for 2.2s

    Tuesday, 20 March 12
  59. Responsive Images Tuesday, 20 March 12

  60. 200kb 30kb adaptive-images.com Tuesday, 20 March 12

  61. Conditional content Tuesday, 20 March 12

  62. 24ways.org Tuesday, 20 March 12

  63. if (document.documentElement.clientWidth > 640) { Tuesday, 20 March 12

  64. Conditional resource loaders Tuesday, 20 March 12

  65. Future Tuesday, 20 March 12

  66. What is mobile? Tuesday, 20 March 12

  67. kylebean.co.uk Tuesday, 20 March 12

  68. Device or person? Tuesday, 20 March 12

  69. Untethered Tuesday, 20 March 12

  70. Tuesday, 20 March 12

  71. What else affects the untethered? Tuesday, 20 March 12

  72. Touch Tuesday, 20 March 12

  73. Tuesday, 20 March 12

  74. Tuesday, 20 March 12

  75. Tuesday, 20 March 12

  76. Mobile first & Conditional loading Tuesday, 20 March 12

  77. Modernizr.touch Tuesday, 20 March 12

  78. Tuesday, 20 March 12

  79. Thumbs Tuesday, 20 March 12

  80. Tuesday, 20 March 12

  81. Tuesday, 20 March 12

  82. irajesh.com Tuesday, 20 March 12

  83. @media orientation:landscape Tuesday, 20 March 12

  84. Network Tuesday, 20 March 12

  85. dantaylor Tuesday, 20 March 12

  86. josephb Tuesday, 20 March 12

  87. Network Information API Tuesday, 20 March 12

  88. Color Tuesday, 20 March 12

  89. Tuesday, 20 March 12

  90. Tuesday, 20 March 12

  91. @media monochrome Tuesday, 20 March 12

  92. @media color Tuesday, 20 March 12

  93. 66kb 32kb Tuesday, 20 March 12

  94. Battery Tuesday, 20 March 12

  95. Tuesday, 20 March 12

  96. Battery API Tuesday, 20 March 12

  97. Ambient light Tuesday, 20 March 12

  98. Tuesday, 20 March 12

  99. Tuesday, 20 March 12

  100. Tuesday, 20 March 12

  101. Sensor API Tuesday, 20 March 12

  102. Past Tuesday, 20 March 12

  103. Present Tuesday, 20 March 12

  104. Future Tuesday, 20 March 12

  105. A short history of @media queries Tuesday, 20 March 12

  106. W3C Working Draft Published 2001 Tuesday, 20 March 12

  107. W3C Working Draft Published 2001 HTML4 foresees need for @media

    query 1998 Tuesday, 20 March 12
  108. W3C Working Draft Published 2001 HTML4 foresees need for @media

    query 1998 Opera Implements 2003 Tuesday, 20 March 12
  109. W3C Working Draft Published 2001 Opera Implements 2003 Tuesday, 20

    March 12
  110. W3C Working Draft Published 2001 Opera Implements 2003 Safari Implements

    2008 Tuesday, 20 March 12
  111. W3C Working Draft Published 2001 Opera Implements 2003 Safari Implements

    2008 Firefox Implements 2009 Tuesday, 20 March 12
  112. Chrome and IE Implements 2010 W3C Working Draft Published 2001

    Opera Implements 2003 Safari Implements 2008 Firefox Implements 2009 Tuesday, 20 March 12
  113. The end Tuesday, 20 March 12

  114. The end? Tuesday, 20 March 12

  115. What did you think? Locate this session on the DrupalCon

    Denver website http://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You! Tuesday, 20 March 12