Responsive Mistakes aka Tips for designing responsive

3,477 views
3,413 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

2 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total views
3,477
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
80
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

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

×