Presentation on responsive web design at an event focused on crisis communications for government communicators. General non-technical overview of why responsive design matters in the growing mobile landscape.

1. Responsive Design
Marc Drummond
W e b Te c h n o l o g i e s C o o r d i n a t o r
City of Minnetonka, MN

2. October 29, 2012
Hurricane
Sandy

3. Blackout

4. Power
& Wi-Fi
Scarce resources

5. In a crisis…
What will they find?

6. When will this happen?
E v e r y d a y.

7. Mobile usage: Minnetonka
34%
18.6%
9.7%
3.5%
2010
2011
2012
2013

8. Mobile Usage: Minnetonka
Tablet
Phone
22.7%
11.9%
7%
2.7%
2011
6.7%
2012
9.4%
2013

9. Device diversity: Minnetonka
317
131
78
2011
2012
2013

10. Mobile OS Usage: Minnetonka
14%
8.6%
0.16%
0.23%
Firefox OS
Windows
Android
iPad
0.3%
Blackberry
8.4%
iPhone

11. Ta b l e t O S U s a g e : M i n n e t o n k a
86%
14%
Everything else
iPad

12. iOS Browsers: Minnetonka
76.5%
20.9%
In-app browser
Safari

13. Android Browsers: Minnetonka
70.7%
25%
Chrome
Android Browser

14. Windows Browsers (52.9%): Minnetonka
57.8%
27%
13.8%
Firefox
Chrome
Internet Explorer

15. Mac Browsers (14%): Minnetonka
68%
15%
16%
Firefox
Chrome
Safari

16. Mobile traffic for email newsletters
82.7%
56.5%
57.5%
Monthly
Seniors
63.3%
64.5%
64.7%
Weekly
Farmers' Market
Road
Recreation

17. Mobile “friendly” sites

18. Redirect to
home page

19. Limited choices

20. View full site

21. Device detection

22. Device diversity: Minnetonka
317
131
78
2011
2012
2013

23. Let’s
make
an app!

24. Download our app!

25. What do people want to do?

26. Business person
on the run?

27. On the couch

29. Everybody gets everything

30. What makes a design
responsive?

31. Browser width changes?
Layout flexes

32. Not just thinner and wider
Column layout changes

33. Not just layout changes
Images, video, table

34. Talking responsive

35. Percentages rather than pixels
Fluid layout

36. Consistent layout
Fluid grid

37. Browser width,
not device width
Viewport

38. (min-width: 30em)
Media queries

39. Browser width when your
design changes
Breakpoints

40. Avoid device-based breakpoints
Content-based
breakpoints

41. Font size usually 16 px = 1em…
but not always
Em-based layouts

42. Fluid grid +
em-based layout +
content-based breakpoints
Flexibility

43. The tricky parts

44. To o m a n y c o l u m n s ? S i m p l i f y.
Data tables

45. Fixed width
Images and video

46. Only when necessary
PDF documents

47. No hover on touch devices
Navigation

48. Make it fast

49. Does anybody like slow sites?
Speed matters

50. CSS, Javascript and image files
To o m a n y f i l e s

51. Google Analytics, jQuery
Load Javascript last

52. M a k e i t f a s t e r, m a k e i t b e t t e r
Performance matters

53. Get started now

54. T h e s o o n e r, t h e b e t t e r
Convert your site

55. Change columns at breakpoints
Shift your layout

56. Change your stylesheets
New design,
existing site content

57. Layout, site organization, content
Ongoing: simplify

58. Work with vendors
Not just your site

59. No matter what device they use
Everybody deserves
access

60. Books
• “Responsive Design,” Ethan Marcotte
• “Implementing Responsive Design,” Tim Kadlec
• “Responsive Web Design with HTML5 & CSS3”,
Ben Frain
• “HTML5 & CSS3 Responsive Web Design Cookbook,”
Benjamin LaGrone
• “Responsive Web Design by Example,” Thoriq Firdaus

61. Websites
• This is responsive
http://bradfrost.github.io/this-is-responsive/
patterns.html
• mediaqueri.es
• responsivepx.com

62. Tw i t t e r
• @rwd
• @respimg
• @beep
• @grigs
• @wilto
• @brad_frost

63. NAGW:
National Association of
Government Web Professionals
• nagw.org
• Webinars, videos from past conferences, listserv
• Annual conference: here in St Paul next year!
• September 9-12, 2014
• Friday: Full day on content strategy
• Keynote: Kristina Halvorson

64. Questions?
• mdrummond@mac.com
• @MarcDrummond