With the swift rise of smartphones and pad-style computers (particularly the iPad), Web applications designers have faced yet another challenge: How to present Web content on the new mobile devices?
The old standard, Wireless Markup Language (WML), has been around since 1998 and was designed for devices with only text rendering and was succeeded by a number of other markup languages. While these standards became progressively more capable
Today’s mobile devices are a completely different proposition offering large, high-resolution graphic displays fronting processors that are orders of magnitude more powerful than we could have ever expected them to become in so short a time.
While this increased display and processing power allows, in theory, for easy and effective rendering of any online Web content, the usually limited connection bandwidth and most often smaller screen real estate means that for Web sites to be effective, they must be optimized for download, rendering, and readability performance.
To this end, improved markup languages only address one side of the problem. The other side is how to capitalize on the now advanced mobile browser component to streamline client-side presentation.
A powerful solution to the client-side presentation problem is now available from the geniuses behind the jQuery JavaScript library that I discussed here in the Network World Web Applications Alert newsletter a few weeks ago.
This new free and open source tool is another library called jQuery Mobile which its authors describe as a “Touch-Optimized Web Framework for Smartphones & Tablets” and the 1.0 Alpha 1 version was recently released.
JQuery Mobile is lightweight framework that provides a consistent user interface across all supported devices including Android, iOS, Blackberry, Windows Phone, palm WebOS and Symbian platforms as well as the lesser known Samsung bada, Maemo, and MeeGo platforms. That said, there are currently significant differences in support for specific platform versions.
What jQuery Mobile offers is markup-driven page and behavior configuration “for fast development and minimal scripting”, “automatic initialization using HTML5 data-role attributes in the HTML markup”, accessibility features such as WAI-ARIA are also included to ensure that the pages work for assistive technologies such as screen readers (e.g. VoiceOver in iOS), “normalized events streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API” and a theming framework and “ThemeRoller application make highly-branded experiences easy to build.”
The jQuery Mobile demos are very impressive and work well on the small screens of smartphones as well as on the much larger screen of the iPad.
The actual jQuery Mobile library is only 12KB and the associated cascading style sheet that defines the user interface is a further 6KB. To use jQuery Mobile you simply need to include the following lines in your Web page header section:
You’ll note that these files are hosted, for free, by a content delivery network, although if you prefer, you can host them on your own server.
JQuery Mobile is amazing and if you’re developing your Web applications for the mobile market this is a tool you absolutely need to check out.
