Introduction

For the seasoned web developer, there’s no denying it, jQuery is one of the best and widely used JavaScript framework aside from ExtJS, Dojo, MooTools and Google Web Toolkit to name a few. According to BuiltWith.com, at the time of this writing, jQuery is the top JavaScript framework used with 44.01% of websites using it. With the Top 1 Million Websites indexed by BuiltWith.com, it is used by approximately 44.82% of internet websites, solidifying its stature as the best JS Framework in the world. And if you are curious, the 2nd most used JavaScript Library used is Facebook for Websites with a usage of 15.11%. Such a huge difference in numbers, it’s a landslide victory for jQuery. Combined with its ease of use, small memory footprint, cross-browser compatibility and its popularity, it’s no surprise that it is the ideal JS library for noobs and pros alike.

With the popularity of mobile computing, suddenly mobile browser shares skyrocketed from a small minority to an indispensable business consideration for major companies. Back then, mobile browsers were just a simple browser, very limited compared to mainstream desktop browsers. All they’re capable of doing is display WAP sites and simple HTML websites. Mobile browsers which can run WMLScripts were considered advanced then. As the mobile devices level-up, so are their capabilities. Smartphones in general, gained mainstream popularity, arguably because of the iPhone in 2007. As the devices gain more processing power, so are the possibilities that it can achieve. These phones are capable of displaying full websites instead of the usual stripped-down version of the page. They behave more of a mini-netbook with phone features.

jQuery Mobile

Enter JavaScript. Web developers wanted to incorporate JavaScript into their mobile websites since smartphones are now capable to do so. From simple client-side form validation to some jaw-dropping transition animations, the more interactive a site is, the more visitors it is likely to attract. With this in mind, it’s inevitable that JS is sure to stay in the mobile market. Like the desktop browser, it needs a JavaScript library to make development easier and more feature-rich. Here comes jQuery Mobile, a framework built on top of the already stable jQuery library. According to the jQuery Mobile overview, it can be described as:

Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.

Although the said framework only targets only smartphone and tablet web browsers, as long as the HTML mark-up is semantically correct, it will silently and discretely fallback to a plain HTML page. Probably the best feature of the library is transforming the differently-rendered pages from different mobile web browsers into a uniform, familiar touch-friendly user-interface.

The images above shows the difference in terms of rendering of a single webpage using an old mobile browser and a smartphone. We can notice a large difference in terms of style when viewing a website when jQuery Mobile is capable of running. And by simple analogy, we can say that customers and visitors alike are more likely to visit a mobile website that has better visual eye-candy, and therefore the website will get more traffic. We can also notice that the one with the framework is ergonomically-designed for touch-enabled phones. Notice the iPhonesque  design of the page? It almost blends seamlessly with the designs of the iPhone and Android interface, so users are almost familiar with it.

But why?

So what’s the point of using the framework when not all mobile phone is supported? Well for one thing, you aren’t given any kind of disadvantage if you use the framework. Let’s assume that most of your visitors who visit your site through mobile web browsers uses smartphones. When they see your site, they will be shown a clean, touch-optimized page designed especially for their devices’ capabilities. But when a visitor visits your site using a non-compatible mobile web browser, they would simply be shown a plain mobile webpage with almost no difference in content with your touch-friendly page. The good thing in here is that you won’t need to change any of your HTML code to suit these browsers. As I’ve said before, it falls back discretely to plain HTML when the browser used cannot run JavaScript. It’s a win-win situation for you!

I therefore conclude

jQuery Mobile is still in its alpha stage, meaning it shouldn’t be used for production websites, but rather for testing purposes only. As of this writing, the current version is 1.0 alpha 4.1. It’s still a bit far for a stable release, heck it’s not even on beta yet. But based on user responses, feedback is quite good. A few bugs are found and sprout everyday, but results are promising. Since it was built on top of the full jQuery framework, in my personal opinion, I think it is safe to use it for production on desktop websites. Yes, it runs perfectly on desktop browsers too! Your desktop websites inherits a few touch capabilities such as dragging the page to scroll down, cool huh? But as of now, we have to keep an eye on its development, and I’m sure we’ll still be surprised in what it can do. Next time, I’ll probably make a simple tutorial on how to incorporate jQuery Mobile in your pages, as if it wasn’t on the official documentation yet.