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

1. Designing for the small screen Madhava Enros
Web 2.0, 2011 Designer at Small, Mozilla

2. www.mozilla.com/mobile/

4. Device Characteristics
• Small screens
• Difficult to type
• Direct manipulation - touch-screens
• Many abilities - rich devices
• Constant but interruptible connection

5. Mobile
User
is
Mobile

6. Mobile

7. Distractible

8. Available

9. Sociable

10. Contextual

11. Identifiable

12. 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

18. www.getpersonas.com/

24. 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

25. 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/

26. Thank you!
• madhava@mozilla.com
• @madhava on twitter
• http://madhava.com/egotism/
mozilla.com/mobile