jQuery Mobile — web applications for touchscreen phones

The mobile web is no longer the future — it’s the present. According to our statistics, a third of our clients already access web applications from mobile devices. jQuery Mobile promises a simple way to create touch-friendly web applications that look and behave like native ones. After a month of experimentation, we share our findings.

What is jQuery Mobile¶

jQuery Mobile is a framework built on top of jQuery and jQuery UI, designed for creating mobile web applications. Unlike media queries, which adapt an existing desktop web to mobile devices, jQuery Mobile is designed mobile-first — you start with the mobile version and the content is optimized for touch control from the beginning.

The framework works on the principle of progressive enhancement. The base is semantic HTML with data attributes (data-role, data-theme, data-transition). jQuery Mobile detects the browser’s capabilities and automatically enhances the HTML into a richer UI — buttons get touch styles, lists get interaction, pages get transitions. On older phones with limited browsers you still see functional (if less attractive) content.

Pagination and navigation¶

jQuery Mobile uses a unique approach to pagination. All pages are div elements in a single HTML file (or loaded via AJAX) with data-role=”page”. Navigation between pages is an animated transition — slide, fade, pop — without a complete page reload. The URL is updated via hash fragments, so history and the back button work.

AJAX navigation has its advantages — fast transitions, a smooth user experience, the ability to pre-load pages. But also disadvantages — SEO is problematic (search engines don’t see AJAX content), deep linking requires extra work and debugging AJAX navigation is more complex than traditional links. For our internal applications where SEO is not important, this is not a problem. For public-facing websites, we recommend caution.

UI components¶

jQuery Mobile offers a set of UI components adapted for touch control. Lists (listview) with built-in search, buttons with icons and various styles, forms with touch widgets (slider, flip switch, checkbox as toggle), dialog boxes, panels and toolbars. All components are themeable via a swatch system — five pre-prepared color schemes (a–e) that you can combine.

The quality of the components is solid for basic use cases. Listview with search is great for a phone book or product catalogue. Forms with touch widgets are more usable than standard HTML forms on mobile. But for more complex interactions — drag and drop, complex tables, charts — you will need supplementary libraries.

Theming and design¶

ThemeRoller for jQuery Mobile is a web tool for creating custom themes. You set colors, fonts, corner rounding and shadows, and download the finished CSS file. It’s a quick way to adapt the appearance of an application to corporate branding. But be warned — all jQuery Mobile applications still have that “jQuery Mobile look”. If you need a unique design, you’ll need to rewrite a lot of CSS.

This is one of the main criticisms — jQuery Mobile applications look like jQuery Mobile applications. They don’t have the native look and feel of iOS or Android. Users can tell they’re not in a native application. For internal enterprise applications this may be acceptable; for consumer applications it is often a deal-breaker.

Performance on mobile devices¶

This is where we run into the biggest problem with jQuery Mobile. The framework is large — jQuery core plus jQuery Mobile CSS and JS is over 200KB of minified code. On fast WiFi this is not a problem, but on a 3G network the first load can take several seconds. Additionally, framework initialization — DOM parsing, element enhancement — is CPU-intensive and causes noticeable delays on older phones.

Page transition animations are not smooth on all devices. On iPhone 4 and newer Android phones it looks good. On older devices the animations stutter and appear unprofessional. We recommend testing on the weakest device your users will use and simplifying or disabling animations if necessary.

Optimization requires effort — lazy loading of images, minimizing DOM operations, pre-loading critical pages, a custom jQuery Mobile build with only the needed modules. With these optimizations the result is acceptable, but the default state without optimization is too slow for more complex applications.

Comparison with native development¶

The question our clients ask most often: should we build a native iOS/Android application or a mobile web with jQuery Mobile? The answer depends on context. Native apps have better performance, access to hardware APIs (camera, accelerometer, push notifications), offline capability and distribution via the App Store. A web application has a single codebase for all platforms, immediate updates without App Store approval and lower development costs.

For internal enterprise applications — where it doesn’t matter that the application doesn’t look native, where you don’t need push notifications and where you want one version for all devices — jQuery Mobile is a good choice. For consumer applications where user experience is key and you’re competing with native apps, we recommend native development or at least a PhoneGap wrapper.

PhoneGap — the hybrid approach¶

PhoneGap (now also Apache Cordova) allows packaging a web application into a native container. The result is a native application distributable via the App Store that runs a WebView internally. jQuery Mobile plus PhoneGap gives you access to native APIs (camera, contacts, filesystem) and the ability to function offline. On the other hand, performance is still limited by the WebView’s performance.

This hybrid approach can be a reasonable compromise. You develop a single web application, package it for both iOS and Android and get native distribution. But you need to accept that the user experience won’t match a truly native application. For some use cases — internal tools, simple utilities — it’s enough. For complex applications with demanding graphics or intricate interaction, it isn’t.

Alternatives to jQuery Mobile¶

jQuery Mobile is not the only mobile framework. Sencha Touch offers a richer set of components and better performance, but requires more experience and uses its own class system instead of jQuery. jQTouch is a lighter alternative focused on iOS look. Zepto.js is a lightweight jQuery substitute optimized for mobile browsers. And of course you can use responsive design with media queries and avoid a mobile framework altogether.

Conclusion¶

jQuery Mobile is a solid framework for quickly building mobile web applications. For internal enterprise use cases — where speed of development and a single codebase matter — it’s a good choice. For consumer applications with high UX requirements, we recommend considering native development. Don’t forget to test on real devices and optimize performance.