Slides from my Brisbane Web Design April 2013 meetup presentation. Links to references that I mentioned during the presentation: - Mobile First - Luke Wroblewsky: http://www.abookapart.com/products/mobile-first - Apple’s iOS Human Interface Guidelines: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf - Google's The Mobile Playbook: http://www.themobileplaybook.com/au/

1. MOBILE-FIRST
DESIGN AND
DEVELOPMENT

2. JAMES
BANKS
JAMES@
WEB3.COM.AU
@_JAMESBANKS

3. PLANNING DESIGN DEVELOPMENT
WHAT THE
HELL IS
MOBILE FIRST?

4. WHY
MOBILE
FIRST?

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

7. 10 BILLION
MOBILE WEB
DEVICES
BY 2016
EXCEEDS
GLOBAL
POPULATION
OF 7.3 BILLION
THAT’S 1.4
MOBILE WEB
DEVICES PER
PERSON!!!

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

9. 1. GATHER
REQUIREMENTS
PLANNING FOR
MOBILE-FIRST
2. DESCRIBE
THE WEBSITE
3. IDENTIFY THE
MAIN OBJECTIVES

10. TIPS ON
MOBILE
DESIGN

11. CONTENT
BEFORE
NAVIGATION
EASILY
ACCESSIBLE
SEARCH
ALLOW USERS
TO ACCESS
CONTENT
IMMEDIATELY

15. SPACE
TAPPABLE
ELEMENTS OUT
44X44PX
MINIMUM FOR
TAPPABLE
ELEMENTS
AVOID
LOW CONTRAST
DESIGN

18. KEEP DESIGN
CONSISTENT
ACROSS ALL
DEVICES
MAKE USE OF
TOUCH
ENABLED
ELEMENTS
GIVE YOUR
USERS
FEEDBACK TO
THEIR ACTIONS

19. TIPS ON
MOBILE
DEVELOPMENT

20. REDUCE HTTP
REQUESTS
PLACE MOBILE
MEDIA QUERIES
AT TOP OF CSS
BUILD
FOR
SPEED

23. USE CSS3
WHEREVER
POSSIBLE
COMPRESS
IMAGES
PROPERLY
OPTIMISE
ALL
MEDIA

25. KEEP IT
SIMPLE!

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

28. JAMES
BANKS
JAMES@
WEB3.COM.AU
@_JAMESBANKS
APPLE’S IOS
HUMAN
INTERFACE
GUIDELINES
GOOGLE’S THE
MOBILE
PLAYBOOK
LUKE
WROBLEWSKI’S
MOBILE FIRST