Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Mistakes aka Tips for designing responsive

3,863 views

Published on

My talk from UX Camp Europe 2012. Slides about our workflow: http://www.slideshare.net/idaiskald/mobile-first-responsive-design-and-the-core-model

Responsive Mistakes aka Tips for designing responsive

  1. 1. Responsive mistakes Ida Aalen / @idaAa UXCamp Europe 2012
  2. 2. Tips for responsivedesign Ida Aalen / @idaAa UXCamp Europe 2012
  3. 3. Hi!Ida Aalen / @idaAaida@netliferesearch.com
  4. 4. Why do responsivedesign?
  5. 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. 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. 7. Mobile pageviewsare 7 x higher in dec 2011 than jan 2010
  8. 8. Kilde: A-pressen, 2011
  9. 9. Around 20% fNorwegians hasnow got access to a tablet
  10. 10. About 2 of 5visits is from an Android
  11. 11. +
  12. 12. +
  13. 13. + =
  14. 14. + =
  15. 15. http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey
  16. 16. – We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte Responsive Web Design, s. 6
  17. 17. – [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6
  18. 18. • Same content on all platforms
  19. 19. • Same content on all platforms• What we do is make the presentation adapt to the screen sizes and devices
  20. 20. • Same content on all platforms• What we do is make the presentation adapt to the screen sizes and devices• Future-friendly!
  21. 21. • Flexible design: % not pxMobile first • Optimalize for some typical widths:responsive - Smart phone (320px) - Tablet (600 or 768px)design! - Netbook (1024px) - Widescreen
  22. 22. #1Responsivize thetypography
  23. 23. #2Make touch targets bigenough
  24. 24. #3Show the core contentabove the fold
  25. 25. #4Help your usersnavigate long pages onmobile
  26. 26. #5Start with mobile, butthink about the desktopeven when yourdesigning mobile first
  27. 27. Prioritizing on a big screen
  28. 28. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  29. 29. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  30. 30. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
  31. 31. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6
  32. 32. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6
  33. 33. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN4 5 6
  34. 34. KREFTFORENINGEN KREFTFORENINGEN7 8
  35. 35. KREFTFORENINGEN KREFTFORENINGEN7 8
  36. 36. #6Be aware of supersizingthe design on desktop
  37. 37. Big screen
  38. 38. Small screen
  39. 39. Content14 - 20 px65 character lines
  40. 40. #7Don’t remove contentfrom mobile
  41. 41. Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
  42. 42. Mobile on the run?Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
  43. 43. Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
  44. 44. En iPads hverdag Kilde: A-pressen, 2011
  45. 45. En iPhones hverdag Kilde: A-pressen, 2011
  46. 46. – People’ll do anything on mobile if you let them
  47. 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. 48. Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa

×