Responsive Mistakes aka Tips for designing responsive
•
20 likes•2,039 views
My talk from UX Camp Europe 2012. Slides about our workflow: http://www.slideshare.net/idaiskald/mobile-first-responsive-design-and-the-core-model
Recommended
Recommended
More Related Content
Similar to Responsive Mistakes aka Tips for designing responsive
Similar to Responsive Mistakes aka Tips for designing responsive (20)
More from Ida Aalen
More from Ida Aalen (20)
Recently uploaded
Recently uploaded (20)
Responsive Mistakes aka Tips for designing responsive
- 1. Responsive mistakes Ida Aalen / @idaAa UXCamp Europe 2012
- 2. Tips for responsive design Ida Aalen / @idaAa UXCamp Europe 2012
- 3. Hi! Ida Aalen / @idaAa ida@netliferesearch.com
- 5. Prosent 34 30 Ukentlig dekning 27 Daglig dekning 24 20 17 15 11 11 10 11 10 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 34 30 27% of the population uses 27 Ukentlig dekning mobile content Daglig dekning 24 every day 20 17 15 11 11 10 11 10 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.
- 8. Mobile pageviews are 7 x higher in dec 2011 than jan 2010
- 13. Around 20% f Norwegians has now got access to a tablet
- 15. About 2 of 5 visits is from an Android
- 17. +
- 18. +
- 19. + =
- 20. + =
- 23. – We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte Responsive Web Design, s. 6
- 24. – [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6
- 26. • Same content on all platforms
- 27. • Same content on all platforms • What we do is make the presentation adapt to the screen sizes and devices
- 28. • Same content on all platforms • What we do is make the presentation adapt to the screen sizes and devices • Future-friendly!
- 29. • Flexible design: % not px Mobile first • Optimalize for some typical widths: responsive - Smart phone (320px) - Tablet (600 or 768px) design! - Netbook (1024px) - Widescreen
- 33. #2 Make touch targets big enough
- 41. #3 Show the core content above the fold
- 45. #4 Help your users navigate long pages on mobile
- 50. #5 Start with mobile, but think about the desktop even when your designing mobile first
- 54. Prioritizing on a big screen
- 55. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 1 2 3
- 56. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 1 2 3
- 57. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 1 2 3
- 58. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 4 5 6
- 59. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 4 5 6
- 60. KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN 4 5 6
- 61. KREFTFORENINGEN KREFTFORENINGEN 7 8
- 62. KREFTFORENINGEN KREFTFORENINGEN 7 8
- 63. #6 Be aware of supersizing the design on desktop
- 64. Big screen
- 65. Small screen
- 67. Content 14 - 20 px 65 character lines
- 76. #7 Don’t remove content from mobile
- 80. Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
- 81. Mobile on the run? Foto: Flickr-bruker mrjorgen CC-BY-NC-ND
- 83. Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
- 84. En iPads hverdag Kilde: A-pressen, 2011
- 85. En iPhones hverdag Kilde: A-pressen, 2011
- 87. – People’ll do anything on mobile if you let them
- 90. Reading materials... Mobile First Clour Four Blog Luke Wroblewski (2011) http://cloudfour.com/blog/ Responsive Web Media Queries Blog Design http://mediaqueri.es/ Ethan Marcotte (2011)
- 91. Thank you! Ida Aalen ida@netliferesearch.com 45 24 24 12 @idaAa