Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web20 designing for_the_small_screen


Published on

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!).

  • Be the first to comment

Web20 designing for_the_small_screen

  1. 1. Designing for the small screen Madhava Enros Web 2.0, 2011 Designer at Small, Mozilla
  2. 2.
  3. 3. Device Characteristics• Small screens• Difficult to type• Direct manipulation - touch-screens• Many abilities - rich devices• Constant but interruptible connection
  4. 4. Mobile User isMobile
  5. 5. Mobile
  6. 6. Distractible
  7. 7. Available
  8. 8. Sociable
  9. 9. Contextual
  10. 10. Identifiable
  11. 11. 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
  12. 12.
  13. 13. 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
  14. 14. Photo Credits
  15. 15. Thank you! • • @madhava on twitter •