Developers typically have their own template libraries, built from scratch or commercial, to jumpstart their projects. In this section, I provide a short overview of some useful HTML templates you can evaluate as your blueprint, libraries, and frameworks you can easily integrate within your projects.
Note
A library is essentially a set of functions that you can call, these days usually organized into classes or files. A framework embodies some abstract design, with more behavior built-in. Martin Fowler discusses further the difference between a library and a framework in his article available at http://martinfowler.com/bliki/InversionOfControl.html.
This is a very clean, mobile-friendly HTML template that includes an optimized Google Analytics snippet, placeholders for touch-based device icons, the library Zepto (a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API), and the Modernizr feature detection library (a library that uses object detection techniques to discover if a feature is available before you use it, allowing for graceful degradation or progressive enhancement of web pages).
You can download the HTML5 Mobile Boilerplate template from the official website available at http://html5boilerplate.com/mobile/; for updates or to get involved follow the project on GitHub available at https://github.com/h5bp/mobile-boilerplate.
If you want to download a customized version of HTML5 Mobile Boilerplate, which enables you to select which templates to use, the JavaScript libraries to include, and so on, go to http://www.initializr.com/.
You've probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. It's a hot topic right now and the Foundation framework's most important feature is the responsiveness of its layout mechanics.
Furthermore, Foundation provides a good selection of templates to use for the most common sections of your app; you can choose the templates you want when downloading the framework from http://foundation.zurb.com/download.php.
The strengths of Foundation are:
- A 12-column, percentage-based grid with an arbitrary maximum width
- Image styles that disregard pixels—Foundation images are scaled by the grid to different widths
- UI and layout elements including common pieces such as typography and forms, as well as tabs, pagination, N-up grids, and more
- Mobile visibility classes—Foundation lets you very quickly hide and show elements on desktops, tablets, and phones
To keep up-to-date with Foundation and get the latest builds, follow the GitHub project available at https://github.com/zurb/foundation.
Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, charts, navigation, and other interface components, as well as optional JavaScript extensions.
This project is one of the most popular on GitHub; it's very well organized and seems born to build apps. In fact, it includes basic CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers, and so on.
It's pretty easy to start working with Bootstrap because it uses jQuery. To download Bootstrap you can refer to the project download and customize page available at http://twitter.github.com/bootstrap/customize.html, if you want to download a template for Bootstrap you can refer to the already mentioned www.initializr.com website.
The jQuery Mobile framework is 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.
jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach (for details go to http://jquerymobile.com/gbs/).
The main features of jQuery Mobile can be summarized as follows:
- Cross-platform, cross-device, and cross-browser
- UI optimized for touch devices
- Themeable and customizable design
- Usage of nonintrusive semantic HTML5 code only
- AJAX calls automatically load dynamic content B
- Lightweight (12 KB compressed)
- Progressive enhancement
- Accessible
To download the last stable version and to keep up-to-date with the project, refer to the official website available at http://jquerymobile.com where you can find useful examples and a tool to create your own themes at http://jquerymobile.com/themeroller/.
It's pretty hard to say which is the best library to use. Most of the time, I have to say that it depends on the features you have to implement and even more so on the nature of your app. For instance if the app is just for mobiles, then you can decide to go lighter and use HTML5 Mobile Boilerplate; on the other hand, if the app is intended for the Web and mobiles, then a more sophisticated library can be the right choice.
Always keep in mind that your goal is to find a balance between built-in features and performance because mobile devices are far less powerful than a desktop.