The Pros and Cons of Working with JQuery Mobile

I’ve been working with the mobile web (either designing or front-ending, I tend to do both) for almost four months now and I’ve learned a great deal in that time. One of the many things I’ve learned from has been the use of the JQuery Mobile framework for mobile web experience implementation.

As you can imagine, after almost three months of having used it, I can tell you a few pointers that will help you decide whether JQuery Mobile is what you’re looking for or not. As always, there’s no definite answer.

Let’s start with the good things

JQuery Mobile saves you a lot of time with positioning, responsiveness and visual details. Why?

It helps with positioning because you can use its specific attributes to arrange stuff inside the page, thus saving time with not having to bother yourself with the width percentages and all that. Plus, there is even a pre-arranged way of implementing the 960 CSS Grid!

You also save a lot of time in taking care of responsive design, since JQuery Mobile makes your layout adapt to the changes in size, also taking care of details like hiding the address bar of your web browser.

It saves you time with visual details because it comes with a default CSS style sheet that lets you alternate between ‘themes’, that is, color palettes you can apply to your layout. You only need to call these themes via a specific letter associated with them. This applies not only to small elements like buttons and icons, but also to the entire header, footer or body background. You can also use easy-to-implement page transitions, so that your panels hide or show in a more native-looking way.

Another great feature of JQuery Mobile is that it actually helps you understand the basic usage of HTML5. If you take a look at the documentation and wander around the layout structure section, you’ll find it implements the data attribute provided by the HTML5 markup. Little by little, you’ll gain more understanding of it by just using the framework.

Its panel exchange structure is also a very good side of using JQuery Mobile. You are able to have many single-purpose “pages” inside the same HTML document, which saves you trips to the server. You can have a simple website built in a single HTML file.

So how’s that for starters? Sounds pretty neat, to be honest. And I’ve taken advantage of many of its features, but…

There’s stuff we should consider against it

I’m personally very fond of JQuery Mobile, but I’ve found certain criteria that have made me decide against its use sometimes. Let’s talk about them…

First things first: Performance. Importing the JQuery Mobile library, alongside its CSS file, generates new calls to the server, therefore making your application slower. If you want to avoid this, you’ll need to further synthesize these files with your own scripts and CSS files.

Another thing is that the styling provided by the framework is loaded with gradients and rounded corners. So what if your design doesn’t have any? You ought to find ways around this styling… or decide against using the framework at all, since breaking its normal functionalities makes it a little more troublesome than it should be.

I’ve also had a few problems with the way JQuery Mobile formats elements such as dropdowns (well, mainly just dropdowns). What it does is change the element for a list, which not only makes the interaction a little awkward (after many tests with users, we’ve encountered the pop-up list of options doesn’t always respond correctly), but it also makes dynamically loading content into the dropdown not as straight-forward as it normally is.

Well? What do you think? Is JQuery Mobile what you’ve been looking for? I hope whatever the answer is, you find the solution to every mobile project you’re working on!

Keep in mind, though, this article wasn’t written considering the latest version of JQuery Mobile, which is out today. I’ll write a revised version as soon as I have the time to get my hands on the newest version.