jQuery Mobile: Sites That Feel Like Apps

Did you attend it? Rate here: https://joind.in/8778

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.

Transcript

1. FooLab
   http://foolab.ca
   @foolabca
   jQuery Mobile: Sites
   That Feel Like Apps
   IPC - June 4, 2013 - Berlin, Germany
   

   View Slide

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

   View Slide

3. FooLab
   Anna Filina
   • I generate ROI through advice.
   • I rescue IT projects.
   3
   

   View Slide

4. FooLab
   AZ42-W1JJ-D57Z
   php|architect magazine -25%
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. FooLab
   Capabilities
   • Viewport size.
   • Pointing method.
   • AJAX support.
   • Full keyboard.
   • Images support.
   • Number of colors.
   • HTTPS support.
   • UTF-8 support.
   • Percent width.
   • ...
   8
   

   View Slide

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

   View Slide

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

    View Slide

11. FooLab
    Progressive enhancement
    

    View Slide

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

    View Slide

13. FooLab
    Let’s build something
    

    View Slide

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

    View Slide

15. FooLab
    Button
    15
    About
    

    View Slide

16. FooLab
    Button
    16
    

    View Slide

17. FooLab
    List
    17
    
    
    Item 1
    
    
    

    View Slide

18. FooLab
    
    
    18
    Shell
    

    View Slide

19. FooLab
    
    
    
    
    19
    

    View Slide

20. FooLab
    
    
    About
    
    
    20
    

    View Slide

21. FooLab
    
    
    About
    
    
    
    [...]
    
    21
    

    View Slide

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

    View Slide

23. FooLab
    Case Study
    OSCON presentations on mobile
    

    View Slide

24. View Slide

25. View Slide

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

27. View Slide

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

    View Slide

29. FooLab
    Best Practices
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. FooLab
    External resources
    35
    • 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

36. FooLab
    External Resources
    36
    

    View Slide

37. FooLab
    Toolbox
    

    View Slide

38. FooLab
    Codiqa: UI Builder
    38
    

    View Slide

39. FooLab
    Theme Roller
    39
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide