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
October 29, 2012

Hurricane 

Sandy
Blackout
Power 

& Wi-Fi

Scarce resources
In a crisis…

What will they find?
When will this happen?

E v e r y d a y.
Mobile usage: Minnetonka

34%

18.6%
9.7%
3.5%
2010

2011

2012

2013
Mobile Usage: Minnetonka
Tablet

Phone

22.7%

11.9%
7%
2.7%
2011

6.7%
2012

9.4%

2013
Device diversity: Minnetonka

317

131
78
2011

2012

2013
Mobile OS Usage: Minnetonka

14%

8.6%

0.16%

0.23%
Firefox OS

Windows

Android

iPad

0.3%

Blackberry

8.4%

iPhone
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
iOS Browsers: Minnetonka

76.5%

20.9%
In-app browser

Safari
Android Browsers: Minnetonka

70.7%

25%

Chrome

Android Browser
Windows Browsers (52.9%): Minnetonka

57.8%

27%
13.8%
Firefox

Chrome

Internet Explorer
Mac Browsers (14%): Minnetonka

68%

15%

16%

Firefox

Chrome

Safari
Mobile traffic for email newsletters

82.7%
56.5%

57.5%

Monthly

Seniors

63.3%

64.5%

64.7%

Weekly

Farmers' Market

...
Mobile “friendly” sites
Redirect to 

home page
Limited choices
View full site
Device detection
Device diversity: Minnetonka

317

131
78
2011

2012

2013
Let’s 

make 

an app!
Download our app!
What do people want to do?
Business person 

on the run?
On the couch
Everybody gets everything
What makes a design
responsive?
Browser width changes?

Layout flexes
Not just thinner and wider

Column layout changes
Not just layout changes

Images, video, table
Talking responsive
Percentages rather than pixels

Fluid layout
Consistent layout

Fluid grid
Browser width, 

not device width

Viewport
(min-width: 30em)

Media queries
Browser width when your 

design changes

Breakpoints
Avoid device-based breakpoints

Content-based

breakpoints
Font size usually 16 px = 1em…
but not always

Em-based layouts
Fluid grid +

em-based layout +
content-based breakpoints

Flexibility
The tricky parts
To o m a n y c o l u m n s ? S i m p l i f y.

Data tables
Fixed width

Images and video
Only when necessary

PDF documents
No hover on touch devices

Navigation
Make it fast
Does anybody like slow sites?

Speed matters
CSS, Javascript and image files

To o m a n y f i l e s
Google Analytics, jQuery

Load Javascript last
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
Get started now
T h e s o o n e r, t h e b e t t e r

Convert your site
Change columns at breakpoints

Shift your layout
Change your stylesheets

New design, 

existing site content
Layout, site organization, content

Ongoing: simplify
Work with vendors

Not just your site
No matter what device they use

Everybody deserves
access
Books
• “Responsive Design,” Ethan Marcotte
• “Implementing Responsive Design,” Tim Kadlec
• “Responsive Web Design with H...
Websites
• This is responsive


http://bradfrost.github.io/this-is-responsive/
patterns.html

• mediaqueri.es
• responsive...
Tw i t t e r
• @rwd
• @respimg
• @beep
• @grigs
• @wilto
• @brad_frost
NAGW:

National Association of 

Government Web Professionals

• nagw.org
• Webinars, videos from past conferences, listse...
Questions?
• mdrummond@mac.com
• @MarcDrummond
Responsive design for communicators
Upcoming SlideShare
Loading in …5
×

Responsive design for communicators

1,544 views
1,391 views

Published on

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.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,544
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive design for communicators

  1. 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. 2. October 29, 2012 Hurricane 
 Sandy
  3. 3. Blackout
  4. 4. Power 
 & Wi-Fi Scarce resources
  5. 5. In a crisis… What will they find?
  6. 6. When will this happen? E v e r y d a y.
  7. 7. Mobile usage: Minnetonka 34% 18.6% 9.7% 3.5% 2010 2011 2012 2013
  8. 8. Mobile Usage: Minnetonka Tablet Phone 22.7% 11.9% 7% 2.7% 2011 6.7% 2012 9.4% 2013
  9. 9. Device diversity: Minnetonka 317 131 78 2011 2012 2013
  10. 10. Mobile OS Usage: Minnetonka 14% 8.6% 0.16% 0.23% Firefox OS Windows Android iPad 0.3% Blackberry 8.4% iPhone
  11. 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. 12. iOS Browsers: Minnetonka 76.5% 20.9% In-app browser Safari
  13. 13. Android Browsers: Minnetonka 70.7% 25% Chrome Android Browser
  14. 14. Windows Browsers (52.9%): Minnetonka 57.8% 27% 13.8% Firefox Chrome Internet Explorer
  15. 15. Mac Browsers (14%): Minnetonka 68% 15% 16% Firefox Chrome Safari
  16. 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. 17. Mobile “friendly” sites
  18. 18. Redirect to 
 home page
  19. 19. Limited choices
  20. 20. View full site
  21. 21. Device detection
  22. 22. Device diversity: Minnetonka 317 131 78 2011 2012 2013
  23. 23. Let’s 
 make 
 an app!
  24. 24. Download our app!
  25. 25. What do people want to do?
  26. 26. Business person 
 on the run?
  27. 27. On the couch
  28. 28. Everybody gets everything
  29. 29. What makes a design responsive?
  30. 30. Browser width changes? Layout flexes
  31. 31. Not just thinner and wider Column layout changes
  32. 32. Not just layout changes Images, video, table
  33. 33. Talking responsive
  34. 34. Percentages rather than pixels Fluid layout
  35. 35. Consistent layout Fluid grid
  36. 36. Browser width, 
 not device width Viewport
  37. 37. (min-width: 30em) Media queries
  38. 38. Browser width when your 
 design changes Breakpoints
  39. 39. Avoid device-based breakpoints Content-based
 breakpoints
  40. 40. Font size usually 16 px = 1em… but not always Em-based layouts
  41. 41. Fluid grid +
 em-based layout + content-based breakpoints Flexibility
  42. 42. The tricky parts
  43. 43. To o m a n y c o l u m n s ? S i m p l i f y. Data tables
  44. 44. Fixed width Images and video
  45. 45. Only when necessary PDF documents
  46. 46. No hover on touch devices Navigation
  47. 47. Make it fast
  48. 48. Does anybody like slow sites? Speed matters
  49. 49. CSS, Javascript and image files To o m a n y f i l e s
  50. 50. Google Analytics, jQuery Load Javascript last
  51. 51. 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
  52. 52. Get started now
  53. 53. T h e s o o n e r, t h e b e t t e r Convert your site
  54. 54. Change columns at breakpoints Shift your layout
  55. 55. Change your stylesheets New design, 
 existing site content
  56. 56. Layout, site organization, content Ongoing: simplify
  57. 57. Work with vendors Not just your site
  58. 58. No matter what device they use Everybody deserves access
  59. 59. 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
  60. 60. Websites • This is responsive
 http://bradfrost.github.io/this-is-responsive/ patterns.html • mediaqueri.es • responsivepx.com
  61. 61. Tw i t t e r • @rwd • @respimg • @beep • @grigs • @wilto • @brad_frost
  62. 62. 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
  63. 63. Questions? • mdrummond@mac.com • @MarcDrummond

×