FooLab
jQuery Mobile: Sites That Feel Like AppsOSCON - July 19, 2012
FooLab
This presentation is suited for all levelsSlides and code will be available online: @afilina#oscon #jquerymobile
FooLabWhat 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
FooLabAnna 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
FooLabMobile 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
FooLabDoes Your Site Work on This?
6 © Amazon
FooLabThe Problem
• Development takes time.
• UI looks different everywhere.
• Too many variables:
• devices,
• browsers,
• capabilities.
7
FooLabCapabilities
• 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
FooLabSolution: jQuery Mobile
• One codebase to rule them all.
• JavaScript framework.
• Site looks the same everywhere.
• UI adapted for mobile
• Works on many devices.
9
FooLab
10 © Apple, Google, Blackberry, Samsung, Amazon
FooLabMobile-Specific Events
11
• Tap: quick or hold.
• Swipe: left or right.
• Orientation change.
FooLab
Let’s Build Something
FooLabBasics
13
FooLab
<div data-role="page">
</div>
14
FooLab
<div data-role="page"> <div data-role="content">
</div></div>
15
FooLab
<div data-role="page"> <div data-role="content"> <a data-role="button">About</a> </div></div>
16
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
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
FooLab
Use CaseOSCON Presentations on Mobile
20
21
FooLabImprovements
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
FooLabImprovements
24
• No zooming required.
• Collapsible blocks: see available info without scrolling.
• Share buttons always visible.
http://conference/jqm-intro/oscon.html
FooLabFeatures
• Transitions
• Dialogs
• Themes
• History and caching
• List filtering
• Toolbars and button groups
• Forms
• Slider
• Flip switch
• AJAX submitting
25
FooLab
Best Practices
Open question to the audience.
FooLabBig Lists
27
• Consider splitting into groups.
• Few groups: use a navigation bar.
• Many groups: use intermediate list.
FooLabNavigation
28
• Use lists where appropriate.
• Add back and/or home buttons.
• Keep it narrow and shallow.
• Describe links.
FooLabPerformance
29
• Keep transitions to minimum.
• Slow devices.
• User time.
• Magnetic ink.
FooLabPerformance
30
• Minimize round-trips.
• Use multi-page documents.
• Use sprite maps.
List: 2.1KB Details: 2.2KB
Combined: 3.6KB
FooLabPerformance
31
• Link to jquery.com for .js and .css files.
FooLab
Goodies
FooLabCodiqa: UI Builder
33
FooLabTheme Roller
34
FooLabPhoneGap
35
• Convert your mobile UI to a native app.
• Supports 7 platforms.
• Saves even more money.
FooLabUI 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.
FooLabResources
• 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
FooLab
Q & ATwitter: @afilinaE-mail: [email protected]