When to use jQuery Mobile
By Mattias Kihlström
www.mogul.com
@kihlstrom
mattias.kihlstrom@mogul.com
Question:
When should I use jQuery Mobile?
Answer:
Use jQuery Mobile when you want to build a touch friendly mobile web site for smartphones with 3G or faster.
What is jQuery Mobile?
A JavaScript UI framework
optimized for mobile touch devices
Dual licensed under the MIT or GPL Version 2 licensees
Latest stable version is 1.1
Built on top of "regular" jQuery (1.6.4 or 1.7.1)
HTML5 and CSS3 features
(and images for icons)
AJAX navigation system
A handful of different themes are included
ThemeRoller web application
"Grade A" support in a lot of different browsers
- Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
- Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
- Android 3.1 (Honeycomb) – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
- Android 4.0 (ICS) – Tested on a Galaxy Nexus S. Note: transition performance can be poor on upgraded devices
- Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
- Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
- Blackberry 7 – Tested on BlackBerry® Torch 9810
- Blackberry Playbook (1.0-2.0) – Tested on PlayBook
- Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
- Palm WebOS 3.0 – Tested on HP TouchPad
- Firebox Mobile (10 Beta) – Tested on Android 2.3 device
- Chrome for Android (Beta) – Tested on Android 4.0 device
- Skyfire 4.1 - Tested on Android 2.3 device
- Opera Mobile 11.5: Tested on Android 2.3
- Meego 1.2 – Tested on Nokia 950 and N9
- Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
- UC Browser – Tested on Android 2.3 device
- Kindle 3 and Fire - Tested on the built-in WebKit browser for each
- Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
- Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
- Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
- Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7
- Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
- Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7
How does jQuery Mobile work?
By adding extra elements and classes to your HTML and setting up custom events
You specify what an element is for (page, header, button etc.) by setting a data attribute called role
Only one data-role="page" is displayed at a time, but one HTML document can contain many pages
Code example
<div data-role="page" data-theme="a" id="page-1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
Lorem ipsum...
<a data-role="button" data-icon="star" data-iconpos="right" data-transition="flip" href="#page-2">
View second page
</a>
</div>
</div>
HTML after jQuery Mobile initialization
<div class="ui-page ui-body-a ui-page-active" data-url="page-1" data-role="page" data-theme="a" id="page-1">
<div role="banner" class="ui-header ui-bar-a" data-role="header">
<h1 aria-level="1" role="heading" class="ui-title">Page 1</h1>
</div>
<div role="main" class="ui-content" data-role="content">
Lorem ipsum...
<a class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-a" data-theme="a"
data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"
data-role="button" data-icon="star" data-iconpos="right" data-transition="flip" href="#page-2">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">
View second page
</span>
<span class="ui-icon ui-icon-star ui-icon-shadow"> </span>
</span>
</a>
</div>
</div>
Showtime!
jQuery Mobile
is no silver bullet
Avoid if
File size is a concern
(around 70KB minified and gzipped, including jQuery)
Avoid if
Old "dumb" phones or desktop browsers
(or no JavaScript)
Avoid if
Your design is too different in layout and function from the jQuery Mobile default
Avoid if
You expect fancy page transitions on Android
jQuery Mobile is really great if
Main target device is running iOS 5
(or Galaxy Nexus S, without latest upgrade)
jQuery Mobile is really great if
3G or faster connection
jQuery Mobile is really great if
Your project is short on time
jQuery Mobile is really great if
You like the feeling of "it just works"
Real world example
m.stenaline.co.uk
Thank you!
@kihlstrom
http://kihlstrom.com/sdc2012/
Questions?
Useful resources
- jQuery Mobile home - http://jquerymobile.com/
- ThemeRoller - http://jquerymobile.com/themeroller/
- Codiqa drag-and-drop UI builder - http://www.codiqa.com/
