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.

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

June 04, 2013
Tweet

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: anna@foolab.ca