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
PRO

June 04, 2013
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

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

    IPC - June 4, 2013 - Berlin, Germany
  2. FooLab Purpose • Mobile site over mobile app. • jQuery

    Mobile makes sites easy. 2
  3. FooLab Anna Filina • I generate ROI through advice. •

    I rescue IT projects. 3
  4. FooLab AZ42-W1JJ-D57Z php|architect magazine -25%

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

    Point of entry for first-time users. • No download. • Others link to your site. 5
  6. FooLab Does your site work on this? 6 ©

  7. FooLab Problems • Development takes time. • UI not suited

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

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

    • Site looks the same everywhere. • UI adapted for mobile. • Works on many devices. 9
  10. FooLab © Apple, Google, Blackberry, Samsung, Amazon

  11. FooLab Progressive enhancement

  12. FooLab Mobile-specific events 12 • Tap: quick or hold. •

    Swipe: left or right. • Orientation change.
  13. FooLab Let’s build something

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

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

  16. FooLab Button 16

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

    </ul>
  18. FooLab <div data-role="page"> </div> 18 Shell

  19. FooLab <div data-role="page"> <div data-role="content"> </div> </div> 19

  20. FooLab <div data-role="page"> <div data-role="content"> <a data-role="button">About</a> </div> </div> 20

  21. FooLab <div data-role="page"> <div data-role="content"> <a data-role="button">About</a> </div> </div> <div

    data-role="page" id="about"> [...] </div> 21
  22. 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
  23. FooLab Case Study OSCON presentations on mobile

  24. 24

  25. 25

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

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

    see available info without scrolling. • Share buttons always visible. http://conference/jqm-intro/oscon.html
  29. FooLab Best Practices

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

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

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

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

    18px; } a.icon.back { background-position: -18px -0px; } 34
  35. 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" />
  36. FooLab External Resources 36

  37. FooLab Toolbox

  38. FooLab Codiqa: UI Builder 38

  39. FooLab Theme Roller 39

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

    native app. • Supports 7 platforms. • Saves even more money.
  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
  42. FooLab Q & A Twitter: @afilina E-mail: [email protected]