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
   

   View Slide

2. JAMES
   BANKS
   JAMES@
   WEB3.COM.AU
   @_JAMESBANKS
   

   View Slide

3. PLANNING DESIGN DEVELOPMENT
   WHAT THE
   HELL IS
   MOBILE FIRST?
   

   View Slide

4. WHY
   MOBILE
   FIRST?
   

   View Slide

5. View Slide

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    
   

   View Slide

7. 10 BILLION
   MOBILE WEB
   DEVICES
   BY 2016
   EXCEEDS
   GLOBAL
   POPULATION
   OF 7.3 BILLION
   THAT’S 1.4
   MOBILE WEB
   DEVICES PER
   PERSON!!!
   

   View Slide

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
   

   View Slide

9. 1. GATHER
   REQUIREMENTS
   PLANNING FOR
   MOBILE-FIRST
   2. DESCRIBE
   THE WEBSITE
   3. IDENTIFY THE
   MAIN OBJECTIVES
   

   View Slide

10. View Slide

11. TIPS ON
    MOBILE
    DESIGN
    

    View Slide

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

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. SPACE
    TAPPABLE
    ELEMENTS OUT
    44X44PX
    MINIMUM FOR
    TAPPABLE
    ELEMENTS
    AVOID
    LOW CONTRAST
    DESIGN
    

    View Slide

17. View Slide

18. View Slide

19. TIPS ON
    MOBILE
    DEVELOPMENT
    

    View Slide

20. REDUCE HTTP
    REQUESTS
    PLACE MOBILE
    MEDIA QUERIES
    AT TOP OF CSS
    BUILD
    FOR
    SPEED
    

    View Slide

21. View Slide

22. View Slide

23. USE CSS3
    WHEREVER
    POSSIBLE
    COMPRESS
    IMAGES
    PROPERLY
    OPTIMISE
    ALL
    MEDIA
    

    View Slide

24. View Slide

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!
    

    View Slide

26. JAMES
    BANKS
    JAMES@
    WEB3.COM.AU
    @_JAMESBANKS
    APPLE’S IOS
    HUMAN
    INTERFACE
    GUIDELINES
    GOOGLE’S THE
    MOBILE
    PLAYBOOK
    LUKE
    WROBLEWSKI’S
    MOBILE FIRST
    

    View Slide

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
    

    View Slide