First impressions of the jQuery Mobile framework

Kyle Miller calls jQuery Mobile an excellent framework for quickly creating a basic mobile website with minimal effort and styling. jQuery Mobile's pros and cons are outlined.

I planned to test-drive the Windows Phone 7 SDK and put together a sample application so I could compare the overall development experience with Android. However, that's where Microsoft burned me, or did they burn themselves?

I refuse to upgrade from Windows XP. I wanted absolutely nothing to do with Windows Vista when it launched, and I could probably be talked into upgrading to Windows 7 for free, but I'm certainly not going to pay for it when there's nothing wrong with Windows XP that warrants an upgrade, in my opinion. Microsoft must feel differently, because the Windows Phone 7 SDK is not supported on Windows XP.

I don't know the percentage of developers still using Windows XP, but logic tells me there are enough of them who would be willing to try Windows Phone 7 that it would have some bearing on the overall number of active Windows Phone 7 developers, and thus applications in the Windows Marketplace. And at a time when Windows Phone 7 is trying to get its feet off the ground and beef up its app marketplace as quickly as possible, not supporting Windows XP just seems like Microsoft is cutting off its nose to spite its face (yes, I do believe this is to force more upgrades to Windows Vista/Windows7).

So, I decided to go in a different direction and play around with the jQuery Mobile framework. I use jQuery in every web development project I've done for the past several years, so the thought of using a jQuery-powered mobile framework was appealing. Here are my impressions of this framework.


The jQuery Project team makes it extremely easy to learn their framework. Their documentation is very straight-forward, and they even provide many code samples. After 15 minutes of walking through their documentation, I knew the basics well enough to create a sample site.

I really liked that without using any JavaScript you can quickly slap together a professional-looking mobile website complete with spinning dialogs and slick page transitions. I much prefer this model over other platforms like Sencha Touch that require you to build your UI through JavaScript, because I find building UIs in HTML much more intuitive.

If you aren't terribly worried about customizing the look of your site, the out-of-the-box themes are easy on the eye and very simple. However, if you prefer high levels of customization, the jQuery Mobile framework does allow for it.

jQuery Mobile provides you the flexibility to choose whether you want to create nested "pages" within one HTML document or link to individual pages. This can be especially nice when you have a series of screens in your UI that don't have any dynamic data and can easily be housed in the same file.


While the page transition animations are mostly pretty smooth, they do occasionally have their hiccups. On my Honeycomb tablet, the page transition animations are horrible and barely work. This was surprising, because jQuery Mobile is marketed as being compatible with phones and tablets; then again, the software is still in Beta.

One downside to the nested pages I mentioned earlier occurs when linking between a single page that was loaded via AJAX to a document with nested pages. Per the documentation, you must add either the rel="external" or data-ajax="false" attributes to your anchor tag; this will clear out the AJAX hash in the URL to avoid conflicts between the URL hash the internally linked pages use. This results in the loss of page transition animation between the screens, which causes an inconsistent UX.

I discovered a minor issue when I tried to apply an onclick handler to one of the vertically grouped radio buttons. The first struggle was discovering that the event had to be tied to the radio button's label rather than the radio button itself. The second issue was that, while it worked great in Chrome where I was doing my testing, the onclick events were difficult to fire from a mobile device or tablet. After some toying around, I discovered that the mousedown event was more reliable and eventually got everything working.


jQuery Mobile is an excellent framework, especially if you want to quickly throw together a basic mobile website with minimal effort and styling. There are a couple of quirks I'd like to see worked out in the next release, but I like the team's momentum, and I will certainly be keeping an eye on the project to see how it develops.


Kyle is a senior software engineer specializing in web/Android development living in Austin TX. He's a self-professed "gadget freak" whose passion for mobile devices drove him to jump into the mobile industry in 2010. He enjoys the fast-paced nature ...

Editor's Picks