When to use jQuery Mobile?

By Mattias Kihlström

jQuery Mobile is a JavaScript framework designed to make it easier to build touch friendly web user interfaces for mobile devices. But when is it a good idea for your mobile web project and when is it not?

The main reason for using a framework at all is to be able to accomplish more while doing less work. jQuery Mobile does not let you down in this regard. With just a few standard HTML elements you can easily build something that mimics native mobile apps in both look and feel. Almost.

The essentials

As the name implies jQuery Mobile is based on the jQuery JavaScript framework. This is both a blessing and a curse (mostly a blessing). It ensures compatibility with the highest amount of different web browsers, both mobile and desktop, and also makes for a lower threshold for developers already familiar with jQuery. On the other hand jQuery is not known for being light weight and file size is often a concern in mobile solutions. And don't forget that executing a lot of JavaScript impacts performance and battery life, something that is especially apparent in older mobile devices.

The looks

jQuery Mobile encourages following web standards, supports keyboard navigation and adds WAI-ARIA roles where appropriate. But don't expect the code to look pretty after page initialization. :) Code example before initialization:

<div id="page1" data-role="page" data-theme="b">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    Lorem ipsum...
    <a href="#page2" data-role="button" data-icon="star" data-iconpos="right" data-transition="flip">
      View second page
    </a>
  </div>
</div>

Code after being processed by jQuery Mobile:

<div id="page1" class="ui-page ui-body-b ui-page-active" data-url="page1" data-role="page" data-theme="b">
  <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 href="#page2" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-b" data-theme="b" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" data-role="button" data-icon="star" data-iconpos="right" data-transition="flip">
      <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">&nbsp;</span>
      </span>
    </a>
  </div>
</div>

And the result in Mobile Safari on an iPhone:

The answer

So what is the answer to the question on when to use jQuery Mobile?

Use jQuery Mobile when you want to build a touch friendly mobile web site for smartphones with 3G or faster.

Do you want more of the same, but in Swedish? Then please take a look at the slides I used in a lightning talk on the same subject at a SweNug gathering in Gothenburg the other day: När ska man använda jQuery Mobile? (I also made a similar talk in English a few months back at the Scandinavian Developer Conference.)

There is no one answer to anything.