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.

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