Web20 designing for_the_small_screen

  • 2,305 views
Uploaded 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!).

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,305
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
52
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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