Web20 designing for_the_small_screen
Upcoming SlideShare
Loading in...5
×
 

Web20 designing for_the_small_screen

on

  • 2,530 views

20 minutes about designing for mobile, and how we applied it to Firefox. Credit to Barbara Ballard for the sweet mobile-user-characteristics taxonomy (she has a book!).

20 minutes about designing for mobile, and how we applied it to Firefox. Credit to Barbara Ballard for the sweet mobile-user-characteristics taxonomy (she has a book!).

Statistics

Views

Total Views
2,530
Views on SlideShare
2,349
Embed Views
181

Actions

Likes
3
Downloads
52
Comments
0

5 Embeds 181

http://www.web2expo.com 164
http://bgrigson.posterous.com 7
http://wincteam.wordpress.com 4
http://websiteproducts.wordpress.com 4
http://paper.li 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Web20 designing for_the_small_screen Web20 designing for_the_small_screen Presentation Transcript

  • Designing for the small screen Madhava Enros Web 2.0, 2011 Designer at Small, Mozilla
  • www.mozilla.com/mobile/
  • Device Characteristics• Small screens• Difficult to type• Direct manipulation - touch-screens• Many abilities - rich devices• Constant but interruptible connection
  • Mobile User isMobile
  • Mobile
  • Distractible
  • Available
  • Sociable
  • Contextual
  • Identifiable
  • Design Goals for a mobile Firefox• Maximize screen space dedicated to content• Minimize typing wherever possible• Give primacy of interaction to a finger- oriented touchscreen• Support the quick lookup scenario• Connect people to all their web-use
  • www.getpersonas.com/
  • Phone Small Tablet Large Tablet Netbook Laptop/Desktop Touch Non-Touch Virtual Keyboard Physical Keyboard On the go In one place index finger-focus thumb-focus Cursor mobile characteristics desktop characteristics
  • Photo Credits http://flickr.com/photos/pixel_addict/465394708/ http://flickr.com/photos/darwin70/577151777/ http://flickr.com/photos/spidey-man/379064077/ http://flickr.com/photos/zwc/2332022534/ http://flickr.com/photos/40668062@N00/303473576/ http://flickr.com/photos/sharman/13121287/ http://flickr.com/photos/seandreilinger/2147807724/ http://flickr.com/photos/mimk/365755280/ http://flickr.com/photos/skampy/2329307921/
  • Thank you! • madhava@mozilla.com • @madhava on twitter • http://madhava.com/egotism/mozilla.com/mobile