• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Mistakes aka Tips for designing responsive
 

Responsive Mistakes aka Tips for designing responsive

on

  • 3,294 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

My talk from UX Camp Europe 2012. Slides about our workflow: http://www.slideshare.net/idaiskald/mobile-first-responsive-design-and-the-core-model

Statistics

Views

Total Views
3,294
Views on SlideShare
3,290
Embed Views
4

Actions

Likes
19
Downloads
70
Comments
2

2 Embeds 4

https://twitter.com 3
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Mistakes aka Tips for designing responsive Responsive Mistakes aka Tips for designing responsive Presentation Transcript

    • 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 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.
    • 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.
    • 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. Ethan Marcotte Responsive Web Design, s. 6
    • – [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6
    • • 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• Future-friendly!
    • • Flexible design: % not pxMobile first • Optimalize for some typical widths:responsive - Smart phone (320px) - Tablet (600 or 768px)design! - Netbook (1024px) - Widescreen
    • #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 2 3
    • KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
    • KREFTFORENINGEN KREFTFORENINGEN KREFTFORENINGEN1 2 3
    • 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 Web Media Queries BlogDesign http://mediaqueri.es/Ethan Marcotte (2011)
    • Thank you!Ida Aalenida@netliferesearch.com45 24 24 12@idaAa