responsive design for communicators

R e s p o n s i v e D e s i g nM a r c D r u m m o n d 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 C i t y o f M i n n e t o n k a , M N

Hurricane Sandy

O c t o b e r 2 9 , 2 0 1 2

Blackout

Power & Wi-FiS c a r c e r e s o u r c e s

What will they find?I n a c r i s i s …

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

M o b i l e u s a g e : M i n n e t o n k a

2010 2011 2012 20133.5%

9.7%

18.6%

34%

M o b i l e U s a g e : M i n n e t o n k a

2011 2012 2013

22.7%

11.9%

7%9.4%

6.7%2.7%

Tablet Phone

D e v i c e d i v e r s i t y : M i n n e t o n k a

2011 2012 2013

78

131

317

M o b i l e O S U s a g e : M i n n e t o n k a

Blackberry Firefox OS Windows Android iPad iPhone

14%

8.4%8.6%

0.3%0.23%0.16%

Ta b l e t O S U s a g e : M i n n e t o n k a

Everything else iPad

86%

14%

i O S B r o w s e r s : M i n n e t o n k a

In-app browser Safari

76.5%

20.9%

A n d r o i d B r o w s e r s : M i n n e t o n k a

Chrome Android Browser

70.7%

25%

W i n d o w s B r o w s e r s ( 5 2 . 9 % ) : M i n n e t o n k a

Firefox Chrome Internet Explorer

57.8%

27%

13.8%

M a c B r o w s e r s ( 1 4 % ) : M i n n e t o n k a

Firefox Chrome Safari

68%

16%15%

M o b i l e t r a f f i c f o r e m a i l n e w s l e t t e r s

Monthly Seniors Weekly Farmers' Market Road Recreation

82.7%

64.7%64.5%63.3%57.5%56.5%

Mobile “friendly” sites

Redirect to home page

Limited choices

View full site

Device detection

D e v i c e d i v e r s i t y : M i n n e t o n k a

2011 2012 2013

78

131

317

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?

L a y o u t f l e x e sB r o w s e r w i d t h c h a n g e s ?

C o l u m n l a y o u t c h a n g e sN o t j u s t t h i n n e r a n d w i d e r

I m a g e s , v i d e o , t a b l eN o t j u s t l a y o u t c h a n g e s

Talking responsive

F l u i d l a y o u tP e r c e n t a g e s r a t h e r t h a n p i x e l s

F l u i d g r i dC o n s i s t e n t l a y o u t

V i e w p o r t

B r o w s e r w i d t h , n o t d e v i c e w i d t h

M e d i a q u e r i e s( m i n - w i d t h : 3 0 e m )

B r e a k p o i n t s

B r o w s e r w i d t h w h e n y o u r d e s i g n c h a n g e s

C o n t e n t - b a s e d b r e a k p o i n t s

A v o i d d e v i c e - b a s e d b r e a k p o i n t s

E m - b a s e d l a y o u t s

F o n t s i z e u s u a l l y 1 6 p x = 1 e m … b u t n o t a l w a y s

F l e x i b i l i t y

F l u i d g r i d + e m - b a s e d l a y o u t + c o n t e n t - b a s e d b r e a k p o i n t s

The tricky parts

D a t a t a b l e sTo o m a n y c o l u m n s ? S i m p l i f y.

I m a g e s a n d v i d e oF i x e d w i d t h

P D F d o c u m e n t sO n l y w h e n n e c e s s a r y

N a v i g a t i o nN o h o v e r o n t o u c h d e v i c e s

Make it fast

S p e e d m a t t e r sD o e s a n y b o d y l i k e s l o w s i t e s ?

To o m a n y f i l e sC S S , J a v a s c r i p t a n d i m a g e f i l e s

L o a d J a v a s c r i p t l a s tG o o g l e A n a l y t i c s , j Q u e r y

P e r f o r m a n c e m a t t e r sM a k e i t f a s t e r, m a k e i t b e t t e r

Get started now

C o n v e r t y o u r s i t eT h e s o o n e r, t h e b e t t e r

S h i f t y o u r l a y o u tC h a n g e c o l u m n s a t b r e a k p o i n t s

N e w d e s i g n , e x i s t i n g s i t e c o n t e n t

C h a n g e y o u r s t y l e s h e e t s

O n g o i n g : s i m p l i f yL a y o u t , s i t e o r g a n i z a t i o n , c o n t e n t

N o t j u s t y o u r s i t eW o r k w i t h v e n d o r s

E v e r y b o d y d e s e r v e s a c c e s s

N o m a t t e r w h a t d e v i c e t h e y u s e

B o o k s

• “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

W e b s i t e s

• This is responsivehttp://bradfrost.github.io/this-is-responsive/patterns.html

• mediaqueri.es

• responsivepx.com

Tw i t t e r

• @rwd

• @respimg

• @beep

• @grigs

• @wilto

• @brad_frost

N A G W : N a t i o n a l A s s o c i a t i o n o f G o v e r n m e n t W e b P r o f e s s i o n a l s • 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

Q u e s t i o n s ?

• mdrummond@mac.com

• @MarcDrummond