Brisbane Web Design April 2013: "An Introduction to Mobile First Development and Design"
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 993 views
Uploaded on

Slides from my Brisbane Web Design April 2013 meetup presentation. ...

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
993
On Slideshare
751
From Embeds
242
Number of Embeds
6

Actions

Shares
Downloads
15
Comments
0
Likes
2

Embeds 242

http://www.mattersolutions.com.au 137
http://dev.web3.com.au 34
https://twitter.com 32
http://web3.com.au 29
http://msau.dev.c.mssydav12w11.mshcloud.com 5
http://msau.dev.mattersolutions.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MOBILE-FIRSTDESIGN ANDDEVELOPMENT
  • 2. JAMESBANKSJAMES@WEB3.COM.AU@_JAMESBANKS
  • 3. PLANNING DESIGN DEVELOPMENTWHAT THEHELL ISMOBILE FIRST?
  • 4. WHYMOBILEFIRST?
  • 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. 10 BILLIONMOBILE WEBDEVICESBY 2016EXCEEDSGLOBALPOPULATIONOF 7.3 BILLIONTHAT’S 1.4MOBILE WEBDEVICES PERPERSON!!!
  • 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. 1. GATHERREQUIREMENTSPLANNING FORMOBILE-FIRST2. DESCRIBETHE WEBSITE3. IDENTIFY THEMAIN OBJECTIVES
  • 9. TIPS ONMOBILEDESIGN
  • 10. CONTENTBEFORENAVIGATIONEASILYACCESSIBLESEARCHALLOW USERSTO ACCESSCONTENTIMMEDIATELY
  • 11. SPACETAPPABLEELEMENTS OUT44X44PXMINIMUM FORTAPPABLEELEMENTSAVOIDLOW CONTRASTDESIGN
  • 12. KEEP DESIGNCONSISTENTACROSS ALLDEVICESMAKE USE OFTOUCHENABLEDELEMENTSGIVE YOURUSERSFEEDBACK TOTHEIR ACTIONS
  • 13. TIPS ONMOBILEDEVELOPMENT
  • 14. REDUCE HTTPREQUESTSPLACE MOBILEMEDIA QUERIESAT TOP OF CSSBUILDFORSPEED
  • 15. USE CSS3WHEREVERPOSSIBLECOMPRESSIMAGESPROPERLYOPTIMISEALLMEDIA
  • 16. KEEP ITSIMPLE!
  • 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. JAMESBANKSJAMES@WEB3.COM.AU@_JAMESBANKSAPPLE’S IOSHUMANINTERFACEGUIDELINESGOOGLE’S THEMOBILEPLAYBOOKLUKEWROBLEWSKI’SMOBILE FIRST