MOBILE-FIRSTDESIGN ANDDEVELOPMENT
JAMESBANKSJAMES@WEB3.COM.AU@_JAMESBANKS
PLANNING DESIGN DEVELOPMENTWHAT THEHELL ISMOBILE FIRST?
WHYMOBILEFIRST?
0	  50	  100	  150	  200	  250	  2009	   2010	   2011	   2012	  Millions	  of	  units	  sold	  Smartphone	  vs.	  tablet	 ...
10 BILLIONMOBILE WEBDEVICESBY 2016EXCEEDSGLOBALPOPULATIONOF 7.3 BILLIONTHAT’S 1.4MOBILE WEBDEVICES PERPERSON!!!
1 IN 2AUSTRALIANSOWN ASMARTPHONEONLY 25% OFAUSTRALIANWEBSITES AREOPTIMISED FORMOBILE WEB60% EXPECTMOBILE WEBSITETO EQUALDE...
1. GATHERREQUIREMENTSPLANNING FORMOBILE-FIRST2. DESCRIBETHE WEBSITE3. IDENTIFY THEMAIN OBJECTIVES
TIPS ONMOBILEDESIGN
CONTENTBEFORENAVIGATIONEASILYACCESSIBLESEARCHALLOW USERSTO ACCESSCONTENTIMMEDIATELY
SPACETAPPABLEELEMENTS OUT44X44PXMINIMUM FORTAPPABLEELEMENTSAVOIDLOW CONTRASTDESIGN
KEEP DESIGNCONSISTENTACROSS ALLDEVICESMAKE USE OFTOUCHENABLEDELEMENTSGIVE YOURUSERSFEEDBACK TOTHEIR ACTIONS
TIPS ONMOBILEDEVELOPMENT
REDUCE HTTPREQUESTSPLACE MOBILEMEDIA QUERIESAT TOP OF CSSBUILDFORSPEED
USE CSS3WHEREVERPOSSIBLECOMPRESSIMAGESPROPERLYOPTIMISEALLMEDIA
KEEP ITSIMPLE!
KEY TAKEAWAYSMOBILE FIRST PLANNING MOBILE DESIGN MOBILE DEVELOPMENT- CLEARLY DEFINE REQUIREMENTS- PLAN FOR WHAT ONLY IS RE...
JAMESBANKSJAMES@WEB3.COM.AU@_JAMESBANKSAPPLE’S IOSHUMANINTERFACEGUIDELINESGOOGLE’S THEMOBILEPLAYBOOKLUKEWROBLEWSKI’SMOBILE...
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Upcoming SlideShare
Loading in...5
×

Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"

915

Published on

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/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
915
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"

  1. 1. MOBILE-FIRSTDESIGN ANDDEVELOPMENT
  2. 2. JAMESBANKSJAMES@WEB3.COM.AU@_JAMESBANKS
  3. 3. PLANNING DESIGN DEVELOPMENTWHAT THEHELL ISMOBILE FIRST?
  4. 4. WHYMOBILEFIRST?
  5. 5. 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  Internaonal  Data  Corporaon  (IDC)  Stascs    
  6. 6. 10 BILLIONMOBILE WEBDEVICESBY 2016EXCEEDSGLOBALPOPULATIONOF 7.3 BILLIONTHAT’S 1.4MOBILE WEBDEVICES PERPERSON!!!
  7. 7. 1 IN 2AUSTRALIANSOWN ASMARTPHONEONLY 25% OFAUSTRALIANWEBSITES AREOPTIMISED FORMOBILE WEB60% EXPECTMOBILE WEBSITETO EQUALDESKTOP40% WILL GO TOA COMPETITOR IFMOBILE WEBSITEIS POOR57% WILL NOTRECOMMEND APOOR MOBILEWEBSITE
  8. 8. 1. GATHERREQUIREMENTSPLANNING FORMOBILE-FIRST2. DESCRIBETHE WEBSITE3. IDENTIFY THEMAIN OBJECTIVES
  9. 9. TIPS ONMOBILEDESIGN
  10. 10. CONTENTBEFORENAVIGATIONEASILYACCESSIBLESEARCHALLOW USERSTO ACCESSCONTENTIMMEDIATELY
  11. 11. SPACETAPPABLEELEMENTS OUT44X44PXMINIMUM FORTAPPABLEELEMENTSAVOIDLOW CONTRASTDESIGN
  12. 12. KEEP DESIGNCONSISTENTACROSS ALLDEVICESMAKE USE OFTOUCHENABLEDELEMENTSGIVE YOURUSERSFEEDBACK TOTHEIR ACTIONS
  13. 13. TIPS ONMOBILEDEVELOPMENT
  14. 14. REDUCE HTTPREQUESTSPLACE MOBILEMEDIA QUERIESAT TOP OF CSSBUILDFORSPEED
  15. 15. USE CSS3WHEREVERPOSSIBLECOMPRESSIMAGESPROPERLYOPTIMISEALLMEDIA
  16. 16. KEEP ITSIMPLE!
  17. 17. KEY TAKEAWAYSMOBILE 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!
  18. 18. JAMESBANKSJAMES@WEB3.COM.AU@_JAMESBANKSAPPLE’S IOSHUMANINTERFACEGUIDELINESGOOGLE’S THEMOBILEPLAYBOOKLUKEWROBLEWSKI’SMOBILE FIRST
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×