October 2012

Volume 27 Number 10

Cutting Edge - Mobile Site Development, Part 5: jQuery Mobile

By Dino Esposito | October 2012

In this column I’ll share some thoughts about jQuery Mobile, an increasingly popular mobile technology.

As more and more Web sites are flanked by specialized sites to serve mobile device users, an equation takes form in the minds of many developers and managers. Simply put, it sounds like the following: If you love jQuery, then you’re going to love jQuery Mobile, too. Fact is, a lot of people (including me) love jQuery, so potentially a huge number of developers would be inclined to use jQuery Mobile as the default choice for any mobile Web development without any further thinking.

I admit I followed this pattern exactly when I started mobile development. Sometimes it worked; sometimes it didn’t. And, perhaps more important, sometimes I thought it worked, but in the end I didn’t really get what my customers were looking for.

Mobile development is not simply a branch of Web development. For the most part, it doesn’t succeed by adapting (well, mostly simplifying) what you already have, whether that be use cases, layout, graphics, scripts or other related technologies. Well-done and cross-device mobile development is a true paradigm shift where the UX comes first and new types of professionals show up: information architects, interaction designers and content strategists. Mobile software is often designed and approved through mockups and then simply implemented, showing data at a given position and in a given format.

But note that technology shouldn’t dictate how you achieve your business needs; technology should only be a means to implement your immediate development goals. It may sound like a fairly obvious, foregone statement, but—let’s be honest—how many times have you seen this rule violated? Have you ever heard about the “Pet Technology” anti-pattern? You can read about it at bit.ly/OvJdx0. Sometimes it happens that a given technology is picked up for no compelling or business-oriented reason. Likewise, sometimes it happens that a given technology is picked up for the wrong task—or, perhaps worse yet, its use leads to a less-than-ideal approach for a given task.

In a today’s rapidly changing mobile world, putting any technology ahead of UX and strategic considerations is a huge risk. In mobile development, use cases and vision come first, and technology is only a means—as it should always be!

Now I’ll focus on the main subject of this column, jQuery Mobile, whose strong and weak points are often measured on a scale that counts what you can do instead of what you want to do. You can read more about jQuery Mobile at jquerymobile.org.

jQuery Mobile at a Glance

Overall, the most appropriate definition for jQuery Mobile comes from its Web site. It explains that jQuery Mobile is an HTML5-based UI system for all popular mobile device platforms. Furthermore, it says the jQuery Mobile code is built with “progressive enhancement” in mind, and results should have an easily “theme-able” design. In addition, jQuery Mobile is built on top of the rock-solid foundation of jQuery and jQuery UI. However, many professional developers assume that jQuery Mobile is a lightweight version of jQuery optimized for the constraints of typical mobile devices.

In truth, what’s on the homepage of the jQuery Mobile site is precisely the true essence of the library. jQuery Mobile is a framework that’s easy to use for many developers—or, at least, it turns out to be far easier to use than most of the other frameworks out there for building mobile solutions. It’s a framework that helps with the UI of views that work well when displayed on mobile and touch-based devices. Not only are touch-based (and subsequently mobile-oriented) views easy to create, but they’re also easy to tie together to form a navigation system with transitions and effects. Views created leveraging the facilities of jQuery Mobile work well with smartphones and to some extent also with older devices, leading to the key question: Is this really enough for your mobile Web development?

Where’s the Mobile in jQuery Mobile?

Personally, I’ve used jQuery Mobile for building the UI of a Web-based application aimed at laptop or tablet users—no phones whatsoever!—and it worked beautifully. It was at this time that I first envisioned some sort of close relationship between jQuery UI and jQuery Mobile. 

As surprising as it may sound, let’s raise the point: Is jQuery Mobile really a framework for mobile development?

Based on the description of the technology on jquerymobile.org, you should consider jQuery Mobile as a primary tool for the UI of touch-based front ends. A touch-based front end is likely a mobile device (that is, tablet or smartphone), but mobile Web development has a lot more facets than just the front end.

Just using jQuery Mobile for arranging some UI that fits nicely in the small real estate of a device screen may be an approach that works in simple scenarios. If taken as an overall, comprehensive approach, however, it may be a bit simplistic.

Let’s review what you may find in a mobile solution that goes beyond the capabilities of jQuery Mobile. First and foremost, you should have a clear vision of the site you’re building, expressed through a great selection of use cases, a well-defined data flow between server and client, and, more important, a list of the mobile profiles you intend to serve. A mobile profile is a generic term to indicate the different families of devices your site intends to serve: smartphones, tablets, laptops, smart TVs and similar devices built in the past few years or so, or any cell phones that can connect to the Internet.

Not every mobile site needs to support multiple device profiles, even though this necessity is becoming increasingly stricter and more urgent. Supporting multiple device profiles means dealing with different views and dynamically adjusting the target response based on the device characteristics and capabilities. In my last column (msdn.microsoft.com/magazine/jj618291) I presented an approach to multi-serving based on a server-side device description repository such as Wireless Universal Resource File, or WURFL (see wurfl.sourceforge.net). What kind of out-of-the-box support do you get from jQuery Mobile in this regard?

