Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
-
Upload
web3 -
Category
Technology
-
view
863 -
download
3
description
Transcript of Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
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