MOBILE-FIRST DESIGN AND

DEVELOPMENT

JAMES BANKS

JAMES@ WEB3.COM.AU

@_JAMESBANKS

PLANNING DESIGN DEVELOPMENT

WHAT THE HELL IS

MOBILE FIRST?

WHY MOBILE FIRST?

0  

50  

100  

150  

200  

250  

2009   2010   2011   2012  

Millions  of  u

nits  so

ld  

Smartphone  vs.  tablet  vs.  desktop  sales  

Smartphones  

All  Tablets  

Windows  +  Mac  Desktops  

Interna'onal  Data  Corpora'on  (IDC)  Sta's'cs    

10 BILLION MOBILE WEB

DEVICES BY 2016

EXCEEDS GLOBAL

POPULATION OF 7.3 BILLION

THAT’S 1.4 MOBILE WEB DEVICES PER

PERSON!!!

1 IN 2 AUSTRALIANS

OWN A SMARTPHONE

ONLY 25% OF AUSTRALIAN

WEBSITES ARE OPTIMISED FOR

MOBILE WEB

60% EXPECT MOBILE WEBSITE

TO EQUAL DESKTOP

40% WILL GO TO A COMPETITOR IF MOBILE WEBSITE

IS POOR

57% WILL NOT RECOMMEND A POOR MOBILE

WEBSITE

1. GATHER REQUIREMENTS

PLANNING FOR MOBILE-FIRST

2. DESCRIBE THE WEBSITE

3. IDENTIFY THE MAIN OBJECTIVES

TIPS ON MOBILE DESIGN

CONTENT BEFORE

NAVIGATION

EASILY ACCESSIBLE

SEARCH

ALLOW USERS TO ACCESS CONTENT

IMMEDIATELY

SPACE TAPPABLE

ELEMENTS OUT

44X44PX MINIMUM FOR

TAPPABLE ELEMENTS

AVOID LOW CONTRAST

DESIGN

KEEP DESIGN CONSISTENT ACROSS ALL

DEVICES

MAKE USE OF TOUCH

ENABLED ELEMENTS

GIVE YOUR USERS

FEEDBACK TO THEIR ACTIONS

TIPS ON MOBILE

DEVELOPMENT

REDUCE HTTP REQUESTS

PLACE MOBILE MEDIA QUERIES AT TOP OF CSS

BUILD FOR

SPEED

USE CSS3 WHEREVER POSSIBLE

COMPRESS IMAGES

PROPERLY

OPTIMISE ALL

MEDIA

KEEP IT SIMPLE!

KEY TAKEAWAYS

MOBILE FIRST PLANNING MOBILE DESIGN MOBILE DEVELOPMENT

- CLEARLY DEFINE REQUIREMENTS

- PLAN FOR WHAT ONLY IS REQUIRED

- AVOID BLOAT AND IRRELEVANCIES

- HAVE A CLEAR GOAL IN MIND

- CHOOSE THE RIGHT FOUNDATION

- CONTENT AVAILABLE IMMEDIATELY

- HAVE CONTENT BEFORE NAV

- MAKE IT EASY TO SEARCH

- AVOID LOW CONTRAST DESIGN

- MAKE TAPPABLE ELEMENTS BIG

- BUILD WEBSITE FOR SPEED

- MEDIA QUERIES AT TOP OF CSS

- KEEP HTTP REQUESTS TO MINIMUM

- OPTIMISE MEDIA & USE CSS3

- AND REMEMBER, KEEP IT SIMPLE!

JAMES BANKS

JAMES@ WEB3.COM.AU

@_JAMESBANKS

APPLE’S IOS HUMAN

INTERFACE GUIDELINES

GOOGLE’S THE MOBILE

PLAYBOOK

LUKE WROBLEWSKI’S MOBILE FIRST