Responsive mistakes            Ida Aalen / @idaAa            UXCamp Europe 2012
Tips for responsivedesign              Ida Aalen / @idaAa              UXCamp Europe 2012
Hi!Ida Aalen / @idaAaida@netliferesearch.com
Why do responsivedesign?
Prosent                                                                                             3430               Uke...
Prosent                                                                                             3430                  ...
Mobile  pageviewsare 7 x higher in dec 2011   than jan     2010
Kilde: A-pressen, 2011
Around 20% fNorwegians hasnow got access  to a tablet
About 2 of 5visits 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.    Et...
–   [...] we’re designing for    more devices, more input    types, more resolutions than    ever before.    Ethan Marcott...
• 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•   F...
• Flexible design: % not pxMobile first   • Optimalize for some                   typical widths:responsive     -   Smart ...
#1Responsivize thetypography
#2Make touch targets bigenough
#3Show the core contentabove the fold
#4Help your usersnavigate long pages onmobile
#5Start with mobile, butthink about the desktopeven when yourdesigning mobile first
Prioritizing on a big screen
KREFTFORENINGEN       KREFTFORENINGEN                                                KREFTFORENINGEN1                     ...
KREFTFORENINGEN       KREFTFORENINGEN                                                KREFTFORENINGEN1                     ...
KREFTFORENINGEN       KREFTFORENINGEN                                                KREFTFORENINGEN1                     ...
KREFTFORENINGEN    KREFTFORENINGEN                             KREFTFORENINGEN4                     5                     6
KREFTFORENINGEN    KREFTFORENINGEN                             KREFTFORENINGEN4                     5                     6
KREFTFORENINGEN    KREFTFORENINGEN                             KREFTFORENINGEN4                     5                     6
KREFTFORENINGEN    KREFTFORENINGEN7                     8
KREFTFORENINGEN    KREFTFORENINGEN7                     8
#6Be aware of supersizingthe design on desktop
Big screen
Small screen
Content14 - 20 px65 character lines
#7Don’t remove contentfrom mobile
Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
Mobile on the                    run?Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
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 First             Clour Four BlogLuke Wroblewski (2011)   http://cloudfour.com/blog/Responsive ...
Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Responsive Mistakes aka Tips for designing responsive
Upcoming SlideShare
Loading in...5
×

Responsive Mistakes aka Tips for designing responsive

3,235

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,235
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
79
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×