Category Archives: mobile

jQuery Mobile experience report

I am currently working on a mobile-optimised web app and have been doing so for the last month and a half. In order to get widgets like sliding panels, searchable drop-downs etc for free, we started looking for a JavaScript framework that would make our development go faster.

I evaluated, rather hastily might I add, jQM (jQuery Mobile), YUI and Sencha Touch and found that jQM seemed to hit the sweet spot of giving us a lot of functionality for free but without being very invasive. Other people reported that for e.g. Sencha you need to accept a different way of writing your markup, whereas working with jQM should feel more like your are just enriching your HTML.

Enriching your DOM

What I didn’t understand until later was just how must extra stuff jQM added, it dynamically inserts a lot of classes and divs in your HTML (n.b. I intuitively FEEL like this is what happens after using it for a few weeks, but when I inspected my HTML to find good examples of this I didn’t find anything horrendous).

There are advantages to this approach; sites work without JavaScript and you write standard HTML. But the major disadvantage is that it takes a lot of mental effort to reconcile what HTML you had written and what HTML you see in the browser inspector when trying to understand why the heck something looks the way it does. And you need to fix it, which brings be on to my next point.

So much cascading

We have constantly felt the need to write ugly CSS hacks, like very chatty/aggressive selectors to get around the jQM selectors on the elements that it adds to the DOM. I didn’t want us to start modifying the jQM stylesheets themselves, since that would make upgrading to a newer version much harder. But after spending too much time on writing said hacks, we gave up and are now making changes directly in jquery.mobile.css.

To conclude

I would absolutely use jQM on a project where the mobile website’s design deviate very little from the examples you can see on demos.jquerymobile.com. When speaking to our designer, he mentioned that other teams he had worked with echoed this statement.

If I was to work on a project with a more customised look and feel, I’d probably settle on using small plugins and/or write my own instead. I believe that this would have made us move faster on this particular project, which used a bunch of fancy solutions for how to fill out forms etc.