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 examples are on GitHub: https://github.com/afilina/demo_jqm

Transcript

1. FooLab
   jQuery Mobile: Sites
   That Feel Like Apps
   OSCON - July 19, 2012
   

   View Slide

2. FooLab
   This presentation is
   suited for all levels
   Slides and code will be available online: @afilina
   #oscon #jquerymobile
   

   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
   • PHP Quebec - user group, organizer.
   • ConFoo - non for profit Web conference, organizer.
   • FooLab Inc. - IT consulting, vice-president.
   • I write code.
   • I train and supervise programmers.
   • I make recommendations.
   4
   

   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 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
    
    
    14
    

    View Slide

15. FooLab
    
    
    
    
    15
    

    View Slide

16. FooLab
    
    
    About
    
    
    16
    

    View Slide

17. FooLab
    
    
    About
    
    
    
    [...]
    
    17
    

    View Slide

18. FooLab
    
    
    About
    
    
    
    [...]
    
    18
    http://conference/jqm-intro/basics.html
    

    View Slide

19. FooLab
    Use Case
    OSCON Presentations on Mobile
    

    View Slide

20. View Slide

21. View Slide

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

23. View Slide

24. FooLab
    Improvements
    24
    • No zooming required.
    • Collapsible blocks: see
    available info without
    scrolling.
    • Share buttons always
    visible.
    http://conference/jqm-intro/oscon.html
    

    View Slide

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

    View Slide

26. FooLab
    Best Practices
    Open question to the audience.
    

    View Slide

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

    View Slide

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

    View Slide

29. FooLab
    Performance
    29
    • Keep transitions to minimum.
    • Slow devices.
    • User time.
    • Magnetic ink.
    

    View Slide

30. FooLab
    Performance
    30
    • Minimize round-trips.
    • Use multi-page
    documents.
    • Use sprite maps.
    List: 2.1KB Details: 2.2KB
    Combined: 3.6KB
    

    View Slide

31. FooLab
    Performance
    31
    • Link to jquery.com
    for .js and .css files.
    

    View Slide

32. FooLab
    Goodies
    

    View Slide

33. FooLab
    Codiqa: UI Builder
    33
    

    View Slide

34. FooLab
    Theme Roller
    34
    

    View Slide

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

    View Slide

36. FooLab
    UI Design
    36
    • Make it easy to accomplish a task.
    • Prevent user mistakes.
    • Allow mistake recovery.
    =====
    Done from my mobile.
    Sorry for any private
    photos accidentally
    sent to your boss.
    

    View Slide

37. 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/
    37
    

    View Slide

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

    View Slide