metal letters reading LIBRARY on red brick background

Better Mobile Website Development Using the jQuery Mobile Library

The familiar jQuery library expands to encompass mobile devices

The history of software is replete with fierce competition among technologies and products. People argue vehemently about which technology will eventually overtake the other. In 20 years of business, I've seen this scenario play out quite a few times. These days, a popular debate is raging about whether mobile websites are preferable to native mobile applications.

For a mobile website, you write your code once using JavaScript, HTML, and maybe HTML5. Unlike a mobile application, your graphics options for a mobile website are severely limited, and the hardware used to access the site is out of your control. The overall user experience with a mobile site, and in some cases the site's performance, will likely be different than if the content were in the form of a native mobile application. Unless the mobile browser supports HTML5 and you code against local storage capabilities, a mobile website requires more bandwidth and more frequent round trips. On the other hand, the downside of mobile apps is that you must create a native application for each mobile platform you intend to support. Thus, your effort and cost are multiplied by the number of platforms for which you create native apps. This debate is definitely not easy to settle, and I heartily recommend making a decision strictly on a per-project basis.

Now that you've developed your first mobile app in "Build a Client-Side Mobile Web App Using jQuery Mobile," I'll now explore the position of the mobile-website camp and introduce the current preliminary version of a library that promises to make mobile site development easier and more productive.

jQuery Mobile

As obvious as it may sound, the jQuery library changed a few things in web development. Foremost is its contribution to making AJAX and JavaScript an integral part of the web experience. Today, when we think of a web interface, we think holistically of client-side and server-side functionality, as well as of out-of-band service calls. The creators of jQuery didn't invent JavaScript or AJAX, but their library made these languages so easy to use that everybody assimilated the library and its programming model. To measure the success of jQuery, just think of what the folks at Microsoft did with it: They stopped development on their own ASP.NET AJAX extensions and embraced jQuery.

jQuery Mobile and its parent library, jQuery, are so closely related that the expression "chip off the old block" perfectly summarizes the affiliation between the two. jQuery Mobile just inherits from the parent jQuery library and adapts this library to the world of mobile development. Therefore, in order to use jQuery Mobile, you must also reference the jQuery library.

The main purpose of the jQuery Mobile library is to enable cross-platform, cross-device, and cross-browser programming of mobile websites. The library shares the same architecture and programming model as full jQuery. (Note that this article is based on an Alpha version of jQuery Mobile. It is likely that more features will be available and that a larger group of browsers will be fully supported by the time this article goes to print.)

Current Browser Compatibility

Any JavaScript library relies on browser capabilities to offer its services to developers. Primarily, a JavaScript library shields developers from the differences in the underlying browsers. If you think the number of desktop browsers is fairly large, the number of browsers in the mobile world is quite staggering, and the differences in functionality among them are significant. Developers learn a unified API that works across a large number of browsers. For example, a significant part of the jQuery code base deals only with browser compatibilities and performs tricks to ensure that users get nearly the same experience regardless of the browser. JavaScript libraries are not magic, so you should not expect them to make the same content in different browsers look exactly alike. However, most libraries are quite successful in providing a similar experience.

The jQuery Mobile library has one basic requirement: Browsers must support media queries. A media query is the feature that a page author uses to limit the scope of a style sheet. In this way, the look and feel of the page content can be adapted to devices based on their specific capabilities. A media query is expressed through the media attribute in the element, as in the following example:



The content of the media attribute is an expression that the browser must be able to parse and understand. The preceding example uses a mobile-specific style sheet if the device width is less than 768 pixels (typically, the width of a tablet device). Media queries are common in the jQuery Mobile style-sheet file.

In jQuery Mobile, browsers are graded A, B, or C, based on the capabilities they provide with respect to the library's needs. A-grade browsers typically offer full programming support and can execute JavaScript code. They also offer Document Object Model (DOM) manipulation and can apply Cascading Style Sheets (CSS) styles. These browsers are tested regularly and basically represent the group of browsers that the library is built against. There's no guarantee, however, that 100 percent of the library's features are supported on all A-grade browsers.

B-grade browsers are capable and powerful browsers, but they have a limited market share that is not sufficient to justify regular testing. Finally, C-grade browsers don't support media queries. When operating through a C-grade browser, jQuery Mobile just falls back to plain HTML and basic CSS. No DOM modification is applied to page elements. Figure 1 charts the mobile browsers that jQuery Mobile currently supports and shows their rankings.

Grade Native Browsers Opera Mini Opera Mobile fennec
Figure 1: jQuery Mobile–supported browsers
A iOS, Android, WebOS, BlackBerry 5 and later, Symbian iOS 3+, Windows Mobile, BlackBerry 5+, Symbian Android, Symbian Android
B Nokia Maemo Nokia Maemo    
C BlackBerry 4.x, Windows Mobile Android    

For more details about browser support, you might want to check out the jQuery Mobile Graded Browser Support page. You'll notice that jQuery Mobile works well with most native browsers on more recent mobile platforms. Opera Mini is probably the best browser for older devices. Windows Phone 7 is not supported yet, but as you can guess, support will be coming soon.

Pearls of HTML5

In an attempt to provide a native mobile look and feel, jQuery Mobile applies changes to plain HTML elements, adding style information and bitmaps. To do this, jQuery Mobile requires a CSS style sheet along with a link to the parent jQuery library. In Figure 2, you can see the header that is ultimately necessary for any page that will use jQuery Mobile.




   
   
   

The example shown in Figure 4 assumes that the user will download scores of sport matches. The text of the list item contains the names of the teams. The icon indicates whether or not the match was played, and the rightmost text displays the score. It's important to remember that when you populate a UI element programmatically, you must send it a message to activate a listview role. This behavior is no different from what the jQuery UI forces you to do with its rich widgets.

Events

jQuery Mobile adds a bunch of new events to the rich list of events supported by the parent jQuery. New events that are specific to the mobile interaction are tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop, and orientationchange. For each element marked with the role of page, you can have events like pagebeforeshow, pagebeforehide, pageshow, and pagehide. In spite of the name and the gesture, these events are in no way different from other jQuery events: You bind your handlers to them by using live() or bind() functions.

Testing and Final Touches

Now that you know enough to start practicing with jQuery Mobile, let's address a final, important point. How can you comfortably test your pages? You might want to use Visual Studio or WebMatrix to create a web project and, at your leisure, mix plain HTML pages with ASP.NET Web Forms or with MVC views. You can freely integrate jQuery Mobile in these pages and run them. When you view these pages in Internet Explorer, you won't see much. Most of the time, all you get is an old-fashioned, scanty HTML page.

Internally, jQuery Mobile relies on the WebKit engine, so you'll certainly get much better results if you switch to Safari or, better yet, Google Chrome. I use Chrome for my testing and encounter a nearly identical experience as when I test on a real device. Another option is, of course, to use emulators, as long as they let you test pages served from a localhost server. However, I get the true sense of my page only after I've tested it on a real device. Testing entails deploying sources on an Internet-based server—which isn't really an easy thing to do but provides the most realistic scenarios.

Now that we've scouted out the mobile website camp, try putting these techniques into practice to make your mobile site development easier and more productive in our next article where we will show you how to convert an existing website into a mobile website.

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish