Your SlideShare is downloading. ×
0
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Mistakes aka Tips for designing responsive

3,185

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

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
20 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,185
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
79
Comments
2
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×