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 use-case of adapting an existing web application to the mobile.

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

Transcript

1. FooLab
   http://foolab.ca
   @foolabca
   jQuery Mobile: Sites
   That Feel Like Apps
   HTML5 Montreal - October 29, 2012
   

   View Slide

2. FooLab
   This presentation is
   suited for all levels
   

   View Slide

3. FooLab
   What You Will Learn
   • Mobile site / mobile app.
   • Device jungle.
   • Why it’s hard to build mobile sites.
   • Overview of jQuery Mobile.
   • Adapting an existing site to the mobile.
   • Best practices.
   3
   

   View Slide

4. FooLab
   Anna Filina
   4
   User group
   Non profit
   conference
   FooLab
   Training
   Project rescue
   @afilina
   

   View Slide

5. FooLab
   Mobile Site vs Mobile App
   • Mobile site
   • Quick and
   inexpensive
   • Point of entry for
   first-time users
   • Others link to your site
   • Mobile application
   • Faster
   • More features and
   control
   • No white loading
   pages
   • Works offline
   5
   

   View Slide

6. FooLab
   Does Your Site
   Work on This?
   6 © Amazon
   

   View Slide

7. FooLab
   The Problem
   • Development takes time.
   • UI looks different everywhere.
   • Too many variables:
   • devices,
   • browsers,
   • capabilities.
   7
   

   View Slide

8. FooLab
   Capabilities
   • Viewport size.
   • Pointing method:
   • joystick,
   • stylus,
   • touchscreen,
   • clickwheel.
   • AJAX support.
   • QWERTY keyboard.
   • Images support.
   • Number of colors.
   • HTTPS support.
   • UTF-8 support.
   • Percent width.
   • ...
   8
   

   View Slide

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

   View Slide

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

    View Slide

11. FooLab
    Mobile-Specific Events
    11
    • Tap: quick or hold.
    • Swipe: left or right.
    • Orientation change.
    

    View Slide

12. FooLab
    Let’s Build Something
    

    View Slide

13. FooLab
    Basics
    13
    

    View Slide

14. FooLab
    Button
    14
    About
    

    View Slide

15. FooLab
    List
    15
    
    
    Item 1
    
    
    

    View Slide

16. FooLab
    
    
    About
    
    
    
    [...]
    
    16
    Shell
    

    View Slide

17. FooLab
    Use Case
    OSCON Presentations on Mobile
    

    View Slide

18. View Slide

19. FooLab
    Improvements
    19
    • 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

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

    View Slide

21. FooLab
    Features
    • Transitions
    • Dialogs
    • Themes
    • History and caching
    • List filtering
    • Toolbars and button
    groups
    • Forms
    • Slider
    • Flip switch
    • AJAX submitting
    21
    

    View Slide

22. FooLab
    Best Practices
    Long lists, complex navigation, performance.
    

    View Slide

23. FooLab
    Long Lists
    23
    • Consider splitting into
    groups.
    • Few groups: use a
    navigation bar.
    • Many groups: use
    intermediate list.
    

    View Slide

24. FooLab
    Navigation
    24
    • Use lists where
    appropriate.
    • Add back and/or home
    buttons.
    • Keep it narrow and
    shallow.
    • Describe links.
    

    View Slide

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

    View Slide

26. FooLab
    Round Trip
    26
    • Requests are slow.
    • Use multi-page
    documents to reduce
    round-trips.
    Page A: 2.1KB Page B: 2.2KB
    A+B: 3.6KB
    Request time Download time
    

    View Slide

27. FooLab
    Sprite Map
    a.icon {
    background-image: url(/images/icons.png);
    width: 16px;
    height: 16px;
    }
    a.icon.back {
    background-position: -16px -0px;
    }
    27
    

    View Slide

28. FooLab
    External Resources
    28
    • Link to jquery.com for JS and CSS files.
    href="http://code.jquery.com/mobile/1.0/
    jquery.mobile-1.0.min.css" />
    

    View Slide

29. FooLab
    External Resources
    29
    

    View Slide

30. FooLab
    Toolbox
    

    View Slide

31. FooLab
    Codiqa: UI Builder
    31
    

    View Slide

32. FooLab
    Theme Roller
    32
    

    View Slide

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

    View Slide

34. FooLab
    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/
    34
    

    View Slide

35. FooLab
    Q & A
    Twitter: @afilina
    E-mail: anna@foolab.ca
    

    View Slide