1.
Responsive mistakes Ida Aalen / @idaAa UXCamp Europe 2012

2.
Tips for responsivedesign Ida Aalen / @idaAa UXCamp Europe 2012

3.
Hi!Ida Aalen / @idaAaida@netliferesearch.com

4.
Why do responsivedesign?

5.
Prosent 3430 Ukentlig dekning 27 Daglig dekning 2420 17 15 11 11 10 1110 9 9 5 4 4 4 4 0 Uke 6-26 4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011 2005 Kilde: Forbruker & Media.

6.
Prosent 3430 27% of the population uses 27 Ukentlig dekning mobile content Daglig dekning 24 every day20 17 15 11 11 10 1110 9 9 5 4 4 4 4 0 Uke 6-26 4Q 2005 4Q 2006 4Q 2007 4Q 2008 4Q 2009 4Q 2010 4Q 2011 2005 Kilde: Forbruker & Media.

7.
Mobile pageviewsare 7 x higher in dec 2011 than jan 2010

8.
Kilde: A-pressen, 2011

9.
Around 20% fNorwegians hasnow got access to a tablet

10.
About 2 of 5visits is from an Android

11.
+

12.
+

13.
+ =

14.
+ =

15.
http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey

16.
– We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte Responsive Web Design, s. 6

17.
– [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6

18.
• Same content on all platforms

19.
• Same content on all platforms• What we do is make the presentation adapt to the screen sizes and devices

20.
• Same content on all platforms• What we do is make the presentation adapt to the screen sizes and devices• Future-friendly!

21.
• Flexible design: % not pxMobile first • Optimalize for some typical widths:responsive - Smart phone (320px) - Tablet (600 or 768px)design! - Netbook (1024px) - Widescreen

22.
#1Responsivize thetypography

23.
#2Make touch targets bigenough

24.
#3Show the core contentabove the fold

25.
#4Help your usersnavigate long pages onmobile

26.
#5Start with mobile, butthink about the desktopeven when yourdesigning mobile first

27.
Prioritizing on a big screen

28.
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3

29.
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3

30.
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3

31.
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6

32.
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6

33.
KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6

34.
KREFTFORENINGEN KREFTFORENINGEN7 8

35.
KREFTFORENINGEN KREFTFORENINGEN7 8

36.
#6Be aware of supersizingthe design on desktop

37.
Big screen

38.
Small screen

39.
Content14 - 20 px65 character lines

40.
#7Don’t remove contentfrom mobile

41.
Foto: Flickr-bruker mrjorgen CC-BY-NC-ND

42.
Mobile on the run?Foto: Flickr-bruker mrjorgen CC-BY-NC-ND

43.
Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.

44.
En iPads hverdag Kilde: A-pressen, 2011

45.
En iPhones hverdag Kilde: A-pressen, 2011

46.
– People’ll do anything on mobile if you let them

47.
Reading materials...Mobile First Clour Four BlogLuke Wroblewski (2011) http://cloudfour.com/blog/Responsive Web Media Queries BlogDesign http://mediaqueri.es/Ethan Marcotte (2011)

48.
Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa