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.
