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

Responsive Design on the Ground

Responsive Design on the Ground

Part two of my presentations at the 2013 UCDA Design Summit.

33f63ca160270827b1ecb780434dca9e?s=128

Christopher Butler

March 22, 2013
Tweet

Transcript

  1. 2013 UCDA Design Summit Responsive Design on the Ground Christopher

    Butler Newfangled.com @chrbutler Friday, March 22, 13
  2. What We’ll Cover What is responsive design? Strategic Considerations Planning

    Techniques Design Workflow Adaptive Behaviors Testing & Device Support ...the future! → → Today Friday, March 22, 13
  3. Determining Breakpoints 1 Friday, March 22, 13

  4. 1024+ Friday, March 22, 13

  5. 1024+ 1023-768 Friday, March 22, 13

  6. 1024+ 1023-768 767-480 Friday, March 22, 13

  7. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  8. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  9. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  10. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  11. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  12. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  13. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  14. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  15. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  16. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  17. 1024+ 1023-768 767-480 up to 479 Friday, March 22, 13

  18. 1024+ 1023-768 767-480 up to 479 But wait! These breakpoints

    sound terrific (and they are!), but they’re based upon today’s conventions, and conventions are really just the manifestation of agreements between designers, manufacturers, and users. These agreements are always in flux. Friday, March 22, 13
  19. So, don’t get too comfortable. Friday, March 22, 13

  20. Rearranging Page Elements 2 Friday, March 22, 13

  21. Navigation Menus Friday, March 22, 13

  22. Navigation Menus Friday, March 22, 13

  23. Friday, March 22, 13

  24. Friday, March 22, 13

  25. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Friday, March 22, 13
  26. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Friday, March 22, 13
  27. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Friday, March 22, 13
  28. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Friday, March 22, 13
  29. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Friday, March 22, 13
  30. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Friday, March 22, 13
  31. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Friday, March 22, 13
  32. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Friday, March 22, 13
  33. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Toggle menus can be used to keep the navigation at the top of the page and expand downward as the user expands sub menu items. Pros: styleable, keeps the user in place Cons: requires javascript, animation performance varies ← Friday, March 22, 13
  34. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Toggle menus can be used to keep the navigation at the top of the page and expand downward as the user expands sub menu items. Pros: styleable, keeps the user in place Cons: requires javascript, animation performance varies ← Friday, March 22, 13
  35. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Toggle menus can be used to keep the navigation at the top of the page and expand downward as the user expands sub menu items. Pros: styleable, keeps the user in place Cons: requires javascript, animation performance varies ← Friday, March 22, 13
  36. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Toggle menus can be used to keep the navigation at the top of the page and expand downward as the user expands sub menu items. Pros: styleable, keeps the user in place Cons: requires javascript, animation performance varies ← Friday, March 22, 13
  37. Preservation is a suitable option when there are few enough

    navigation items (or where some can be shortened) to fit within the horizontal span of the smallest viewports and still be differentiated by fingers. Pros: Easy to do Cons: Not scalable, fat fingers ← Default select menus can also be used to collapse your navigation into one simple pulldown menu. Pros: Easy to implement and use, preserves space Cons: lacks styling, strains under sub navigation structures ← Toggle menus can be used to keep the navigation at the top of the page and expand downward as the user expands sub menu items. Pros: styleable, keeps the user in place Cons: requires javascript, animation performance varies ← The “nav sandwich” variant of the toggle. There are many more possible navigation variations. I’d recommend these posts by Brad Frost for much more detail: http://bit.ly/zwyv2d http://bit.ly/QsaFk5 ← Friday, March 22, 13
  38. Calls to Action Friday, March 22, 13

  39. Calls to Action Friday, March 22, 13

  40. Friday, March 22, 13

  41. Friday, March 22, 13

  42. Friday, March 22, 13

  43. Relocating calls to action from sidebars to beneath content is

    your best use of the space available on smaller screens and also corresponds to their intent: to call a user to a particular action in response to the page’s content. ← Friday, March 22, 13
  44. Slideshows Friday, March 22, 13

  45. Slideshows Friday, March 22, 13

  46. Slideshows Friday, March 22, 13

  47. Slideshows Friday, March 22, 13

  48. Slideshows Adapting slideshows requires that images be scaled, but navigation

    tools be recreated. While clickable buttons or toggles may work well for desktop users, tap or swipe is more intuitive and usable on mobile devices. (Be careful of on tap actions if slides also need to link to subpages on tap.) ← Friday, March 22, 13
  49. Images Friday, March 22, 13

  50. “Desktop” Friday, March 22, 13

  51. “Desktop” “Tablet” Friday, March 22, 13

  52. “Desktop” “Tablet” “Phone” Friday, March 22, 13

  53. Legible Detail What’s the Point? Friday, March 22, 13

  54. Legible Detail What’s the Point? Friday, March 22, 13

  55. “Desktop” Friday, March 22, 13

  56. “Desktop” “Tablet” Friday, March 22, 13

  57. “Desktop” “Tablet” “Phone” Friday, March 22, 13

  58. “Desktop” “Tablet” “Phone” Friday, March 22, 13

  59. Cropping is Art Direction Friday, March 22, 13

  60. Testing Responsive Sites 3 Friday, March 22, 13

  61. Testing Responsive Sites 3 mattkersley.com/responsive/ Friday, March 22, 13

  62. Testing Responsive Sites 3 screenqueri.es Friday, March 22, 13

  63. Testing Responsive Sites 3 responsive.is Friday, March 22, 13

  64. Testing Responsive Sites 3 responsive.is Emulators are great for a

    cursory spot-check, and certainly better than resizing a desktop browser window on the fly. But they’re not the most accurate representation of how things look on actual mobile devices. Pros: free, fast Cons: inconsistent ← Friday, March 22, 13
  65. Testing Responsive Sites 3 responsive.is Emulators are great for a

    cursory spot-check, and certainly better than resizing a desktop browser window on the fly. But they’re not the most accurate representation of how things look on actual mobile devices. Pros: free, fast Cons: inconsistent ← Friday, March 22, 13
  66. Testing Responsive Sites 3 responsive.is Emulators are great for a

    cursory spot-check, and certainly better than resizing a desktop browser window on the fly. But they’re not the most accurate representation of how things look on actual mobile devices. Pros: free, fast Cons: inconsistent ← Friday, March 22, 13
  67. Testing Responsive Sites 3 responsive.is Emulators are great for a

    cursory spot-check, and certainly better than resizing a desktop browser window on the fly. But they’re not the most accurate representation of how things look on actual mobile devices. Pros: free, fast Cons: inconsistent ← Device labs are a much more reliable approach to testing responsive sites. There really is no substitute for the actual device, as the true interaction between software and hardware cannot be reproduced by emulators. Pros: accuracy Cons: expensive, slow ← Friday, March 22, 13
  68. Device Support 4 Friday, March 22, 13

  69. 2012 Device Market Share 1. Google Android . . .

    . . . . . . . 48% (31%) 2. Apple iPhone . . . . . . . . . . . 19% (16%) 3. Nokia Symbian . . . . . . . . . . 15% (33%) 4. RIM Blackberry . . . . . . . . . . . 8% (12%) 5. Samsung bada . . . . . . . . . . 2% ( 3%) 6. MS Windows Phone . . . . . . 2% ( 1%) 7. MS Windows Mobile . . . . . . . 1% ( 2%) Others . . . . . . . . . . . . . . . . . . . . . . 1% (3%) Total Smartphones in Use . . . 1,320 Million For more, see: http://bit.ly/WIBqzP Friday, March 22, 13
  70. 2012 Device Market Share 1. Google Android . . .

    . . . . . . . 48% (31%) 2. Apple iPhone . . . . . . . . . . . 19% (16%) 3. Nokia Symbian . . . . . . . . . . 15% (33%) 4. RIM Blackberry . . . . . . . . . . . 8% (12%) 5. Samsung bada . . . . . . . . . . 2% ( 3%) 6. MS Windows Phone . . . . . . 2% ( 1%) 7. MS Windows Mobile . . . . . . . 1% ( 2%) Others . . . . . . . . . . . . . . . . . . . . . . 1% (3%) Total Smartphones in Use . . . 1,320 Million Friday, March 22, 13
  71. 2012 Device Market Share 1. Google Android . . .

    . . . . . . . 48% (31%) 2. Apple iPhone . . . . . . . . . . . 19% (16%) 3. Nokia Symbian . . . . . . . . . . 15% (33%) 4. RIM Blackberry . . . . . . . . . . . 8% (12%) 5. Samsung bada . . . . . . . . . . 2% ( 3%) 6. MS Windows Phone . . . . . . 2% ( 1%) 7. MS Windows Mobile . . . . . . . 1% ( 2%) Others . . . . . . . . . . . . . . . . . . . . . . 1% (3%) Total Smartphones in Use . . . 1,320 Million It’s not feasible to support every possible device. Find the common ground between overall market share and your site’s audience. A reasonable cutoff might be at any device that contributes less than 5% of your site’s unique visits. Friday, March 22, 13
  72. Usability Testing Friday, March 22, 13

  73. Usability Testing Friday, March 22, 13

  74. Friday, March 22, 13

  75. Usability Testing Friday, March 22, 13

  76. Upward Responsiveness? 5 Friday, March 22, 13

  77. Upward Responsiveness? 5 Friday, March 22, 13

  78. Upward Responsiveness? 5 Friday, March 22, 13

  79. Upward Responsiveness? 5 25% 25% Used Space: 50% Friday, March

    22, 13
  80. Upward Responsiveness? 5 25% 25% Used Space: 50% Friday, March

    22, 13
  81. Upward Responsiveness? 5 25% 25% Used Space: 50% Just as

    mobile devices with smaller screens have challenged our design thinking and process, so should larger displays. Friday, March 22, 13
  82. Upward Responsiveness? 5 25% 25% Used Space: 50% Just as

    mobile devices with smaller screens have challenged our design thinking and process, so should larger displays. Thank You! Get in touch: chris@newfangled.com @chrbutler Friday, March 22, 13