The jQuery Mobile Framework allows developers to build mobile websites in the same way that they would build websites for desktop browsers. jQuery Mobile is a touch-optimized web framework for smartphones and tablets. It acts as a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement and has a flexible, easily themeable design. To ensure cross-browser/-device compatibility, jQuery Mobile is built on clean, semantic HTML.

This blog post just touches the tip of the iceberg by listing some key features, supported platforms and the basic mobile page structure and by sharing some useful links. The use and role of the jQuery Mobile framework in developing mobile websites is huge. Read further to learn more about this awesome framework.

Key features:

• Built on jQuery core for familiar and consistent jQuery syntax and a minimal learning curve
• Compatible with all major mobile & desktop platforms – iOS, Android, BlackBerry, Palm WebOS, Windows 7 Mobile, Nokia/Symbian, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers
• Lightweight size – Small file sizes (about 20kb compressed for all mobile functionality) and minimal image dependencies for faster load times
• HTML5 Markup – for fast development and minimal required scripting
• Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms. For newer mobile platforms, it leads to a rich installed application-like experience.
• Automatic initialization – All jQuery Mobile widgets found on a page are automatically initialized by using HTML5 data-role attributes in the HTML markup to act as the trigger
• Accessibility features – such as WAI-ARIA ensure that the pages work for screen readers (e.g., VoiceOver in iOS) and other assistive technologies
• Touch and mouse event support – New events streamline the process of supporting touch, mouse and cursor focus-based user input methods with a simple API
• New plugins – UI widgets enhance native controls with touch-optimized, themable controls
• Powerful theming framework – Makes it easy to build highly branded experiences

Supported Platforms

At this stage (Beta 2 release), jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet and e-reader platforms. In addition, older browsers and feature phones are also supported because of its progressive enhancement approach.  Supported platforms include iOS, Android 21.- 2.3, Android Honeycomb, Windows Phone 7, BlackBerry 6.0, Nokia Series 60, Plam WebOS, Firebox Mobile, Opera Mobile and Kindle 3 among smartphones and tablets; and Chrome, Firefox, IE and Opera Desktop among computer browsers.

Mobile page structure

The standard structure of a web page using jQuery Mobile is written in the following lines. Each page is just a div with the attribute data-role set as “page.” Any valid HTML markup can be used within a page, but divs with data-roles of “header,” “content” and “footer” are used most often. An HTML file can also contain multiple pages that are loaded together by stacking multiple divs with data-role=”page.”

<div data-role=”page”>
<div data-role=”header”>…</div>
<div data-role=”content”>…</div>
<div data-role=”footer”>…</div>
</div>

There are many cool features about jQuery Mobile framework, such as Auto Initialization, Page Linking, Theming, Form Elements, etc. Apart from a minimal learning curve (if you are familiar with jQuery), jQuery Mobile takes on so much of the functionality for which we’ve been creating custom code. With conventional jQuery, developing a mobile website often means handwriting code to load pages using Ajax, creating animations to style elements and make the site feel more like a native app and using a lot of images to achieve the desired look and feel – not to mention making sure that it works consistently across all major mobile devices. jQuery makes a developer’s life so much easier: especially with the recent awareness and popularity for “Going Mobile” with your business, this framework is worth taking a deeper look at because it can save a lot of time, code and overhead.

You can read more about jQuery Mobile framework and how to use it for the best in the following links:

• http://jquerymobile.com/test/docs/about/features.html#/test/
• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
• http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/
• http://www.ibm.com/developerworks/web/library/wa-jqmobile/
• http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/

Dhawal Sehgal is a Programmer at Domus, Inc., a marketing communications agency based in Philadelphia. For more information, visit http://www.domusinc.com. For new business inquiries, please contact CEO and founder of Domus, Inc. Betty Tuppeny at betty.tuppeny@domusinc.com or 215-772-2805.