Download - 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