Slide 1
Slide 1 text
MOBILE-FIRST
DESIGN AND
DEVELOPMENT
Slide 2
Slide 2 text
JAMES
BANKS
JAMES@
WEB3.COM.AU
@_JAMESBANKS
Slide 3
Slide 3 text
PLANNING DESIGN DEVELOPMENT
WHAT THE
HELL IS
MOBILE FIRST?
Slide 4
Slide 4 text
WHY
MOBILE
FIRST?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
0
50
100
150
200
250
2009
2010
2011
2012
Millions
of
units
sold
Smartphone
vs.
tablet
vs.
desktop
sales
Smartphones
All
Tablets
Windows
+
Mac
Desktops
Interna'onal
Data
Corpora'on
(IDC)
Sta's'cs
Slide 7
Slide 7 text
10 BILLION
MOBILE WEB
DEVICES
BY 2016
EXCEEDS
GLOBAL
POPULATION
OF 7.3 BILLION
THAT’S 1.4
MOBILE WEB
DEVICES PER
PERSON!!!
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
1. GATHER
REQUIREMENTS
PLANNING FOR
MOBILE-FIRST
2. DESCRIBE
THE WEBSITE
3. IDENTIFY THE
MAIN OBJECTIVES
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
TIPS ON
MOBILE
DESIGN
Slide 12
Slide 12 text
CONTENT
BEFORE
NAVIGATION
EASILY
ACCESSIBLE
SEARCH
ALLOW USERS
TO ACCESS
CONTENT
IMMEDIATELY
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
SPACE
TAPPABLE
ELEMENTS OUT
44X44PX
MINIMUM FOR
TAPPABLE
ELEMENTS
AVOID
LOW CONTRAST
DESIGN
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
TIPS ON
MOBILE
DEVELOPMENT
Slide 20
Slide 20 text
REDUCE HTTP
REQUESTS
PLACE MOBILE
MEDIA QUERIES
AT TOP OF CSS
BUILD
FOR
SPEED
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
USE CSS3
WHEREVER
POSSIBLE
COMPRESS
IMAGES
PROPERLY
OPTIMISE
ALL
MEDIA
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
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!
Slide 26
Slide 26 text
JAMES
BANKS
JAMES@
WEB3.COM.AU
@_JAMESBANKS
APPLE’S IOS
HUMAN
INTERFACE
GUIDELINES
GOOGLE’S THE
MOBILE
PLAYBOOK
LUKE
WROBLEWSKI’S
MOBILE FIRST
Slide 27
Slide 27 text
CREDITS
FLICKR CREDITS
flickr/cubagallery
flickr/-yury-
flickr/zebigp
flickr/jamesmozart
flickr/deanmelbourne
WEBSITE CREDITS
JBHIFI.COM.AU
KOGAN.COM.AU
AIRBNB.COM
M.NOKA.COM
IMAGEOPTIM.COM
PNGMINI.COM
SUBMLINE TEXT