Today we’re pleased to announce the first alpha release of the jQuery Mobile project. jQuery Mobile is a user interface framework, built on top of jQuery, designed to simplify the process of building applications that target mobile devices.

We’ve made really good progress since we first announced the project two months ago. We’ve created a number of components, layouts, and theming tools to greatly simplify the process of building a mobile application.

There are two guiding principles of the jQuery Mobile project that differentiates it from most other offerings: It’s completely built on the principle of progressive enhancement and is designed to be functional in all HTML-capable mobile browsers.

Demos and Documentation

Features

Progressive Enhancement: jQuery Mobile is built completely around the principle of progressive enhancement: taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience. This means that your jQuery Mobile application will work in more browsers, guaranteed – even in mobile browsers that don’t support JavaScript (a regular occurrence).

For this first alpha release we’ve managed to cover support for many of the A-Grade browsers that we wish to support (such as iOS devices, Android devices, Blackberry OS 6, webOS, Fennec, and Opera Mobile). There are still bugs on those platforms and a few of the other platforms are failing pretty hard. We’re working to resolve these issues in time for the 1.0 release.

Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.

Accessibility: All jQuery Mobile components are ARIA accessible. They are keyboard navigable (on a desktop computer) and can be navigated using a screen reader. While at this very moment jQuery Mobile is highly targeted at mobile devices we hope to quickly grow the scope of the project to encompass many platforms: mobile, tablets, desktops, and beyond.

Simplicity: jQuery Mobile is completely markup-driven requiring no JavaScript configuration. This makes it incredibly easy to get started: Just open an HTML file, edit its contents, and you’ll have a fully-capable jQuery Mobile application in no time.

File Size: By utilizing the principles of progressive enhancement and leaning heavily on markup-driven configuration the file size of jQuery Mobile remains quite small. The JavaScript for the alpha release is only 12KB and the CSS is a mere 6KB. Very few images are used in the design of the framework (mostly icons) – instead making heavy use of CSS.

Theming: jQuery Mobile has a comprehensive theming structure built from the ground up to enable you to build capable web applications. This goes far beyond the styling system provided by jQuery UI and gives you the ability to truly adapt the styling of your entire application. For the alpha release all theme configuration must be done manually but for the final 1.0 release we’ll be providing a complete Themeroller tool for theming your application.

App-Capable: The usefulness of jQuery Mobile goes far beyond making impressive mobile web applications – you can also use it to build apps that can be purchased and deployed through an app store. We strongly recommend using PhoneGap as it gives you the full tools you need to deploy HTML/CSS/JavaScript applications to a mobile device.

Download

We provide CDN-hosted versions of jQuery Mobile for you to include into your site. These are already minified and compressed – and host the image files as well. It’ll likely be the fastest way to include jQuery Mobile in your site.

CDN-Hosted JavaScript:

• Uncompressed: jquery-mobile-1.0a1.js (86KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a1.min.js (12KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed: jquery-mobile-1.0a1.css (45KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a1.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

More details on how this works can be found in the page and layout documentation.

If you want to host the files yourself you can download a zip of all the files:

ZIP File:

• Zip File: jquery-mobile-1.0a1.zip (JavaScript, CSS, and images)

Contributing

Reminder: This is the first alpha release of the framework. There will surely be bugs in your platform of choice. The best way you can help us is to use it, file bugs, and even provide patches back. Please discuss issues that you encounter in the Developing jQuery Mobile forum.

We’re looking to do a few more preview releases during the next couple months leading up to the 1.0 release of the platform in January. Thanks for your help!

Thank You

We had tremendous amount of help from a variety of people and companies and would like to thank them:

Filament Group – For providing countless development hours to the project – taking it from a mere idea to a full-fledged framework in an incredibly short amount of time – they are super-human.

Palm – For providing us with finances, developers, and devices to test on. Palm is all about their webOS platform – which is completely designed around building HTML/CSS/JavaScript-based applications.

Research In Motion – For providing us with finances and devices to test on. They’re working on their Widget SDK and WebWorks platforms – a simple way of building Blackberry Widgets with HTML/CSS/JavaScript.

Adobe – For providing us with developers to help fix bugs and do testing. They’re doing some great things with jQuery Mobile and we’re really excited to see how they can push it forward.

DeviceAtlas – For providing us with advice and financial support. The DeviceAtlas folk have been doing mobile work for a long time now and have an incredible amount of insight into the platforms. They build tools to make it easier to practically deploy mobile web applications.

Mozilla Corporation – For providing us with devices to test against and for sponsoring the development of John Resig to work on jQuery and jQuery Mobile.

Nokia – For providing us with devices for testing. Nokia is working on a great platform for deploying web technology-based applications to Nokia devices.

Coming Soon

We have a number of components and features that we weren’t able to finish for the alpha release. We will be tackling them soon and they should be ready by the time 1.0 is ready.

• Date Picker, Time Picker
• Progress Bar
• Spinner
• Themeroller Support – jQuery Mobile is completely themable but we hope to make it even easier with the Themeroller tool.
• Tablet Optimization – Basic tablet support exists now but we’re looking to make some rather large improvements.