Responsive Design at 10,000 Feet

Presented on day one of the 2013 UCDA Design Summit.

Full writeup here: http://www.newfangled.com/responsive_design_at_10000_feet

Transcript

1. 2013 UCDA Design Summit Responsive Design at 10,000 Feet Christopher Butler Newfangled.com @chrbutler
2. What We’ll Cover What is responsive design? Strategic Considerations Planning Techniques Design Workflow Adaptive Behaviors Testing & Device Support ...the future!
3. What We’ll Cover What is responsive design? Strategic Considerations Planning Techniques Design Workflow Adaptive Behaviors Testing & Device Support ...the future! → → Today
4. What We’ll Cover What We Won’t Cover Code. What is responsive design? Strategic Considerations Planning Techniques Design Workflow Adaptive Behaviors Testing & Device Support ...the future! → → day
5. Impostor Syndrome
6. Impostor Syndrome Despite external evidence of my competence, I remain convinced that it is only a matter of time before I am discovered to be a fraud. I attribute my success so far to luck, timing, and deception.
7. Impostor Syndrome Despite external evidence of my competence, I remain convinced that it is only a matter of time before I am discovered to be a fraud. I attribute my success so far to luck, timing, and deception. Aspirational feelings tend to be in inverse proportion to one’s self assessment. Reality is often someplace in between. ↑ ASPIRATION JUDGEMENT REALITY
8. Even the experts haven’t been experts for very long!
9. Even the experts haven’t been experts for very long! What is responsive design? 1
10. Even the experts haven’t been experts for very long! Instead of building alternate versions of your website for mobile devices or platforms, responsive design is a method that allows you to build one site that adapts to the context in which it is viewed. What is responsive design? 1
12. This is your standard “desktop” version of a website. It’s my firm’s website, newfangled.com. (I don’t love the whole “desktop” distinction, by the way, but more on that later.) ←
15. This is the “tablet” version of the same website. ←
18. This is the “phone” version of the same website. ←
21. The website retrieves content from its database and distributes it across a grid. Each time the page is reloaded, the grid is redefined, creating a spontaneous layout. In every context, the content is the same, but the grid’s dimensions are defined by the size of the available viewport. This is made possible by responsive design.
23. Why responsive design? 2
24. Because the web is better than apps! Because, phones.
25. Because the web is better than apps! Because, phones. Because, phones.
26. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet.
27. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone.
28. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones.
29. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers.
30. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers. The mobile industry grew by 12% in 2012, hitting $1.45 Trillion in revenues.
31. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers. The mobile industry grew by 12% in 2012, hitting $1.45 Trillion in revenues. 3 out of every 4 dollars earned in the mobile industry are service revenues.
32. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers. The mobile industry grew by 12% in 2012, hitting $1.45 Trillion in revenues. 3 out of every 4 dollars earned in the mobile industry are service revenues. 98% of the 5.2 billion active phones have web browsers.
33. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers. The mobile industry grew by 12% in 2012, hitting $1.45 Trillion in revenues. 3 out of every 4 dollars earned in the mobile industry are service revenues. 98% of the 5.2 billion active phones have web browsers. We look at our phones an average of 150 times per day.
34. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers. The mobile industry grew by 12% in 2012, hitting $1.45 Trillion in revenues. 3 out of every 4 dollars earned in the mobile industry are service revenues. 98% of the 5.2 billion active phones have web browsers. Mobile Industry Maturity 1. Japan 2. Singapore 3. S. Korea 4. Finland 5. Taiwan 6. Sweden We look at our phones an average of 150 times per day. 7. Italy 8. Hong Kong 9. Austria 10. Denmark/UK 11. Australia
35. Because the web is better than apps! Because, phones. There are now over 6.7 Billion active mobile subscriptions. By summer, 2013, the number is projected to reach 7.1 Billion - matching the number of living human beings on this planet. Of the 6.7 Billion subscriptions, 4.3 Billion are unique persons. There are 5.2 Billion phones in use. 60.1% of the human population owns at least one mobile phone. 1.7 Billion new mobile phones sold in 2012. 50% of phones sold in 2013 are projected to be smartphones. This means that mobile phones have reached beyond the electricity and literacy barriers. The mobile industry grew by 12% in 2012, hitting $1.45 Trillion in revenues. 3 out of every 4 dollars earned in the mobile industry are service revenues. 98% of the 5.2 billion active phones have web browsers. Mobile Industry Maturity 1. Japan 2. Singapore 3. S. Korea 4. Finland 5. Taiwan 6. Sweden We look at our phones an average of 150 times per day. 7. Italy 8. Hong Kong 9. Austria 10. Denmark/UK 11. Australia The U.S. ranks 15th, up from 17 in 2012. For more, see: http://bit.ly/WIBqzP
36. Because, the web is better than apps!
37. Because, the web is better than apps!
38. Because, the web is better than apps!
39. Because, the web is better than apps! There are over 800k apps available at the iOS marketplace and over 650k apps available at the Android marketplace. The average price per app is $1.48 on iOS and $3.47 on Android. 41% of app developers are moonlighting; 11% are students and recent grads working part time. 26% are full time.
40. Because, the web is better than apps! There are over 800k apps available at the iOS marketplace and over 650k apps available at the Android marketplace. The average price per app is $1.48 on iOS and $3.47 on Android. 41% of app developers are moonlighting; 11% are students and recent grads working part time. 26% are full time. Not all information is product!
41. Because, the web is better than apps! There are over 800k apps available at the iOS marketplace and over 650k apps available at the Android marketplace. The average price per app is $1.48 on iOS and $3.47 on Android. 41% of app developers are moonlighting; 11% are students and recent grads working part time. 26% are full time. Not all information is product! But even when it is, an app still may not be the best format.
44. URLs make it possible for information to be indexable, sharable, and discoverable. ← For my full case against apps: http://bit.ly/mLiaMZ
45. Because, its excellence is supported by the data.
46. Because, its excellence is supported by the data.
47. Because, its excellence is supported by the data. Time.com Responsive Redesign - Pages per visit, across mobile, tablet and desktop are up considerably. - Mobile is up 23% compared to what it had been. - Homepage uniques are up 15%, and time spent is up 7.5%. - The mobile bounce rate decreased by 26%.
48. Because, its excellence is supported by the data. OneillClothing.com Responsive Redesign - 65.7% conversion rate increase on iPhone/ iPod - 101.2% revenue growth on iPhone/ iPod - 407.3% conversion rate increase on Android devices - 591.4% revenue growth on Android devices - 20.3% conversion rate increase on non- mobile devices - 41.1% revenue growth on non- mobile devices
49. Because, its excellence is supported by the data. SkinnyTies.com Responsive Redesign - 42% revenue growth on all devices - 13.6% conversion rate increase - 377.6% revenue growth on iPhone - 71.9% conversion rate increase on iPhone - 44.6% increase in duration - 23.3% lower bounce rate
50. Because, its excellence is supported by the data. Regent-College.Edu Responsive Redesign - 99% increase in unique visitors - 77% increase pageviews - 63% increase in online applications For sources, see: http://bit.ly/WfuyyW
51. Challenges of Responsive Design 3
52. Challenges of Responsive Design
53. Challenges of Responsive Design
54. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ←
55. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really.
56. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work.
57. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work.
58. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work. Over the past six months, less than 10% of our site’s visitors accessed it using a mobile device.
59. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work. Over the past six months, less than 10% of our site’s visitors accessed it using a mobile device. iOS devices accounted for a substantial majority (73%) of all mobile traffic. The next identified device accounts for less than 1% of the total visits.
60. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work. Over the past six months, less than 10% of our site’s visitors accessed it using a mobile device. iOS devices accounted for a substantial majority (73%) of all mobile traffic. The next identified device accounts for less than 1% of the total visits.
61. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work. Over the past six months, less than 10% of our site’s visitors accessed it using a mobile device. iOS devices accounted for a substantial majority (73%) of all mobile traffic. The next identified device accounts for less than 1% of the total visits. Over the past month, the number of visitors accessing our site using mobile devices grows to just over 10%.
62. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work. Over the past six months, less than 10% of our site’s visitors accessed it using a mobile device. iOS devices accounted for a substantial majority (73%) of all mobile traffic. The next identified device accounts for less than 1% of the total visits. Over the past month, the number of visitors accessing our site using mobile devices grows to just over 10%. iOS devices again accounted for the majority (79%) of all mobile traffic. The next identified device again accounts for less than 1% of the total visits.
63. Challenges of Responsive Design This is just about a tenth of the full list. See for yourself: http://bit.ly/rqXwFz ← It's more work. Really. Let your analytics help you prioritize your work. Over the past six months, less than 10% of our site’s visitors accessed it using a mobile device. iOS devices accounted for a substantial majority (73%) of all mobile traffic. The next identified device accounts for less than 1% of the total visits. Over the past month, the number of visitors accessing our site using mobile devices grows to just over 10%. iOS devices again accounted for the majority (79%) of all mobile traffic. The next identified device again accounts for less than 1% of the total visits. The data tell us to prioritize iOS devices.
64. ← Is user attention good in every context?
65. ← Is user attention good in every context?
66. ← Is user attention good in every context?
67. ← Does responsive design limit creativity?
68. You can find this post at: http://bit.ly/WgBUCu
69. Noah Stokes followed up his tweet in a longer post called Where Has All the Soul Gone?: http://bit.ly/YBkgrp
71. Brad Frost elaborated on his point in a great post on the invisible aspects of design: http://bit.ly/14Nb3w5
74. It's our job to maintain a balance between tools and technique; between invention and standardization, isn’t it?
75. 4 Wait, mobile first?
76. 4 Wait, mobile first? You can find this post at: http://bit.ly/4j9TXI
77. 4 Wait, mobile first? To this point alone, I think the proper response is to make sure mobile is being addressed. But mobile first? Not necessarily.
78. 4 Wait, mobile first? What about this point? Limitations can make for good design, but in this case, we’re talking about real, spatial constraints, not just an economy of thinking. A perfect fit for one context is never likely to be a perfect fit for another. So mobile first? Again, I think it depends upon the site.
79. 4 Wait, mobile first? What about this point? Limitations can make for good design, but in this case, we’re talking about real, spatial constraints, not just an economy of thinking. A perfect fit for one context is never likely to be a perfect fit for another. So mobile first? Again, I think it depends upon the site.
80. 4 Wait, mobile first? This is an interesting point, but it should turn our focus back on our users. What is their technological context? Will extending capabilities exclude the very users you are designing for? So mobile first? Not necessarily...
81. 4 Wait, mobile first? This is an interesting point, but it should turn our focus back on our users. What is their technological context? Will extending capabilities exclude the very users you are designing for? So mobile first? Not necessarily... Luke Wroblewski’s thinking has progressed on this issue, and that’s represented in this book. I’d recommend it to any designer doing interactive work right now. You can find it here: http://bit.ly/jMSGAB
82. 4 Wait, mobile first? This is an interesting point, but it should turn our focus back on our users. What is their technological context? Will extending capabilities exclude the very users you are designing for? So mobile first? Not necessarily... Luke Wroblewski’s thinking has progressed on this issue, and that’s represented in this book. I’d recommend it to any designer doing interactive work right now. You can find it here: http://bit.ly/jMSGAB The reality of your audience should dictate your design philosophy.
83. 5 Planning for responsive design projects
84. 5 Planning for responsive design projects
85. 5 Planning for responsive design projects
86. 5 Planning for responsive design projects
87. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ←
88. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ←
89. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ←
90. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ←
91. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ←
92. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ←
93. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ←
94. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ←
95. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ← Wireframing helps to solidify your planning, especially in terms of articulating the logical flow from one screen to another. Google Docs has a library of mobile wireframe templates, which you can access here: http://bit.ly/Qaewhj ←
96. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ← Wireframing helps to solidify your planning, especially in terms of articulating the logical flow from one screen to another. Google Docs has a library of mobile wireframe templates, which you can access here: http://bit.ly/Qaewhj ←
97. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ← Wireframing helps to solidify your planning, especially in terms of articulating the logical flow from one screen to another. Google Docs has a library of mobile wireframe templates, which you can access here: http://bit.ly/Qaewhj ←
98. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ← Wireframing helps to solidify your planning, especially in terms of articulating the logical flow from one screen to another. Google Docs has a library of mobile wireframe templates, which you can access here: http://bit.ly/Qaewhj ←
99. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ← Wireframing helps to solidify your planning, especially in terms of articulating the logical flow from one screen to another. Google Docs has a library of mobile wireframe templates, which you can access here: http://bit.ly/Qaewhj ←
100. 5 Planning for responsive design projects Paper prototyping is good! It helps us get our ideas out quickly, without being slowed down too much by more complex technology. ← But there’s a limit to the effectiveness of paper. While it can provide a context for working with ideas, it is not ideal for exploring interactions. It’s an early stage planning method. ← Wireframing helps to solidify your planning, especially in terms of articulating the logical flow from one screen to another. Google Docs has a library of mobile wireframe templates, which you can access here: http://bit.ly/Qaewhj ← Prototyping is the next step in working out the necessary detail and communicating the user experience of mobile screens without getting involved in visual design or aesthetic details. ←
101. ...and that’s where we’ll wrap up for today.
102. What We’ll Cover What is responsive design? Strategic Considerations Planning Techniques Design Workflow Adaptive Behaviors Testing & Device Support ...the future! → → Tomorrow
103. Thank You! Get in touch: chris@newfangled.com @chrbutler