Pro Yearly is on sale from $80 to $50! »

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 case study of adapting an existing web application to the mobile.

GitHub: https://github.com/afilina/demo_jqm

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

August 17, 2013
Tweet

Transcript

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

    PHP, Cambridge – August 17, 2013
  2. 2 Purpose • Mobile site vs mobile app. • jQuery

    Mobile makes sites easy.
  3. 3 Anna Filina • Developer, mentor, project manager. • Fast

    & cost-effective delivery. • Writing a book: 10 warning signs in IT projects. • ConFoo organizer
  4. 4 Mobile approaches App Site Progressive enhancement Responsive design

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

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

  7. 7 Challenges • Development takes time. • UI not suited

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

    keyboard. • Images support. • Number of colors. • Percent width • etc.
  9. 9 Solution: jQuery Mobile • One codebase. • JavaScript framework.

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

  11. Progressive enhancement

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

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

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

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

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

  17. 17 <div data-role="page"> </div> Shell

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

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

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

    data-role="page" id="about"> [...] </div>
  21. 21 <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. None
  23. Case Study Conference website

  24. 24

  25. 25

  26. 26

  27. 27 Improvements • No zooming required. • Search box to

    filter list items. • The entire block is clickable. • Less info to reduce clutter. • Separators to indicate days.
  28. Dynamic filtering

  29. 29

  30. 30 Improvements • No zooming required. • Collapsible blocks: see

    available info without scrolling. • Share buttons always visible.
  31. Accordion

  32. 32 Documentation • api.jquerymobile.com

  33. Best Practices

  34. 34 Long lists • Consider splitting into groups. • Few

    groups: use a navigation bar. • Many groups: use intermediate list.
  35. 35 Navigation • Use lists where appropriate. • Add back

    and/or home buttons. • Describe links.
  36. 36 Performance • Keep transitions to minimum. • Slow devices.

    • Loses precious time. • Magnetic ink’s refresh rate.
  37. 37 Round trips • Minimize round-trips. • Use multi-page documents.

    • Use sprite maps. Page A: 2.1KB Page B: 2.2KB Combined: 3.6KB
  38. 38 Sprite map a.icon { background-image: url(/images/icons.png); width: 18px; height:

    18px; } a.icon.back { background-position: -18px -0px; }
  39. 39 External resources Include http://code.jquery.com/mobile/1.0/jquery.mobile- 1.3.1.min.css Instead of js/jquery.mobile-1.3.1.min.css

  40. 40 External Resources

  41. Toolbox

  42. 42 Codiqa: UI Builder

  43. 43 Theme Roller

  44. 44 PhoneGap • Convert your mobile UI to a native

    app. • Supports 7 platforms. • Saves even more money.
  45. 45 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/
  46. Twitter: @afilina Blog: afilina.com • Overcome technical challenges. • Ship

    your project faster. Q & A