jQuery Mobile: Sites That Feel Like Apps

1,778 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,778
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery Mobile: Sites That Feel Like Apps

  1. 1. FooLabjQuery Mobile: SitesThat Feel Like AppsOSCON - July 19, 2012
  2. 2. FooLabThis presentation issuited for all levelsSlides and code will be available online: @afilina#oscon #jquerymobile
  3. 3. What You Will Learn FooLab• Mobile site / mobile app.• Device jungle.• Why it’s hard to build mobile sites.• Overview of jQuery Mobile.• Adapting an existing site to the mobile.• Best practices. 3
  4. 4. Anna Filina FooLab• PHP Quebec - user group, organizer.• ConFoo - non for profit Web conference, organizer.• FooLab Inc. - IT consulting, vice-president.• I write code.• I train and supervise programmers.• I make recommendations. 4
  5. 5. Mobile Site vs Mobile App FooLab• Mobile site • Mobile application • Quick and • Faster inexpensive • More features and • Point of entry for first- control time users • No white pages • Others link to your site • Works offline 5
  6. 6. Does Your Site FooLabWork on This? 6 © Amazon
  7. 7. The Problem FooLab• Development takes time.• UI looks different everywhere.• Too many variables: • devices, • browsers, • capabilities. 7
  8. 8. Capabilities FooLab• Viewport size. • QWERTY keyboard.• Pointing method: • Images support. • joystick, • Number of colors. • stylus, • HTTPS support. • touchscreen, • UTF-8 support. • clickwheel. • Percent width.• AJAX support. • ... 8
  9. 9. Solution: jQuery Mobile FooLab• One codebase to rule them all.• JavaScript framework.• Site looks the same everywhere.• UI adapted for mobile• Works on many devices. 9
  10. 10. FooLab10 © Apple, Google, Blackberry, Samsung, Amazon
  11. 11. Mobile-Specific Events FooLab• Tap: quick or hold.• Swipe: left or right.• Orientation change. 11
  12. 12. FooLabLet’s Build Something
  13. 13. Basics FooLab 13
  14. 14. FooLab<div data-role="page"></div> 14
  15. 15. FooLab<div data-role="page"> <div data-role="content"> </div></div> 15
  16. 16. FooLab<div data-role="page"> <div data-role="content"> <a data-role="button">About</a> </div></div> 16
  17. 17. FooLab<div data-role="page"> <div data-role="content"> <a data-role="button">About</a> </div></div><div data-role="page" id="page-about"> [...]</div> 17
  18. 18. FooLab<div data-role="page"> <div data-role="content"> <a href="#page-about" data-role="button">About</a> </div></div><div data-role="page" id="page-about"> [...]</div> http://conference/jqm-intro/basics.html 18
  19. 19. FooLabUse CaseOSCON Presentations on Mobile
  20. 20. 20
  21. 21. 21
  22. 22. Improvements FooLab• No zooming required.• Search box to filter list items.• The entire block is clickable.• Less info to reduce clutter.• Separators to indicate days. 22
  23. 23. 23
  24. 24. Improvements FooLab• No zooming required.• Collapsible blocks: see available info without scrolling.• Share buttons always visible.http://conference/jqm-intro/oscon.html 24
  25. 25. Features FooLab• Transitions • Toolbars and button groups• Dialogs • Forms• Themes • Slider• History and caching • Flip switch• List filtering • AJAX submitting 25
  26. 26. FooLabBest Practices Open question to the audience.
  27. 27. Big Lists FooLab• Consider splitting into groups.• Few groups: use a navigation bar.• Many groups: use intermediate list. 27
  28. 28. Navigation FooLab• Use lists where appropriate.• Add back and/or home buttons.• Keep it narrow and shallow.• Describe links. 28
  29. 29. Performance FooLab• Keep transitions to minimum. • Slow devices. • User time. • Magnetic ink. 29
  30. 30. Performance FooLab• Minimize round-trips. List: 2.1KB Details: 2.2KB • Use multi-page documents. Combined: 3.6KB • Use sprite maps. 30
  31. 31. Performance FooLab• Link to jquery.com for .js and .css files. 31
  32. 32. FooLabGoodies
  33. 33. Codiqa: UI Builder FooLab 33
  34. 34. Theme Roller FooLab 34
  35. 35. PhoneGap FooLab• Convert your mobile UI to a native app.• Supports 7 platforms.• Saves even more money. 35
  36. 36. UI Design FooLab• Make it easy to accomplish a task.• Prevent user mistakes.• Allow mistake recovery. ===== Done from my mobile. Sorry for any private photos accidentally sent to your boss. 36
  37. 37. Resources FooLab• 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/ 37
  38. 38. FooLabQ&ATwitter: @afilinaE-mail: anna@foolab.ca

×