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

Responsive Design at 10,000 Feet

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

33f63ca160270827b1ecb780434dca9e?s=128

Christopher Butler

March 21, 2013
Tweet

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
  11. None
  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.) ←
  13. None
  14. None
  15. This is the “tablet” version of the same website. ←

  16. None
  17. None
  18. This is the “phone” version of the same website. ←

  19. None
  20. None
  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.
  22. None
  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.
  42. None
  43. None
  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
  70. None
  71. Brad Frost elaborated on his point in a great post

    on the invisible aspects of design: http://bit.ly/14Nb3w5
  72. None
  73. None
  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

  104. None