jquery mobile : sites that feel like appsassets.en.oreilly.com/1/event/80/jquery_ mobile sites that...
TRANSCRIPT
![Page 1: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/1.jpg)
FooLab
jQuery Mobile: Sites That Feel Like AppsOSCON - July 19, 2012
![Page 2: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/2.jpg)
FooLab
This presentation is suited for all levelsSlides and code will be available online: @afilina#oscon #jquerymobile
![Page 3: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/3.jpg)
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
![Page 4: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/4.jpg)
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
![Page 5: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/5.jpg)
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
![Page 6: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/6.jpg)
FooLabDoes Your Site Work on This?
6 © Amazon
![Page 7: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/7.jpg)
FooLabThe Problem
• Development takes time.
• UI looks different everywhere.
• Too many variables:
• devices,
• browsers,
• capabilities.
7
![Page 8: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/8.jpg)
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
![Page 9: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/9.jpg)
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
![Page 10: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/10.jpg)
FooLab
10 © Apple, Google, Blackberry, Samsung, Amazon
![Page 11: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/11.jpg)
FooLabMobile-Specific Events
11
• Tap: quick or hold.
• Swipe: left or right.
• Orientation change.
![Page 12: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/12.jpg)
FooLab
Let’s Build Something
![Page 13: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/13.jpg)
FooLabBasics
13
![Page 14: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/14.jpg)
FooLab
<div data-role="page">
</div>
14
![Page 15: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/15.jpg)
FooLab
<div data-role="page"> <div data-role="content">
</div></div>
15
![Page 16: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/16.jpg)
FooLab
<div data-role="page"> <div data-role="content"> <a data-role="button">About</a> </div></div>
16
![Page 17: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/17.jpg)
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
![Page 18: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/18.jpg)
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
![Page 19: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/19.jpg)
FooLab
Use CaseOSCON Presentations on Mobile
![Page 20: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/20.jpg)
20
![Page 21: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/21.jpg)
21
![Page 22: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/22.jpg)
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.
![Page 23: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/23.jpg)
23
![Page 24: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/24.jpg)
FooLabImprovements
24
• No zooming required.
• Collapsible blocks: see available info without scrolling.
• Share buttons always visible.
http://conference/jqm-intro/oscon.html
![Page 25: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/25.jpg)
FooLabFeatures
• Transitions
• Dialogs
• Themes
• History and caching
• List filtering
• Toolbars and button groups
• Forms
• Slider
• Flip switch
• AJAX submitting
25
![Page 26: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/26.jpg)
FooLab
Best Practices
Open question to the audience.
![Page 27: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/27.jpg)
FooLabBig Lists
27
• Consider splitting into groups.
• Few groups: use a navigation bar.
• Many groups: use intermediate list.
![Page 28: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/28.jpg)
FooLabNavigation
28
• Use lists where appropriate.
• Add back and/or home buttons.
• Keep it narrow and shallow.
• Describe links.
![Page 29: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/29.jpg)
FooLabPerformance
29
• Keep transitions to minimum.
• Slow devices.
• User time.
• Magnetic ink.
![Page 30: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/30.jpg)
FooLabPerformance
30
• Minimize round-trips.
• Use multi-page documents.
• Use sprite maps.
List: 2.1KB Details: 2.2KB
Combined: 3.6KB
![Page 31: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/31.jpg)
FooLabPerformance
31
• Link to jquery.com for .js and .css files.
![Page 32: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/32.jpg)
FooLab
Goodies
![Page 33: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/33.jpg)
FooLabCodiqa: UI Builder
33
![Page 34: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/34.jpg)
FooLabTheme Roller
34
![Page 35: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/35.jpg)
FooLabPhoneGap
35
• Convert your mobile UI to a native app.
• Supports 7 platforms.
• Saves even more money.
![Page 36: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/36.jpg)
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.
![Page 37: jQuery Mobile : Sites That Feel Like Appsassets.en.oreilly.com/1/event/80/jQuery_ Mobile Sites That Feel... · Foo Lab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012](https://reader031.vdocuments.mx/reader031/viewer/2022022519/5b156c7e7f8b9ac7128c657a/html5/thumbnails/37.jpg)
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