Responsive Web: I Wish This Hadn't Become A Buzzword

A presentation on the past, present, urgent-present, overdue-present, and future implications of Responsive Web Design for a publications trade group in late 2012.

Transcript

1. Jon White
2. Jon White @jonwhitebriefly
3. A thought experiment.
12. ...When I started making websites in the late ’90’s, everything I made was “best viewed in Internet Explorer at 640 x 480px” because I didn’t know then that web design was any different from print. Over the years screen resolutions got higher. 768, then 960, then 1120. Every step was an opportunity to make designs wider, but our thinking didn’t change much. We carried on designing single layouts for everyone. With a few notable exceptions, fixed-width, one-size-fits-all designs ruled the web. [...] 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. [...]
13. ...When I started making websites in the late ’90’s, everything I made was “best viewed in Internet Explorer at 640 x 480px” because I didn’t know then that web design was any different from print. Over the years screen resolutions got higher. 768, then 960, then 1120. Every step was an opportunity to make designs wider, but our thinking didn’t change much. We carried on designing single layouts for everyone. With a few notable exceptions, fixed-width, one-size-fits-all designs ruled the web. [...] 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. [...]
14. Laziness.
15. iPhone 1 (2007)
16. iPhone 5 (2012)
17. iPhone 5 (2012) “Over the years screen resolutions got higher. 768, then 960, then 1120. Every step was an opportunity to make designs wider, but our thinking didn’t change much.”
18. Liking the web.
19. The web
20. The web
21. Unthinking.
24. Unsustainability.
25. It’s not just that there’s no such thing as “fixed-width design” anymore.
26. It’s not just that there’s no such thing as “fixed-width design” anymore. There’s no such thing as the “mobile web” anymore, either.
27. Responsive web design.
28. What is responsive web design?
30. Responsive web design
31. Responsive web design The only sane way to develop a fulfilling website in a world that will never, ever, ever again be predictable. MY DEFINITION (2012)
32. Responsive web design “Creating a separate mobile website is simply a cop-out.” JEREMY KEITH (2010)
35. But it didn’t stop there.
37. 960+ 768 320
38. * 960+ 768 320
39. 960 ...2560+ 768 1024 320 480–568
40. ~2560+ 768 / 1024 320 / 568 800 720 540
41. ~2560+ 768 / 1024 320 / 568 800 720 540 ✓ ✓
42. ~2560+ 768 / 1024 320 / 568 800 720 540 1200 600 800
43. ~2560+ 768 / 1024 320 / 568 800 720 540 1200 600 800 “8 in. LCD”
44. ~2560+ 768 / 1024 320 / 568 800 720 540 1200 600 800 “8 in. LCD” ..??? ..???
45. source: alistapart.com
47. • 1 in 8 internet users • 1 in 4 American teens
48. assumptions
49. Origins.
50. web designers — obnoxious postmodernism
51. The standards movement.
53. The accessibility movement.
56. *
57. This time’s different.
59. Traditional workflow Responsive workflow • Plan • Design • Develop • Deploy • Plan • Combined and iterative design and development • Deploy source: smashingmagazine.com
60. Why should we care about responsive web design?
61. 1. Because managing multiple versions of one site sucks.
62. www.guardian m.guardian
64. 1. Because managing multiple versions of one site sucks.
65. 1. Because managing multiple versions of one site sucks. SEO
66. 1. Because managing multiple versions of one site sucks. SEO Cost
67. 1. Because managing multiple versions of one site sucks. SEO Cost Content Management
68. 1. Because managing multiple versions of one site sucks. SEO Cost Content Management 2. Because web users hate being ghettoized.
78. Different sizes of glass Less or more content ≠
83. But destroying assumptions is about more than design.
84. It’s hierarchy.
86. 1. Because managing multiple versions of one site sucks. SEO Cost Content Management 2. Because web users hate being ghettoized. 3. Because this isn’t about cool devices.
87. It’s about empathy.
88. source: Flickr / Grant Hutchinson
89. Web design SEXINESS 1993 2013 2003 1998 2008
90. source: Flickr / Roadsidepictures
91. Pioneers.
92. source: Flickr / veen
93. Envy.
99. What does responsive web design mean to what we do today?
100. 1. Design, design, design.
101. 1. Design, design, design. Typography
105. Putting it together.
106. 1. Design, design, design. Typography Layout
107. Posters as websites.
109. The new normal.
111. source: Flickr / adactio
112. Just so we all remember what’s going on here.
113. Just so we all remember what’s going on here. 1. There’s no more fold.
114. Just so we all remember what’s going on here. 1. There’s no more fold. 2. Seriously, I mean it—there’s no more fold.
115. Just so we all remember what’s going on here. 1. There’s no more fold. 2. Seriously, I mean it—there’s no more fold. 3. There’s no more “optimal resolution.”
116. Just so we all remember what’s going on here. 1. There’s no more fold. 2. Seriously, I mean it—there’s no more fold. 3. There’s no more “optimal resolution.” 4. Design from the content-out, not window-in.
117. Just so we all remember what’s going on here. 1. There’s no more fold. 2. Seriously, I mean it—there’s no more fold. 3. There’s no more “optimal resolution.” 4. Design from the content-out, not window-in. 5. Emergent advances in web typography are yours for the taking.
118. Just so we all remember what’s going on here. 1. There’s no more fold. 2. Seriously, I mean it—there’s no more fold. 3. There’s no more “optimal resolution.” 4. Design from the content-out, not window-in. 5. Emergent advances in web typography are yours for the taking. 6. Constraints are a benefit, not a limitation.
119. 1. Design, design, design. Typography Layout
120. 1. Design, design, design. 2. Process, process, process. Typography Layout
121. 1. Design, design, design. 2. Process, process, process. Typography Layout Information Architects
122. Only you know how your story is best told.
123. Hierarchy. (Again.)
124. “Mobile first.”
125. “Mobile first.” “Content out.”
126. 1. Design, design, design. 2. Process, process, process. Typography Layout Information Architects Designers
127. Blurring the lines.
128. IA Discovery Design Code
129. IA Discovery Design Code
130. Trust them.
131. Give them access to you.
132. “Canonical designs” later, “coded prototypes” earlier.
133. (A business case.)
136. How does responsive web design affect what we can do in the future?
137. The entire online advertising industry. I.
138. Sorry, this one’s on you.
139. The old existing model literally doesn’t fit.
140. Dollars for shapes.
143. 1st 2nd 3rd 3rd 4th
144. $$$$ $$$ $$ $$ $
145. Skyscraper $$$ Leaderboard $$$$ Banner $$$ Rectangle $$ Square $
148. Early evolutions.
150. The future hardware stuff. II.
152. The it’s-so-clever-we- don’t-have-paradigms- for-it yet stuff. III.
154. Epilogue
155. www.guardian m.guardian
156. Thursday, Oct. 18
158. Thanks. @jonwhitebriefly