jQuery Mobile and Responsive Design

Responsive design is the framework’s ability to provide a made-to-measure version of a page for specific devices. Earlier in this article, quoting the jquerymobile.org site, I mentioned progressive enhancement as one of the pillars of the jQuery Mobile framework. Progressive enhancement is a bottom-up Web design pattern with which you create pages progressively enhancing a core that works on any browser. Progressive enhancement is the opposite of “graceful degradation,” which opts for a top-down approach: Define the best experience and degrade as gracefully as you can if the browser misses some required capabilities. Progressive enhancement can be considered a pattern for making your Web experience more responsive.

Note that making a Web experience more responsive may include offering some ad hoc mobile support, but being responsive on the browser doesn’t necessarily mean focusing on mobile clients.

 So by using jQuery Mobile, you may not be worried about detecting device capabilities, as the library guarantees that the output would also work on down-level browsers. Let’s review the core of the jQuery Mobile implementation of the progressive enhancement pattern.

Browser Partitioning

The jQuery Mobile library supports three browser profiles—named A, B and C—where A-grade browsers receive the most enhanced markup the library can serve and C-grade browsers just receive plain HTML content with no extra features, such as styles and AJAX. Each profile is characterized by a list of capabilities that browsers provide with respect to the library’s needs. For example, support for CSS media queries is a key capability in jQuery Mobile, and it’s a fundamental requisite for a browser to fall into the A group. In addition to CSS media queries, A-grade browsers support JavaScript, AJAX and full Document Object Model (DOM) manipulation. A-grade browsers are where the library operates at its fullest, and the list of A-grade browsers is updated frequently.

The basic difference between A-grade and B-grade browsers is the lack of support for AJAX. On B-grade browsers, jQuery Mobile stops using AJAX for page transitions and requests. So you might expect to be able to carry out operations successfully, but with a less-pleasant experience.

Finally, C-grade browsers are mostly legacy browsers with no support for media queries and limited support for JavaScript, CSS and DOM manipulation. On C-grade browsers, no standard DOM manipulation is applied to page elements, and plain HTML is served. The most updated matrix of browsers and grades is available at jquerymobile.com/gbs. Figure 1 and Figure 2 show the rendering of the same page on A-grade and C-grade browsers.

Figure 1 A Sample Page on an A-Grade Android Device

Figure 2 A Sample Page on a C-Grade Android Device

Reasonably, the jQuery Mobile library is not optimized for B-grade and C-grade browsers. As Figure 2 shows, your users may still receive a good treatment, but, more important, you have no control over that. The HTML in Figure 1and Figure 2 is fairly simple and doesn’t contain more than an unordered list. What if you have a much more sophisticated page with images, pop-ups, text blocks of various length and format, and buttons?

jQuery Mobile owes its nice graphics (as shown in Figure 1) to intensive DOM manipulation and AJAX features. Outside the realm of A-grade browsers, jQuery Mobile only guarantees that a page is viewable. You may find more abrupt transitions (no AJAX) and simpler DOM manipulation, or there may be a complete fallback to plain HTML. Regardless of the fact that jQuery Mobile can serve up to three distinct views of the same page, the basic HTML remains the same and the transformation rules are fixed and out of your control.

 The bottom line is that if you need to support more than A-grade browsers, you’d probably be better off dropping jQuery Mobile browser grading and introducing your own logic to handle browser profiles and ad hoc views (see Figure 3).

Figure 3 Targeting Different Grades of Browsers

The sample code in last month’s column provides an example of this approach.

To summarize, jQuery Mobile is essentially a UI framework that does a great job of letting you use familiar HTML elements when you author a view. Next, it transforms plain HTML elements into semantically equivalent objects that work well in a touch-based environment and fit well on small screen sizes. jQuery Mobile implements the progressive enhancement pattern and doesn’t leave any browser behind. However, this doesn’t mean that by simply adopting jQuery Mobile you can effectively address the device-fragmentation problem—the large amount of significantly different mobile browsers and devices. Sometimes you’re required to offer completely different views to different class profiles and even ensure that you partition browsers according to different logic. jQuery Mobile embraces the logic of responsive Web design and focuses on CSS media queries. As explained in my July 2012 column (msdn.microsoft.com/magazine/jj190798), CSS media queries are great to use with rich devices (tablets, laptops, smart TVs and perhaps smartphones) where all you want to do is reposition and hide elements that you can’t display. Media queries require rich browsers and are not a mobile-specific feature.

I suggest that before you embrace jQuery Mobile, you ask the following question: Is it OK to designate certain smartphones (or analogous devices) as the entry point for really enjoying your site? If yes, then jQuery Mobile is more than OK for you. Otherwise, take it further and explore other options.

Dino Esposito is the author of “Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) and “Programming ASP.NET MVC 3” (Microsoft Press, 2011), and coauthor of “Microsoft .NET: Architecting Applications for the Enterprise” (Microsoft Press, 2008). Based in Italy, Esposito is a frequent speaker at industry events worldwide. Follow him on Twitter at twitter.com/despos.

Thanks to the following technical expert for reviewing this article: Christopher Bennage