An overview for a mixed audience from the University at Buffalo CIT professional development series.

1. Responsive Web Design Primer
Presented by Adrian Roselli for University at Buffalo CIT Professional Development

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.

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.

4. What We’ll Cover
• Background
• Techniques
• Measuring
• Future
• Questions (ongoing!)

5. Background

6. College Search Process
• 78% have regular access to a mobile device.
• 43% use mobile device for all web browsing.
• 68% have viewed college web sites on mobile.
• 73% expressed interest in downloading
campus-specific applications for schools.
• Expect this mobile-centric trend to continue
once enrolled.
http://www.noellevitz.com/papers-research-higher-education/2013/ug/2013-e-expectations-report
http://campustechnology.com/Articles/2013/09/12/Without-Mobile-First-Strategy-Kiss-Students-Goodbye.aspx

7. 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.
http://www.lukew.com/ff/entry.asp?1263

8. Options

9. Do Nothing
• Mobile browsers can already handle sites.
• User can zoom as appropriate.
• Better than a half-hearted approach.

10. Make an m-dot Site
• Something like m.domain.tld.
• It’s not responsive.
• Relies on UA sniffing.
• Can split SEO efforts.
• Maintaining two sites.

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

12. What RWD Isn’t
• It does not excel at, or is incapable of,
telling us:
• User bandwidth,
• Input device,
• Viewing context,
• Browser features.

13. “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/

14. Techniques

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

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

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

18. 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…

19. http://opensignal.com/reports/fragmentation.php

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

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

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

23. http://nunstakingpicswithhellokittyipad.tumblr.com/

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

26. Planning
• Plan to show same/all content to all users.
• Prioritize content for linearized pages.
• Provide clear site structure.
• Account for multi-use multi-input.

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

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

29. Example Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
http://www.lukew.com/ff/entry.asp?1569
Layout Shifter
Off Canvas
Tiny Tweaks

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

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

32. Google: Common Mistakes
• Unplayable videos.
• Faulty redirects.
• Smartphone-only 404s.
• App download interstitials.
• Irrelevant cross-linking.
• Page speed.
https://developers.google.com/webmasters/smartphone-sites/common-mistakes

33. Other Gotchas
• Scrolling (example…).
• Don’t forget the printed page (example…).
• Page weight.
• Device pixels vs. CSS pixels.
• Account for giant screens.
• Remember televisions.
• Don’t build accessibility barriers.
• Don’t disable “pinch to zoom.”

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

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

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

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

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

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

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

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

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

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

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

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

46. Photo of printed page from
http://elliotjaystocks.com/blog/has-
adaptive-design-failed-of-course-it-
bloody-hasnt/

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

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

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

50. Test !!
• Seriously, test.
• Watch users.
• Have your family and friends try it.
• Get every phone, phablet, tablet, laptop,
television, printer, etc. that you can.
• Test some more.
• Screen shots are your friend.
• Emulators (or window resizing) don’t suffice.

51. Measuring

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

53. Check the Data

54. Future

55. Here or on Its Way
• Responsive image techniques (@srcset,
<picture>).
• Additional media query support (bandwidth,
accessibility device, etc.).
• Everybody gets touch!
• Alternate devices (the dreaded smart fridge).

56. Questions

57. Resources
• eduStyle Awards 2012, 2013:
• http://www.edustyle.net/awards/2013/winners.php#39
• http://www.edustyle.net/awards/2012/winners.php#46
• MediaQueri.es
• http://mediaqueri.es/
• http://www.printshame.com/
• BBC Mobile Accessibility Guidelines v0.8
• 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

58. Responsive Web Design Primer
Presented by Adrian Roselli for University at Buffalo CIT Professional Development