Embed Size (px)
DESCRIPTION
My talk from UX Camp Europe 2012. Slides about our workflow: http://www.slideshare.net/idaiskald/mobile-first-responsive-design-and-the-core-model
Citation preview
Responsive mistakes
Ida Aalen / @idaAaUXCamp Europe 2012
Tips for responsive design
Ida Aalen / @idaAaUXCamp Europe 2012
Why do responsive design?
13
11 119 10 11
15
24
34
4 4 4 4 5
9
17
27
0
10
20
30
Uke 6-262005
4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011
Ukentlig dekningDaglig dekning
Mobilt innhold mot nye høyder
Kilde: Forbruker & Media.
Prosent
13
11 119 10 11
15
24
34
4 4 4 4 5
9
17
27
0
10
20
30
Uke 6-262005
4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011
Ukentlig dekningDaglig dekning
Mobilt innhold mot nye høyder
Kilde: Forbruker & Media.
Prosent
27% of the population uses mobile content
every day
Mobile pageviews
are 7 x higher in dec 2011
than jan 2010
Kilde: A-pressen, 2011
Around 20% f Norwegians has now got access
to a tablet
About 2 of 5 visits is from an
Android
+
+
+ =
+ =
http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey
– We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte
Responsive Web Design, s. 6
– [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte
Responsive Web Design, s. 6
• Same content on all platforms
• Same content on all platforms
• What we do is make the presentation adapt to the screen sizes and devices
• Same content on all platforms
• What we do is make the presentation adapt to the screen sizes and devices
• Future-friendly!
Mobile first responsive design!
• Flexible design: % not px• Optimalize for some
typical widths:- Smart phone (320px)- Tablet (600 or 768px)- Netbook (1024px)- Widescreen
#1Responsivize the typography
#2Make touch targets big enough
#3Show the core content above the fold
#4Help your users navigate long pages on mobile
#5Start with mobile, but think about the desktop even when your designing mobile first
Prioritizing on a big screen
KREFTFORENINGEN
1 2 3
KREFTFORENINGENKREFTFORENINGEN
KREFTFORENINGEN
1 2 3
KREFTFORENINGENKREFTFORENINGEN
KREFTFORENINGEN
1 2 3
KREFTFORENINGENKREFTFORENINGEN
4 5 6
KREFTFORENINGEN
KREFTFORENINGEN
KREFTFORENINGEN
4 5 6
KREFTFORENINGEN
KREFTFORENINGEN
KREFTFORENINGEN
4 5 6
KREFTFORENINGEN
KREFTFORENINGEN
KREFTFORENINGEN
7 8
KREFTFORENINGEN
KREFTFORENINGEN
7 8
KREFTFORENINGEN
KREFTFORENINGEN
#6Be aware of supersizing the design on desktop
Big screen
Small screen
Content14 - 20 px65 character lines
#7Don’t remove content from mobile
Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
Mobile on the run?
Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
En iPads hverdag
Kilde: A-pressen, 2011
En iPhones hverdag
Kilde: A-pressen, 2011
– People’ll do anything on mobile if you let them
Reading materials...
Mobile FirstLuke Wroblewski (2011)
Responsive Web DesignEthan Marcotte (2011)
Clour Four Bloghttp://cloudfour.com/blog/
Media Queries Bloghttp://mediaqueri.es/
