Web20 designing for_the_small_screen

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

www.mozilla.com/mobile/

Device Characteristics• Small screens• Difﬁcult to type• Direct manipulation - touch-screens• Many abilities - rich devices• Constant but interruptible connection

Mobile User isMobile

Mobile

Distractible

Available

Sociable

Contextual

Identiﬁable

Design Goals for a mobile Firefox• Maximize screen space dedicated to content• Minimize typing wherever possible• Give primacy of interaction to a ﬁnger- oriented touchscreen• Support the quick lookup scenario• Connect people to all their web-use

www.getpersonas.com/

Phone Small Tablet Large Tablet Netbook Laptop/Desktop Touch Non-Touch Virtual Keyboard Physical Keyboard On the go In one place index ﬁnger-focus thumb-focus Cursor mobile characteristics desktop characteristics

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/

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

http://www.web2expo.com	163
http://bgrigson.posterous.com	7
http://wincteam.wordpress.com	4
http://websiteproducts.wordpress.com	4
http://paper.li	2

Web20 designing for_the_small_screen

by Madhava Enros

Accessibility

Upload Details

Usage Rights

5 Embeds 180

Statistics