Review: Free mobile-friendly Web design frameworks

Twitter Bootstrap, HTML5 Boilerplate, 52Framework, 320 and Up take sting out of building websites for both large and small screens

By Serdar Yegulalp, InfoWorld |  Mobile & Wireless, 320 and Up, 52Framework

A Bootstrap sample page at two different widths. Note how various elements, such as the top menu, reflow and reorganize themselves automatically.

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.


Originally published on InfoWorld |  Click here to read the original story.
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question