Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design Primer - NAGW 2014

1,300 views

Published on

For many web developers whose jobs don't allow them to play with all the newest technologies, something like responsive design can be just out of reach. As more users are surfing exclusively on mobile devices, these are skills every web developer, designer, and manager needs to develop. We'll walk through the background, assorted techniques, how to measure success, and where it's all going. This is not a coding session, but a planning and strategy session.

Published in: Technology
  • Agreed, I just checked the audio and I failed to note both bandwidth constraints and the lack of hover support on the typical touch device. I'll have to add those as bullets to the next version of this talk.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Terrific slide deck, thank you!
    Regarding slide 15 'Option: Do Nothing':

    'Mobile browsers can already handle sites.'

    Page weight is also a problem on mobile.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Web Design Primer - NAGW 2014

  1. 1. Responsive Web Design Primer Presented by Adrian Roselli for the National Association of Government Web Professionals
  2. 2. About Adrian Roselli • Co-written four books. • Technical editor for two books. • Written over fifty articles, most recently for .net Magazine and Web Standards Sherpa. Great bedtime reading!
  3. 3. About Adrian Roselli • Member of W3C HTML Working Group, W3C Accessibility Task Force, five W3C Community Groups. • Building for the web since 1994. • Founder, owner at Algonquin Studios (AlgonquinStudios.com). • Learn more at AdrianRoselli.com. • Avoid on Twitter @aardrian. I warned you.
  4. 4. What We’ll Cover • Background • Techniques • Measuring • Code Examples • Future • Questions (ongoing!)
  5. 5. Background
  6. 6. Context • 77% of mobile searches occur at home/work. • 81% are done due to speed/convenience. Mobile Search Moments Study, Google, March 2013
  7. 7. Context • Many use internet mostly/only via a smartphone: • 50% of teens (aged 12-17). • 45% of young adults (aged 18-29) The Rise of the Mobile-Only User, Harvard Business Review, May 2013
  8. 8. Context • Many use internet mostly/only via a smartphone: • 51% of black Americans. • 42% of Hispanic Americans. • 24% of white Americans. The Rise of the Mobile-Only User, Harvard Business Review, May 2013
  9. 9. Context • Many use internet mostly/only via a smartphone: • ~40% of people with household income of less than $30,000. • ~40% of people with less than a college education. The Rise of the Mobile-Only User, Harvard Business Review, May 2013
  10. 10. Context “Healthcare, non-profit, and government institutions which need to reach these populations should be aware that their audience is mobile-only*.” — Karen McGrane * The data state these users are mostly mobile, not exclusively mobile, though some sub-set is.
  11. 11. Trends • Number of North American mobile-only internet users: • 2010: 2.61 million • 2011: 4.21 million • 2012: 6.55 million • 2013: 14.26 million • 2014: 38.78 million • 2015: 55.65 million Number of mobile-only internet users in selected regions from 2010 to 2015 (in millions)
  12. 12. Where do people use mobile devices? • 84% at home. • 80% during misc. downtime throughout day. • 76% waiting in lines or for appointments. • 69% while shopping. • 64% at work. • 62% (84%) while watching TV. • 47% during commute. • 75% in the bathroom. http://www.lukew.com/ff/entry.asp?1263
  13. 13. Options
  14. 14. Options • Do nothing. • Make an m-dot site. • Go responsive.
  15. 15. Option: Do Nothing • Mobile browsers can already handle sites. • User can zoom as appropriate. • Better than a half-hearted approach. • Be aware Flash/Silverlight won’t work.
  16. 16. Option: Make an M-dot Site • m.domain.tld. • It’s not responsive. • Relies on browser detection. • Can split SEO/SEM efforts. • You’ll have to maintain two sites. • Doesn’t allow for context switching.
  17. 17. Option: Go Responsive • Responsive Web Design (RWD). • Also known as Adaptive Web Design. • Often misunderstood, mis-described. • This is why you’re here.
  18. 18. What RWD Is • A method to adjust styles based on factors such as: • Screen size, • Screen orientation, • Pixel density, • Contrast setting, • Media (print, television, etc.).
  19. 19. What RWD Isn’t • It does not excel at, or is incapable of, telling us: • User bandwidth, • Input device, • Viewing context, • Browser features.
  20. 20. “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.” https://developers.google.com/webmasters/smartphone-sites/
  21. 21. Techniques
  22. 22. A Responsive Workflow 1. Content inventory. 2. Content reference wireframes. 3. Design in text (structured content). 4. Linear design (mobile first). 5. Breakpoint graph. 6. Design for various breakpoints. 7. HTML design prototype. 8. Present prototype screenshots. 9. Present prototype after revision. 10. Document for production. http://www.slideshare.net/stephenhay/mobilism2012
  23. 23. Strategies • Mobile First. • Responsive Retrofit. • Responsive M-dot. • Piecemeal. http://bradfrostweb.com/blog/post/responsive-strategy/
  24. 24. Strategy: Mobile First • Present all your content (content first!). • Build for smallest display. • Layer support for larger screens on top. • Minimize impact of large files (giant images in particular). • Can take extra time, be hard to sell to stakeholders. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  25. 25. Strategy: Responsive Retrofit • Can be relatively quick to layer mobile styles to existing site. • Can be easier to get buy-in from stakeholders. • Can learn as you go. • Can be slower for mobile devices, and offer less support. • You’ll struggle with the content bloat. http://webstandardssherpa.com/reviews/responsive-retrofitting/
  26. 26. Strategy: Responsive M-dot • Can be a good way to test reception. • Similar to starting anew with a mobile-first approach, but easier roll-out. • Work out the kinks in your process. • But it’s still an m-dot, with all those issues. • Without overall plan, may be difficult to scale layout to larger screens.
  27. 27. Strategy: Piecemeal • Can tackle mini- or sub-sites first. • Can target highest profile pages, get most bang for buck. • Easier to test techniques, workflows. • However, can provide jarring experience for users traversing entire site.
  28. 28. Components • Media Queries. • Breakpoints.
  29. 29. Media Queries • Feature of Cascading Style Sheets (CSS). • Allows developer to identify styles that should apply when certain criteria are met: • Width • Height • Orientation • Etc… • Some are browser-specific.
  30. 30. Breakpoints • Points at which different media query statements kick in. • Styles are applied, • Some styles overridden. • Could be based on known screen sizes. • Should be based on elements of the design. • Here’s why…
  31. 31. Android screen sizes, though a bit old now: http://opensignal.com/reports/fragmentation.php
  32. 32. Jason Grigsby on Twitter: https://twitter.com/grigs/status/511769628679614464
  33. 33. http://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422 Brad Frost
  34. 34. Smartphone Ownership 2013, Pew Research, June 2013
  35. 35. Me on Twitter: https://twitter.com/aardrian/status/509706419143458816
  36. 36. User Context • One-handed? Two-handed? • Standing? Sitting? • With another device? • Mouse? Touch? Stylus? Keyboard?
  37. 37. User Context http://blog.adrianroselli.com/2013/03/observing-users-with-mobile-devices.html
  38. 38. http://nunstakingpicswithhellokittyipad.tumblr.com/
  39. 39. Task/Device Switching • 60+% of online adults use at least two devices every day. • ~25% use three devices every day. • 40% of all online adults start an activity on one device and finish it on another. US smartphone engagement has overtaken desktop: stats, April 2014
  40. 40. Stephanie Rieger @stephanierieger “Classic multi device, stationary but mobile, bandwidth constrained, best device is the connected one scenario! pic.twitter.com/i3lVX n2k07”
  41. 41. Planning • Plan to show the same content to all users. • Plan to show all content to all users. • Prioritize content for linearized pages. • Provide clear site structure. • Account for multi-use multi-input.
  42. 42. Example Layout Patterns • Luke Wroblewski identifies common layout patterns: • Mostly Fluid • Column Drop • Layout Shifter • Off Canvas • Tiny Tweaks http://www.lukew.com/ff/entry.asp?1514 http://www.lukew.com/ff/entry.asp?1569
  43. 43. Example Layout Patterns Mostly Fluid Column Drop http://www.lukew.com/ff/entry.asp?1514 http://www.lukew.com/ff/entry.asp?1569
  44. 44. Example Layout Patterns Layout Shifter http://www.lukew.com/ff/entry.asp?1514 http://www.lukew.com/ff/entry.asp?1569 Off Canvas Tiny Tweaks
  45. 45. Best Practices • 7 Habits of Highly Effective Media Queries from Mobile UX Summit 2013: 1. Let content determine breakpoints 2. Treat layout as an enhancement 3. Use major and minor breakpoints 4. Use relative sizing 5. Go beyond width 6. Use media queries for conditional loading 7. Don’t go overboard http://www.lireo.com/recap-7-habits-of-highly-effective-media-queries/
  46. 46. Ben Norris http://pic.twitter.com/3Ri0uI8gSb http://pic.twitter.com/oaJI456xLF
  47. 47. Google: Common Mistakes • Unplayable videos. • Faulty redirects. • Smartphone-only 404s. • App download interstitials. • Irrelevant cross-linking. • Page speed (both time to render and overall page size). https://developers.google.com/webmasters/smartphone-sites/common-mistakes
  48. 48. Other Gotchas • Scrolling (example…). • Don’t forget the printed page (example…). • Page weight. • Device pixels vs. CSS pixels (all hail PPK). • Account for giant screens. • Remember televisions (for reals). • Don’t build accessibility barriers. • Don’t disable “pinch to zoom.”
  49. 49. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  50. 50. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  51. 51. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  52. 52. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  53. 53. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  54. 54. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  55. 55. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  56. 56. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  57. 57. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  58. 58. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  59. 59. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  60. 60. http://bradfrostweb.com /blog/post/page-height-scrolling- and-responsive-web- design/
  61. 61. Photo of printed page from http://elliotjaystocks.com/blog/has-adaptive- design-failed-of-course-it-bloody- hasnt/ I have many techniques and examples: http://blog.adrianroselli.com/searc h/label/print
  62. 62. http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/website-abandonment- happens-after-3-seconds/
  63. 63. Pages Are Getting Fatter Why does a typical ecommerce page take 6.5 seconds to load primary content?
  64. 64. “We’ve made the internet in our image… Obese” ~ Jason Grigsby “If your website is 15MB, it’s not HTML5, it’s stupid” ~ Christian Heilmann
  65. 65. https://twitter.com/wilto/status/63284673723375616
  66. 66. Edge Case • Let a user “opt out” of a responsive layout. http://blog.adrianroselli.com/2013/01/letting-mobile-users-see-desktop-view.html
  67. 67. Test !! • Seriously, test. • Watch users. • Have your family and friends try it. • Get every phone, phablet, tablet, laptop, television, printer, etc. that you can. • Browser developer tools. • Test in stores. • Test some more. • Screen shots are your friend. • Emulators (or window resizing) don’t suffice.
  68. 68. Code Examples
  69. 69. HTML • Use both device-width and initial-scale. • initial-scale works in Safari. • device-width works in Internet Explorer. • Both work in all other browsers. <meta name="viewport" content="width=device-width,initial-scale= 1">
  70. 70. CSS • Most media queries target width. • width (min-width and max-width). • device-width (min-device-width and max-device- width). • Use width since it targets layout viewport, works everywhere. @media all and (min-width: 600px) { p { color: #f00; } }
  71. 71. CSS Curveball • Microsoft supports standard (@viewport), but only as prefixed style. • Accounts for Internet Explorer on Windows 8 in “Metro” mode and “snap mode.” @-ms-viewport { width: device-width; }
  72. 72. Mobile First Example p { color: #fff; } @media all and (min-width: 600px) { p { color: #f00; } } @media print { p { color: #000; } }
  73. 73. Minimal Page <html> <head> <meta name="viewport" content="width=device-width,initial-scale= 1"> <style> @-ms-viewport { width: device-width; } p { color: #c0c; } @media all and (min-width: 600px) { p { color: #0c0; } } @media print { p { color: #000; } } </style> </head> <body> <p>Hello NAGW!</p> </body> </html> This is just an example that you can paste into an HTML file to see in action. Please don’t use in production.
  74. 74. Measuring
  75. 75. Google Analytics • Look at mobile users, devices before updates.
  76. 76. Google Analytics • Look at mobile users, devices before updates. • Compare with users/devices after updates.
  77. 77. Google Analytics • Look at mobile users, devices before updates. • Compare with users/devices after updates. • Pay attention to changes not related to general market trends.
  78. 78. Google Analytics • Look at mobile users, devices before updates. • Compare with users/devices after updates. • Pay attention to changes not related to general market trends. • Make sure most trafficked pages get attention.
  79. 79. Google Analytics • Look at mobile users, devices before updates. • Compare with users/devices after updates. • Pay attention to changes not related to general market trends. • Make sure most trafficked pages get attention. • Evaluate pages with high bounce rates.
  80. 80. Check the Data
  81. 81. Future
  82. 82. Here or on Its Way • Responsive image techniques (@srcset, <picture>). • Chrome 38, Opera 25 so far. • Guide to <picture> and @srcset. • Additional media query support (bandwidth, accessibility device, etc.). • Everybody gets touch! • Alternate devices (the dreaded smart fridge).
  83. 83. Questions
  84. 84. Resources • Check and force support: • http://modernizr.com/ • http://mydevice.io/, http://mydevice.io/devices/ • http://caniuse.com/ • MediaQueri.es • http://mediaqueri.es/ • http://www.printshame.com/ • BBC Mobile Accessibility Guidelines v1.0 • http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile_access.shtml • W3C CSS3 Media Queries, June 12, 2012 • http://www.w3.org/TR/css3-mediaqueries/ • Responsive Web Design, May 25, 2010 • http://alistapart.com/article/responsive-web-design
  85. 85. Windows 8 tablet running an accordion app with a web site in “snap mode” alongside it. Responsive Web Design Primer Presented by Adrian Roselli for the National Association of Government Web Professionals

×