Web20 designing for_the_small_screen

2,685 views
2,624 views

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,685
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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. www.mozilla.com/mobile/
  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. www.getpersonas.com/
  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 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/
  15. 15. Thank you! • madhava@mozilla.com • @madhava on twitter • http://madhava.com/egotism/mozilla.com/mobile

×