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 device...
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 pr...
www.getpersonas.com/
Phone      Small Tablet          Large Tablet   Netbook                      Laptop/Desktop                  Touch        ...
Photo Credits                http://flickr.com/photos/pixel_addict/465394708/                http://flickr.com/photos/darwin...
Thank you!      • madhava@mozilla.com      • @madhava on twitter      • http://madhava.com/egotism/mozilla.com/mobile
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Web20 designing for_the_small_screen
Upcoming SlideShare
Loading in...5
×

Web20 designing for_the_small_screen

2,457

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,457
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×