When to use jQuery Mobile

By Mattias Kihlström





When should I use jQuery Mobile?


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

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 data-role="content">
	    Lorem ipsum...
	    <a data-role="button" data-icon="star" data-iconpos="right" data-transition="flip" href="#page-2">
	      View second page

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 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 class="ui-icon ui-icon-star ui-icon-shadow">&nbsp;</span>


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


Thank you!




Useful resources