Upgrade to Pro — share decks privately, control downloads, hide ads and more …

James Banks: Mobile first development and design for WordPress

James Banks: Mobile first development and design for WordPress

I have spent the last 12 months researching and developing responsive websites using WordPress based on my own responsive WordPress themes. During that time, there has been an explosion in smartphone and tablet adoption and huge usage growth for mobile web traffic. The trouble is that the majority of websites, particularly websites developed in Australia, are not optimised or designed to meet the demands of the ever-increasing mobile web audience. This is why I have spent the latter half of this year studying mobile-first development, and applying what I know through developing responsive, mobile-first WordPress themes. I’d like to share my experience and findings with the Australian WordPress community in hope that we can design and develop better websites for the ever-increasing mobile market.

WP Australia

April 28, 2013
Tweet

More Decks by WP Australia

Other Decks in Technology

Transcript

  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?

  5. None
  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. None
  11. TIPS ON MOBILE DESIGN

  12. CONTENT BEFORE NAVIGATION EASILY ACCESSIBLE SEARCH ALLOW USERS TO ACCESS

    CONTENT IMMEDIATELY
  13. None
  14. None
  15. None
  16. SPACE TAPPABLE ELEMENTS OUT 44X44PX MINIMUM FOR TAPPABLE ELEMENTS AVOID

    LOW CONTRAST DESIGN
  17. None
  18. None
  19. TIPS ON MOBILE DEVELOPMENT

  20. REDUCE HTTP REQUESTS PLACE MOBILE MEDIA QUERIES AT TOP OF

    CSS BUILD FOR SPEED
  21. None
  22. None
  23. USE CSS3 WHEREVER POSSIBLE COMPRESS IMAGES PROPERLY OPTIMISE ALL MEDIA

  24. None
  25. 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!
  26. JAMES BANKS JAMES@ WEB3.COM.AU @_JAMESBANKS APPLE’S IOS HUMAN INTERFACE GUIDELINES

    GOOGLE’S THE MOBILE PLAYBOOK LUKE WROBLEWSKI’S MOBILE FIRST
  27. CREDITS FLICKR CREDITS flickr/cubagallery flickr/-yury- flickr/zebigp flickr/jamesmozart flickr/deanmelbourne WEBSITE CREDITS

    JBHIFI.COM.AU KOGAN.COM.AU AIRBNB.COM M.NOKA.COM IMAGEOPTIM.COM PNGMINI.COM SUBMLINE TEXT