Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery: Mobile Sites That Feel Like Apps

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

Anna Filina

July 19, 2012
Tweet

More Decks by Anna Filina

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. FooLab
    Let’s Build Something

    View full-size slide

  13. FooLab
    Basics
    13

    View full-size slide

  14. FooLab


    About


    16

    View full-size slide

  15. FooLab


    About



    [...]

    17

    View full-size slide

  16. FooLab


    About



    [...]

    18
    http://conference/jqm-intro/basics.html

    View full-size slide

  17. FooLab
    Use Case
    OSCON Presentations on Mobile

    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  21. FooLab
    Best Practices
    Open question to the audience.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. FooLab
    Goodies

    View full-size slide

  28. FooLab
    Codiqa: UI Builder
    33

    View full-size slide

  29. FooLab
    Theme Roller
    34

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. FooLab
    Q & A
    Twitter: @afilina
    E-mail: [email protected]

    View full-size slide