DESIGNING FOR THE MOBILE WEB

Dan Seward 2011

1  

90% of everything is crap.

2  

STURGEON’S LAW

TODAY, YOU GET:

Mobile WEB usability:

•  Case for mobile •  Platform selection •  Mobile web mindset •  Design tips

3  

DO I WANT TO GO MOBILE?

•  Probably •  But maybe you don’t…

… but you probably do.

50%+ Aussie smartphone penetration 20

15

477,000,000 new smartphones Asia-Pacific

computerworld.com.au

DESIGN FOR… SOMETHING?

FIRST, RESEARCH

Start here (or get here)

fluff

core value

MOBILE MINDSET

Environments + Burstiness

Bed

Breakfast

Bus

Sidewalk

Park bench

Work desk

Sofa

Laundromat Car (passenger of course)

At the Gabba

…etc

THEN, BUILD

don’t panic.

focused

basic

clean

PRIMARY USE PATH

I just want some pants.

LAYOUT

•  Single column •  Fluid horizontal

PROVIDE CONTACT DETAILS

…hello…?

ACCESS TO THE FULL SITE

and back again.

MEANINGFUL INTERACTION

“Every tap [or click] should have a payoff.”

-Josh Clark (tapworthy)

TARGET SIZE AND PADDING

7mm

LARGE FONTS

Glance test

BUMP THE CONTRAST

If you can’t read it nobody else can either

IMAGES & TEXT CONTENT

is is a picture of a kitten

18  

HTML 5 INPUT TYPES

Use them.

search tel url email datetime date

month week time datetime-local number range

BANANA REPUBLIC

Bo#om  

PROTOTYPING

Punchcut (screen res mockups) http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions

Paper sketches + Peak sketch holder

Smashing Mag wireframing kit roundup http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

See our mobile usability whitepaper at peakusability.com.au

07 3839 9593 information@peakusability.com.au