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

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

October 29, 2012
Tweet

Transcript

  1. FooLab http://foolab.ca @foolabca jQuery Mobile: Sites That Feel Like Apps

    HTML5 Montreal - October 29, 2012
  2. FooLab This presentation is suited for all levels

  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
  4. FooLab Anna Filina 4 User group Non profit conference FooLab

    Training Project rescue @afilina
  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
  6. FooLab Does Your Site Work on This? 6 © Amazon

  7. FooLab The Problem • Development takes time. • UI looks

    different everywhere. • Too many variables: • devices, • browsers, • capabilities. 7
  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
  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
  10. FooLab 10 © Apple, Google, Blackberry, Samsung, Amazon

  11. FooLab Mobile-Specific Events 11 • Tap: quick or hold. •

    Swipe: left or right. • Orientation change.
  12. FooLab Let’s Build Something

  13. FooLab Basics 13

  14. FooLab Button 14 <a data-role="button">About</a>

  15. FooLab List 15 <ul data-role="listview"> <li> <a href="item1.html">Item 1</a> </li>

    </ul>
  16. FooLab <div data-role="page"> <div data-role="content"> <a href="#page-about" data-role="button">About</a> </div> </div>

    <div data-role="page" id="page-about"> [...] </div> 16 Shell
  17. FooLab Use Case OSCON Presentations on Mobile

  18. 18

  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.
  20. FooLab Improvements 20 • No zooming required. • Collapsible blocks:

    see available info without scrolling. • Share buttons always visible.
  21. FooLab Features • Transitions • Dialogs • Themes • History

    and caching • List filtering • Toolbars and button groups • Forms • Slider • Flip switch • AJAX submitting 21
  22. FooLab Best Practices Long lists, complex navigation, performance.

  23. FooLab Long Lists 23 • Consider splitting into groups. •

    Few groups: use a navigation bar. • Many groups: use intermediate list.
  24. FooLab Navigation 24 • Use lists where appropriate. • Add

    back and/or home buttons. • Keep it narrow and shallow. • Describe links.
  25. FooLab Performance 25 • Keep transitions to minimum. • Slow

    devices. • Loses precious time. • Magnetic ink’s refresh rate.
  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
  27. FooLab Sprite Map a.icon { background-image: url(/images/icons.png); width: 16px; height:

    16px; } a.icon.back { background-position: -16px -0px; } 27
  28. FooLab External Resources 28 • Link to jquery.com for JS

    and CSS files. <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/ jquery.mobile-1.0.min.css" />
  29. FooLab External Resources 29

  30. FooLab Toolbox

  31. FooLab Codiqa: UI Builder 31

  32. FooLab Theme Roller 32

  33. FooLab PhoneGap 33 • Convert your mobile UI to a

    native app. • Supports 7 platforms. • Saves even more money.
  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
  35. FooLab Q & A Twitter: @afilina E-mail: anna@foolab.ca