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.

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?
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
11. TIPS ON MOBILE DESIGN
12. CONTENT BEFORE NAVIGATION EASILY ACCESSIBLE SEARCH ALLOW USERS TO ACCESS CONTENT IMMEDIATELY
16. SPACE TAPPABLE ELEMENTS OUT 44X44PX MINIMUM FOR TAPPABLE ELEMENTS AVOID LOW CONTRAST DESIGN
19. TIPS ON MOBILE DEVELOPMENT
20. REDUCE HTTP REQUESTS PLACE MOBILE MEDIA QUERIES AT TOP OF CSS BUILD FOR SPEED
23. USE CSS3 WHEREVER POSSIBLE COMPRESS IMAGES PROPERLY OPTIMISE ALL MEDIA
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