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.

1. Responsive Web Design Primer
Presented by Adrian Roselli for the National Association of Government Web Professionals

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. 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. What We’ll Cover
• Background
• Techniques
• Measuring
• Code Examples
• Future
• Questions (ongoing!)

5. Background

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. 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. 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. 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. 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. 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. 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. Options

14. Options
• Do nothing.
• Make an m-dot site.
• Go responsive.

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. 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. Option: Go Responsive
• Responsive Web Design (RWD).
• Also known as Adaptive Web Design.
• Often misunderstood, mis-described.
• This is why you’re here.

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. What RWD Isn’t
• It does not excel at, or is incapable of,
telling us:
• User bandwidth,
• Input device,
• Viewing context,
• Browser features.

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. Techniques

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. Strategies
• Mobile First.
• Responsive Retrofit.
• Responsive M-dot.
• Piecemeal.
http://bradfrostweb.com/blog/post/responsive-strategy/

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. 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. 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. 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. Components
• Media Queries.
• Breakpoints.

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. 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. Android screen sizes, though a bit old now: http://opensignal.com/reports/fragmentation.php

32. Jason Grigsby on Twitter: https://twitter.com/grigs/status/511769628679614464

33. http://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422 Brad Frost

34. Smartphone
Ownership 2013,
Pew Research,
June 2013

35. Me on Twitter: https://twitter.com/aardrian/status/509706419143458816

36. User Context
• One-handed? Two-handed?
• Standing? Sitting?
• With another device?
• Mouse? Touch? Stylus? Keyboard?

37. User Context
http://blog.adrianroselli.com/2013/03/observing-users-with-mobile-devices.html

38. http://nunstakingpicswithhellokittyipad.tumblr.com/

40. 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

41. Stephanie Rieger
@stephanierieger
“Classic multi device,
stationary but
mobile, bandwidth
constrained, best
device is the
connected one
scenario!
pic.twitter.com/i3lVX
n2k07”

42. 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.

43. 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

44. Example Layout Patterns
Mostly Fluid Column Drop
http://www.lukew.com/ff/entry.asp?1514
http://www.lukew.com/ff/entry.asp?1569

45. 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

46. 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/

47. Ben Norris
http://pic.twitter.com/3Ri0uI8gSb
http://pic.twitter.com/oaJI456xLF

48. 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

49. 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.”

50. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

51. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

52. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

53. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

54. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

55. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

56. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

57. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

58. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

59. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

60. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

61. http://bradfrostweb.com
/blog/post/page-height-scrolling-
and-responsive-web-
design/

62. 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

63. http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/website-abandonment-
happens-after-3-seconds/

64. Pages Are Getting Fatter
Why does a typical ecommerce page take 6.5 seconds to load primary content?

65. “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

66. https://twitter.com/wilto/status/63284673723375616

67. Edge Case
• Let a user “opt out” of a responsive layout.
http://blog.adrianroselli.com/2013/01/letting-mobile-users-see-desktop-view.html

68. 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.

69. Code Examples

70. 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">

71. 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; }
}

72. 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;
}

73. Mobile First Example
p { color: #fff; }
@media all and (min-width: 600px) {
p { color: #f00; }
}
@media print {
p { color: #000; }
}

74. 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.

75. Measuring

76. Google Analytics
• Look at mobile users, devices before updates.

77. Google Analytics
• Look at mobile users, devices before updates.
• Compare with users/devices after updates.

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.

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.

80. 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.

81. Check the Data

82. Future

83. 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).

84. Questions

85. 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

86. 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