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

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.

Anna Filina

June 04, 2013
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. FooLab Why choose mobile site? • Quick and inexpensive. •

    Point of entry for first-time users. • No download. • Others link to your site. 5
  2. FooLab Problems • Development takes time. • UI not suited

    for mobile. • Too many variables: • devices, • browsers, • capabilities. 7
  3. FooLab Capabilities • Viewport size. • Pointing method. • AJAX

    support. • Full keyboard. • Images support. • Number of colors. • HTTPS support. • UTF-8 support. • Percent width. • ... 8
  4. FooLab Solution: jQuery Mobile • One codebase. • JavaScript framework.

    • Site looks the same everywhere. • UI adapted for mobile. • Works on many devices. 9
  5. FooLab Mobile-specific events 12 • Tap: quick or hold. •

    Swipe: left or right. • Orientation change.
  6. FooLab <div data-role="page"> <div data-role="content"> <a href="#about" data-role="button"> About</a> </div>

    </div> <div data-role="page" id="about"> [...] </div> 22 http://conference/jqm-intro/basics.html
  7. 24

  8. 25

  9. 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.
  10. 27

  11. FooLab Improvements 28 • No zooming required. • Collapsible blocks:

    see available info without scrolling. • Share buttons always visible. http://conference/jqm-intro/oscon.html
  12. FooLab Long Lists 30 • Consider splitting into groups. •

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

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

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

    18px; } a.icon.back { background-position: -18px -0px; } 34
  17. FooLab External resources 35 • 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" />
  18. FooLab PhoneGap 40 • Convert your mobile UI to a

    native app. • Supports 7 platforms. • Saves even more money.
  19. 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