Review: Free mobile-friendly Web design frameworks
Twitter Bootstrap, HTML5 Boilerplate, 52Framework, and 320 and Up take the sting out of building websites for both large and small screens
Senior Writer, InfoWorld |
HTML5 Boilerplate
It's tempting to say HTML5 Boilerplate has everything you need. I'll play it safe and say it has just about everything you need, and maybe a few things you didn't realize you did. It's freely available under the MIT license.
Boilerplate's developers bill it as "the professional frontend developer's base HTML/CSS/JS template for a fast, robust and future-safe site." An important difference between Boilerplate and Bootstrap, for instance, is that Boilerplate doesn't come with an out-of-the-box look and feel. It's for Web developers who want to create a look and feel from scratch, preferably with a good pre-engineered foundation.
The way Boilerplate is built, and especially how it's optimized, reflects a strongly developer-centric attitude toward HTML. A designer can build on top of Boilerplate without worrying that her design will cause Boilerplate to degrade in efficiency or break the backward compatibility (IE6, for example) built into the framework. Pages are meant to load fast, asynchronously, and without blocking elements.
Like Bootstrap, one of the best things about Boilerplate is that it's built with both mobile and desktop browsers in mind, with utility classes that require minimal work to support different screen sizes. Boilerplate has also been designed with some thought about how to best optimize it for different servers -- IIS vs. Apache, for instance -- and so comes with best practices for different server configurations.
Boilerplate can be customized via an interactive online utility named Initializr (which can customize Bootstrap as well). You start by selecting either a "classic" or "responsive" version of the template, with the latter tuned to provide fluid resizing of elements. The "responsive" version is probably the best place to start, since just about any device worth its salt will be able to use it, and it'll provide that much more utility automatically. You can also incorporate Modernizr or HTML5shiv for backward compatibility, automatically include Google Analytics code, and so on.
Another nice thing about Boilerplate is the amount of third-party modification and integration. WordPress developers can choose from a whole slew of themes built on Boilerplate; various third-party forks of Boilerplate have taken the basic design and built on top of it in various directions; and countless integrations exist for other frameworks -- Rails, the Google App Engine, Drupal, Django, CakePHP, Node.js, and a whole lot more. The documentation is a plus too. The project's maintainers have gone out of their way to create a solid, step-by-step guide to most every aspect of deploying and modifying an HTML5 Boilerplate-based site, so you're not just left to unpack a .ZIP file and cobble the pieces together yourself.
I mentioned how Boilerplate comes off as being a bit more of a blank slate than other layout frameworks, but that doesn't mean it's that much less useful. It just demands more of an active hand if you're creating something with it. I liked the canned examples provided by Bootstrap in the standard download because they give you a much more immediate, hands-on idea of what can be done with the framework.
