jQuery Mobile Framework Review

I recently completed a large web application design & development project, whereby the application also needed to work for the mobile platform The difference between a website and a web application is that a web application is often much more complex than your average website. There’s more content (it’s generally data that’s being displayed) and the tasks that need to be carried out by it’s users will be more involved than just using a contact form, or picking up the phone. For that reason a ‘responsive’ approach isn’t always an option with a web app and I believe that most of the time it’s better to build a totally separate mobile app. This particular app for my client, Showcase was no different – it needed a completely separate mobile version that just included the key features and functionality from it’s desktop counterpart.

Picking the right framework

The first step was to pick a framework. I didn’t feel like creating this mobile app from scratch – too many things could go wrong and I knew I’d need to spend much more time testing my code to ensure it worked cross platform. I needed a robust framework that would make the development relatively quick and ensure that the code worked on a variety of mobile devices. After some research jQuery Mobile stood out for those reasons because:

  • It has support for iOS, Android, Blackberry, Windows Phone and more
  • The majority of the functionality and components you need are already created – you just need to theme them
  • There is comprehensive documentation making it really quick to get up and running
  • It has a good community with a forum and resources
  • It’s relatively easy to theme (e.g. alter the look and feel to match your design)
  • Importantly, the way it works feels a like it could be a native app as opposed to a mobile website

I think that last bullet point is a really important one. When you build a mobile app you need it to feel familiar to your users. They’ve become accustomed to the way the interface on their iOS or Android device works and they expect your web application to function in a similar way. Now as a developer I think that’s impossible to achieve for every device – iPhone and Blackberry being opposite ends of the spectrum – but you can find a good compromise. That’s why jQuery Mobile seemed like a good solution in my case – it’s functionality closely matched that of a native app experience. Check out some of the page transitions for instance that help make it feel more like a native app as opposed to a web app. Once I was confident I was going to use jQuery Mobile, I felt happy mocking up some designs and presenting them to the client. I wanted to show them how I planned the key pages of the mobile app to look. I made sure I was refering to the jQm documentation all the while I was designing the screens to ensure everything I was designing could be achieved. Here are a couple of examples:

Speaking of documentation

The jQm documentation was one of the things that attracted me most to the framework. Take a look for yourself – it’s so detailed and well structured, a real godsend!

You can refer to it all the time and search for what kind of element you require, grab the code you need, add it to your page and get up and running with a working web app really quickly. For instance, buttons are already created for you and there are already a couple of ‘themes’ that are built in. If you’re a designer you’ll want to change the look & feel of course, but if you needed to create a working prototype quickly and easily without changing any of the design, you could.

Where to start

The best place to start is by reading “The Anatomy Of A Page” in the documentation. There’s even a simple boilerplate provided for you. “Content Formatting” is essential too. There’s a grid system to get you up and running quickly.

Theming

Once you get started building out your app you’ll want to start customising the look and feel to bring it in-line with your design concepts. jQm has themes built in – they call them ‘swatches’ and you specify these using the HTML5 ‘data-theme’ attribute, e.g. data-theme=”a” , data-theme=”b” etc. The way I went about creating the unique theme for Showcase was to treat swatch C as my own and then just over-ride the CSS for the elements I needed to style in my own additional stylesheet. That way all the old styles are still kept intact, but I’m just building upon them. This also allows my client to easily update to newer versions of the jQm library, because overrides are kept separate from the library code. To find the appropriate classes I needed to target I just used Google Chrome’s built in web inspector.

Buttons

Buttons are really easy to get to grips with and customise too. All you need do is head over to the button section of the documentation, and decide whether you need;

  • a single button
  • a button with an icon
  • 2 buttons in-line (next to each other)
  • grouped buttons (buttons that are part of a set – e.g. a segmented control style button)

From there you can grab the example code. For example the code below is a full width ‘delete’ button, with an icon: If you want to move the icon from the left (default location) you simply add data-iconpos="right" You can also get rid of the text and just use the icon by adding data-iconpos="notext". There’s a lot of flexibility. Creating your own icons is a doddle too. All you do is specify a data-icon value that has a unique name, like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and then apply it to the button: ui-icon-myapp-email. Then you just need to add your button in the CSS:

.ui-icon-myapp-email { 	background-image: url("app-icon-email.png"); }

Don’t forget to create a high-res version for iPhone 4 retina display and other HD smart-phone displays:

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 	.ui-icon-myapp-email { 		background-image: url("app-icon-email-highres.png"); 		background-size: 18px 18px; 	} 	...more HD icon rules go here... }

Would I recommend jQuery Mobile?

Most definitely. If you’re about to leap into a mobile web app development project take a look. Have a play around with the code and I’m sure you’ll see for yourself just how easy the framework is to work with. My review is by no means comprehensive, but I think it covers all the things that a designer/front-end developer would be concerned about when selecting a framework. I’m no expert either, but if you have any questions I’ll do my best to answer them in the comments. If you’ve used jQm yourself, let me know how you found it first time around.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?