Responsive Mistakes aka Tips for designing responsive
•
20 j'aime•2,039 vues
My talk from UX Camp Europe 2012. Slides about our workflow: http://www.slideshare.net/idaiskald/mobile-first-responsive-design-and-the-core-model
Recommandé
Recommandé
Contenu connexe
Similaire à Responsive Mistakes aka Tips for designing responsive
Similaire à Responsive Mistakes aka Tips for designing responsive (20)
Plus de Ida Aalen
Plus de Ida Aalen (20)
Dernier
Dernier (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