jquery mobile: sites that feel like apps

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: anna@foolab.ca