jQuery: Mobile Sites That Feel Like Apps

Transcript

1. FooLab jQuery Mobile: Sites That Feel Like Apps OSCON -

   July 19, 2012

2. FooLab This presentation is suited for all levels Slides and

   code will be available online: @afilina #oscon #jquerymobile

3. FooLab What You Will Learn • 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. FooLab Anna Filina • 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. FooLab Mobile Site vs Mobile App • Mobile site •

   Quick and inexpensive • Point of entry for first- time users • Others link to your site • Mobile application • Faster • More features and control • No white pages • Works offline 5

6. FooLab Does Your Site Work on This? 6 © Amazon

7. FooLab The Problem • Development takes time. • UI looks

   different everywhere. • Too many variables: • devices, • browsers, • capabilities. 7

8. FooLab Capabilities • Viewport size. • Pointing method: • joystick,

   • stylus, • touchscreen, • clickwheel. • AJAX support. • QWERTY keyboard. • Images support. • Number of colors. • HTTPS support. • UTF-8 support. • Percent width. • ... 8

9. FooLab Solution: jQuery Mobile • One codebase to rule them

   all. • JavaScript framework. • Site looks the same everywhere. • UI adapted for mobile • Works on many devices. 9

10. FooLab 10 © Apple, Google, Blackberry, Samsung, Amazon

11. FooLab Mobile-Specific Events 11 • Tap: quick or hold. •

    Swipe: left or right. • Orientation change.

12. FooLab Let’s Build Something

13. FooLab Basics 13

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

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

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

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. 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> 18 http://conference/jqm-intro/basics.html

19. FooLab Use Case OSCON Presentations on Mobile

20. 20

21. 21

22. FooLab Improvements 22 • No zooming required. • Search box

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

23. 23

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

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

25. FooLab Features • Transitions • Dialogs • Themes • History

    and caching • List filtering • Toolbars and button groups • Forms • Slider • Flip switch • AJAX submitting 25

26. FooLab Best Practices Open question to the audience.

27. FooLab Big Lists 27 • Consider splitting into groups. •

    Few groups: use a navigation bar. • Many groups: use intermediate list.

28. FooLab Navigation 28 • Use lists where appropriate. • Add

    back and/or home buttons. • Keep it narrow and shallow. • Describe links.

29. FooLab Performance 29 • Keep transitions to minimum. • Slow

    devices. • User time. • Magnetic ink.

30. FooLab Performance 30 • Minimize round-trips. • Use multi-page documents.

    • Use sprite maps. List: 2.1KB Details: 2.2KB Combined: 3.6KB

31. FooLab Performance 31 • Link to jquery.com for .js and

    .css files.

32. FooLab Goodies

33. FooLab Codiqa: UI Builder 33

34. FooLab Theme Roller 34

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

    native app. • Supports 7 platforms. • Saves even more money.

36. FooLab UI Design 36 • 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.

37. 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/ 37

38. FooLab Q & A Twitter: @afilina E-mail: [email protected]