Mobile Boilerplate 1.0 has just launched, providing developers with a trusted template for building mobile Web applications. The site provides templates and documentation that can help developers create cross-platform mobile Web applications which work on modern-day smartphones, but also offer fall-back support for older BlackBerry, Symbian and Windows Mobile devices. The project itself is not a standalone framework, but works with jQuery Mobile, Sencha Touch, Phonegap and Appcelerator.

The homepage for the project showcases two hilariously, but accurately, titled lists: "Why It is Awesome" and "Why It is Aweome-er." Both detail the many features provided by this new toolkit, such as:

  • Cross-platform compatible (Android, iOS, Blackberry, Symbian)
  • CSS class to target IE Mobile 7
  • Home screen icon (Android, iOS, Symbian)
  • Cross browser viewport optimization for Android,iOS,IE,Nokia,Blackberry, Opera
  • Optimized viewport scaling (Android, iOS, Mobile IE, Blackberry, Opera)
  • Option to enable iOS start-screen in full screen mode
  • Better font rendering on IE Mobile
  • Adaptable markup and CSS skeleton
  • CSS stylesheet for low-end devices
  • Mobile sitemap
  • Mobile MIME type support
  • Build tool for mobile
  • Integrates well with PhoneGap and Appcelerator

And then, the "awesome-er" features like:

  • HTML5 offline caching for smartphones
  • Hide URL bar to maximize screen area
  • Button clicks that don't wait for the default 300ms delayed click event
  • Textarea autogrow
  • Hide Safari browser chrome
  • Mobile bookmark bubble
  • Browser Database Wrapper API
  • Robust optional User Agent Detection in .htaccess
  • Mobile optimized default CSS
  • Media queries polyfill for Windows Mobile
  • Google Analytics for low end mobile devices

Version 1.0 of the toolkit offers two different downloads - the documented version with hints and links and the comment-free version. The project is also available on github here.

Not a Framework & Not a "Build Once, Deploy to 1000+ Devices" Solution

To be clear, the Mobile Boilerplate is not meant to be a "build once, deploy everywhere" solution, but instead offers a set of best front-end (markup, CSS) practices for mobile Web developers to utilize in order to leverage the features of high-end smartphones like those running Android or the iPhone, for example, while still providing some basic support for older Web browsers.

Interested developers can learn more by visiting http://html5boilerplate.com/mobile/.

And for more inspiration, there's a thread on Quora listing several good examples of HTML5 mobile websites here.