jQuery Mobile: Sites That Feel Like Apps

jQuery Mobile is a cross-platform framework made for smartphones and tablets. With its HTML5 interface, it looks and feels like an app. This presentation will teach you how to quickly create a mobile front-end with little effort. It will also feature a case study of adapting an existing web application to the mobile.

GitHub: https://github.com/afilina/demo_jqm

Transcript

1. http://foolab.ca
   @foolabca
   jQuery Mobile: Sites
   That Feel Like Apps
   Northeast PHP, Cambridge – August 17, 2013
   

   View Slide

2. 2
   Purpose
   • Mobile site vs mobile app.
   • jQuery Mobile makes sites easy.
   

   View Slide

3. 3
   Anna Filina
   • Developer, mentor,
   project manager.
   • Fast & cost-effective
   delivery.
   • Writing a book:
   10 warning signs in IT
   projects.
   • ConFoo organizer
   

   View Slide

4. 4
   Mobile approaches
   App Site
   Progressive
   enhancement
   Responsive
   design
   

   View Slide

5. 5
   Why choose mobile
   site?
   • Quick and inexpensive.
   • Point of entry for first-time users.
   • No download.
   • Others link to your site.
   

   View Slide

6. 6
   Does your site work on
   this?
   © Amazon
   

   View Slide

7. 7
   Challenges
   • Development takes time.
   • UI not suited for mobile.
   • Too many variables:
   • devices,
   • browsers,
   • capabilities.
   

   View Slide

8. 8
   Capabilities
   • Viewport size.
   • Pointing method.
   • Full keyboard.
   • Images support.
   • Number of colors.
   • Percent width
   • etc.
   

   View Slide

9. 9
   Solution: jQuery Mobile
   • One codebase.
   • JavaScript framework.
   • Site looks the same everywhere.
   • UI adapted for mobile.
   • Works on many devices.
   

   View Slide

10. © Apple, Google, Blackberry, Samsung, Amazon
    

    View Slide

11. Progressive
    enhancement
    

    View Slide

12. 12
    Mobile-specific events
    • Tap: quick or hold.
    • Swipe: left or right.
    • Orientation change.
    

    View Slide

13. Let’s build something
    

    View Slide

14. 14
    Includes
    • jquery-1.10.1.min.js
    • jquery.mobile-1.3.1.min.js
    • jquery.mobile-1.3.1.min.css
    

    View Slide

15. 15
    Button
    About
    

    View Slide

16. 16
    List
    
    
    Item 1
    
    
    

    View Slide

17. 17
    
    
    Shell
    

    View Slide

18. View Slide

19. 19
    
    
    About
    
    
    

    View Slide

20. 20
    
    
    About
    
    
    
    [...]
    
    

    View Slide

21. 21
    
    
    About
    
    
    
    [...]
    
    

    View Slide

22. View Slide

23. Case Study
    Conference website
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. 27
    Improvements
    • No zooming required.
    • Search box to filter list
    items.
    • The entire block is
    clickable.
    • Less info to reduce
    clutter.
    • Separators to indicate
    days.
    

    View Slide

28. Dynamic filtering
    

    View Slide

29. View Slide

30. 30
    Improvements
    • No zooming
    required.
    • Collapsible blocks:
    see available info
    without scrolling.
    • Share buttons
    always visible.
    

    View Slide

31. Accordion
    

    View Slide

32. 32
    Documentation
    • api.jquerymobile.com
    

    View Slide

33. Best Practices
    

    View Slide

34. 34
    Long lists
    • Consider splitting
    into groups.
    • Few groups: use a
    navigation bar.
    • Many groups: use
    intermediate list.
    

    View Slide

35. 35
    Navigation
    • Use lists where
    appropriate.
    • Add back and/or home
    buttons.
    • Describe links.
    

    View Slide

36. 36
    Performance
    • Keep transitions to minimum.
    • Slow devices.
    • Loses precious time.
    • Magnetic ink’s refresh rate.
    

    View Slide

37. 37
    Round trips
    • Minimize round-trips.
    • Use multi-page documents.
    • Use sprite maps.
    Page A: 2.1KB Page B: 2.2KB Combined: 3.6KB
    

    View Slide

38. 38
    Sprite map
    a.icon {
    background-image: url(/images/icons.png);
    width: 18px;
    height: 18px;
    }
    a.icon.back {
    background-position: -18px -0px;
    }
    

    View Slide

39. 39
    External resources
    Include
    http://code.jquery.com/mobile/1.0/jquery.mobile-
    1.3.1.min.css
    Instead of
    js/jquery.mobile-1.3.1.min.css
    

    View Slide

40. 40
    External Resources
    

    View Slide

41. Toolbox
    

    View Slide

42. 42
    Codiqa: UI Builder
    

    View Slide

43. 43
    Theme Roller
    

    View Slide

44. 44
    PhoneGap
    • Convert your mobile
    UI to a native app.
    • Supports 7
    platforms.
    • Saves even more
    money.
    

    View Slide

45. 45
    Resources
    • jQuery Mobile: http://jquerymobile.com
    • Sprite maps:
    http://www.alistapart.com/articles/sprites/
    • UI builder: http://www.codiqa.com
    • ThemeRoller:
    http://jquerymobile.com/themeroller/
    • PhoneGap: http://phonegap.com/
    

    View Slide

46. Twitter: @afilina
    Blog: afilina.com
    • Overcome technical challenges.
    • Ship your project faster.
    Q & A
    

    View Slide