brisbane web design april 2013: "an introduction to mobile first development and design"
DESCRIPTION
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/TRANSCRIPT
![Page 1: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/1.jpg)
MOBILE-FIRST DESIGN AND
DEVELOPMENT
![Page 2: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/2.jpg)
JAMES BANKS
JAMES@ WEB3.COM.AU
@_JAMESBANKS
![Page 3: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/3.jpg)
PLANNING DESIGN DEVELOPMENT
WHAT THE HELL IS
MOBILE FIRST?
![Page 4: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/4.jpg)
WHY MOBILE FIRST?
![Page 5: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/5.jpg)
![Page 6: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/6.jpg)
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
![Page 7: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/7.jpg)
10 BILLION MOBILE WEB
DEVICES BY 2016
EXCEEDS GLOBAL
POPULATION OF 7.3 BILLION
THAT’S 1.4 MOBILE WEB DEVICES PER
PERSON!!!
![Page 8: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/8.jpg)
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
![Page 9: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/9.jpg)
1. GATHER REQUIREMENTS
PLANNING FOR MOBILE-FIRST
2. DESCRIBE THE WEBSITE
3. IDENTIFY THE MAIN OBJECTIVES
![Page 10: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/10.jpg)
TIPS ON MOBILE DESIGN
![Page 11: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/11.jpg)
CONTENT BEFORE
NAVIGATION
EASILY ACCESSIBLE
SEARCH
ALLOW USERS TO ACCESS CONTENT
IMMEDIATELY
![Page 12: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/12.jpg)
![Page 13: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/13.jpg)
![Page 14: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/14.jpg)
![Page 15: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/15.jpg)
SPACE TAPPABLE
ELEMENTS OUT
44X44PX MINIMUM FOR
TAPPABLE ELEMENTS
AVOID LOW CONTRAST
DESIGN
![Page 16: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/16.jpg)
![Page 17: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/17.jpg)
![Page 18: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/18.jpg)
KEEP DESIGN CONSISTENT ACROSS ALL
DEVICES
MAKE USE OF TOUCH
ENABLED ELEMENTS
GIVE YOUR USERS
FEEDBACK TO THEIR ACTIONS
![Page 19: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/19.jpg)
TIPS ON MOBILE
DEVELOPMENT
![Page 20: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/20.jpg)
REDUCE HTTP REQUESTS
PLACE MOBILE MEDIA QUERIES AT TOP OF CSS
BUILD FOR
SPEED
![Page 21: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/21.jpg)
![Page 22: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/22.jpg)
![Page 23: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/23.jpg)
USE CSS3 WHEREVER POSSIBLE
COMPRESS IMAGES
PROPERLY
OPTIMISE ALL
MEDIA
![Page 24: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/24.jpg)
![Page 25: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/25.jpg)
KEEP IT SIMPLE!
![Page 26: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/26.jpg)
![Page 27: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/27.jpg)
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!
![Page 28: Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554d1c87b4c905ab268b45e4/html5/thumbnails/28.jpg)
JAMES BANKS
JAMES@ WEB3.COM.AU
@_JAMESBANKS
APPLE’S IOS HUMAN
INTERFACE GUIDELINES
GOOGLE’S THE MOBILE
PLAYBOOK
LUKE WROBLEWSKI’S MOBILE FIRST