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

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>
23. Case Study Conference website
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
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