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

Designing for the Web isn't what it used to be -- thank goodness! HTML5, CSS3, and advances in JavaScript make it possible to do things today that yesterday's Web designers could only dream about.

Of course, Web design has also become much more complex and painstaking, so Web developers welcome with open arms any feature that saves them time and effort. That explains the proliferation of Web layout and design frameworks, tools that programmers and designers alike can use as starting points for their sites.

[ Also on InfoWorld: Review: WAMP stacks for Web developers | Get the lowdown on all the key HTML5 specs with InfoWorld's megaguide to HTML5 | Keep up with the latest developer news with InfoWorld's Developer World newsletter. ]

Web frameworks don't completely replace the heavy lifting required to make a good site design, but they save a designer the effort of building the hardest and most complicated parts of a site, as well as behaviors that are tiresome to reinvent. These days, that means not only a consistent theme, but also support for advanced HTML5 features or ways to handle both mobile and desktop browser rendering in the same design.

Here's an overview of some of the most useful or familiar Web frameworks, with notes about their licensing, what's included in them, and what projects they may be best suited for. A full rundown of all the frameworks in use or development would be prohibitive; think of these as the highlights, standouts, and major examples of how things are done.

If you're starting from a completely blank slate and you want a canned look and feel that saves you the trouble of having to concoct one yourself, it's hard to go wrong with Twitter's Bootstrap. HTML5 Boilerplate is best if you're constructing something totally anew or you want to pour an existing design into a new framework for easier manipulation. 52framework is most useful for its HTML5-specific extensions, and both 320 and Up and the Less Framework are handy if you're building something with a tight focus on small-screen devices.

A quick note on the scoring below: Features refers to the overall bundle of capabilities supported directly by the framework. Setup reflects how easy and intuitive it was to get the files, unpack the whole thing, and deploy it on a server. Configuration reflects on the ability to make changes, including the use of online tools that let you create a deployment bundle. Finally, Extras refers to anything useful that's not part of the core framework, such as Bootstrap's plug-in architecture, Boilerplate's integrations with frameworks like Rails and Node.js, and 320 and Up's Font Awesome and test scripts.

Twitter Bootstrap If you want to start with both a Web framework and a design -- a clean, appealing design at that -- Bootstrap is one of the best places to begin.

Originally developed by Twitter as a framework for its own GUI, Bootstrap has been released as an open source project under the Apache License 2.0. Its success, and value, is reflected in the sheer number of sites that have made use of it (the developers maintain a gallery of "Bootstrapped" sites), as well as the galaxy of third-party themes and templates built with and on top of it.

Bootstrap's basic page layout is a 12-column grid, 940 pixels wide by default; all widths are adjustable properties. Elements can be defined by how many columns they take up by default, but can also respond dynamically as the browser is resized. Narrow the browser window or launch a Bootstrapped site on your phone, and everything reformats itself to fit.

The default top bar, for instance, normally contains space for menu elements. Narrow the viewport and those elements are hidden from sight, but can be revealed with a click. For further tweaking, Bootstrap provides CSS classes such as .hidden-phone or .visible-desktop to allow elements to hide or be revealed when your site is opened on different devices and at different screen resolutions. Bootstrap can take advantage of the @media attribute in CSS for further formatting hints as well.

A big part of Bootstrap's appeal is the number of commonly used UI elements that are already defined in the framework: buttons and toolbars, alerts, progress bars, typography controls, and so on. It's a great timesaver. You don't have to build them from scratch or even expend the effort to make them look consistent.

Most of those UI elements are easy to implement since they're just variants of existing HTML elements. Drop-down navigations, for instance, are nothing more than items in an unordered list (the <UL> tag) with class markup and one or two custom attributes. This means you can use many stock HTML editing environments (such as Dreamweaver) to produce Bootstrap templates without too much trouble.

Bootstrap is built around a few open source third-party components you might already be using. Most prominent is LESS, a stylesheet-extension system for CSS that allows the use of variables, rule nesting, and a number of other powerful features not available in vanilla CSS. Also noteworthy is a slew of plug-ins that use the ever-popular jQuery to add functionality like content carousels, advanced button behaviors, type-to-search functions, and many more.

There are a number of ways to get started with Bootstrap. You can download a full package that contains all the components and some demonstration pages, which can be customized by hand as needed. You can also download a custom Bootstrap package that contains only the pieces you need, if you're trying to keep things slender. And if you're a programmer looking to extend Bootstrap under the hood, you can fork a copy of the project from GitHub and work on it that way.

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.

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.

The documentation for HTML5 Boilerplate is excellent. Most of the crucial setup, configuration, and under-the-hood information is indexed here for easy reference.

320 and Up Most design frameworks begin at the desktop level, then degrade gracefully for a smaller browser. 320 and Up works the other way around. It starts with a design meant for small screens (320 pixels, hence the name), then scales upward to a maximum of 1,382 pixels. To that end, 320 and Up is a useful starting point for designs where mobile devices come first -- and it's free under the Apache 2.0 license.

320 and Up owes a few details to Bootstrap, as it uses the latter's styles for buttons, forms, and tables. In fact, the raw design resembles an unstyled version of Bootstrap, but there are enough new features here to set 320 apart. For example, 320 includes CSS3 media queries for five basic increments of device screen size, so you can build hints into your design to work with those sizes. The framework also bundles LESS and SASS for programmable control over CSS and Modernizr and Selectivizr for backward compatibility with the dreaded IE6 through IE8. The creator also packed in a responsive typeface test suite and design test page to make the job of checking your work a little easier.

My favorite feature is Font Awesome, a font-based icon set that can scale to any size, originally developed for Bootstrap. Granted, you can add it to most any framework on your own, but having it bundled is a nice bonus.

320 and Up uses Bootstrap for many of its object styles. The difference? 320 has been built for designing mobile-first sites that scale up, instead of desktop sites that scale down.

52framework52framework bills itself as "the framework from the future," which in this case means support for HTML5, CSS3, and all the cutting-edge features associated with those things. 52framework is most useful for getting a leg up with advanced HTML5 features, especially the likes of video and local storage, and for having frameworks for handling form inputs. It's less effective for building a design that's both mobile- and desktop-friendly, since other frameworks here have more pieces for those tasks.

Most of the pieces inside 52framework should be familiar: It uses Modernizr and Selectivizr for backward compatibility, sports a grid-layout system, and provides a broad range of CSS3 property controls. What I found most lacking in 52framework was the documentation. Instead of textual documentation, as with Bootstrap and Boilerplate, you'll find a series of YouTube-hosted video demonstrations. They're useful as adjuncts to existing documentation, but not a substitute for it.

That said, there are demo and example pages that at least serve as quick references to the native styles in the framework, but a more robust option would be nice to have. I liked the included Photoshop and Illustrator design templates, which make it easier to use those programs to plan designs using the framework.

52framework is free under the Creative Commons CC-BY-SA 3.0 license.

52framework offers elegant support for HTML5 features such as video, local storage, form validation, and other client-side functions.

Less Framework, Frameless, and Golden GridIf frameworks as lean as Boilerplate or 52Framework still strike you as overkill, you'll be happy to know even more minimal options exist. The appropriately named Less Framework (MIT License) is a good place to start.

Less uses four basic layouts -- default/desktop, tablet, mobile, and wide mobile -- to adapt your content to a series of 68-pixel columns. The designer creates his content for the original wide layout, then uses CSS to define the smaller child layouts. Graceful degradation for older browsers, especially IE, is built in.

That's all there is to Less, apart from a couple of custom optimizations, such as a media query for Retina display devices. In the creator's own words, it "does not contain any pre-defined column classes, pre-compilers, or other wizardry. The point of it is to let everyone keep writing HTML and CSS as they always have, because everyone does it differently."

Less Framework's four basic layout modes use 68-pixel columns to adapt and reflow content.

A "spiritual successor" to Less Framework is Frameless, exemplied by its motto: "Adapt column by column, not pixel by pixel." Frameless (public domain) uses a fixed-width grid and adapts the content to fit into as many fixed-width columns as are visible in the browser. It, too, provides nothing more than the layout system and a few other pieces for getting a template up and running. You bring the rest.

Frameless uses a fixed-width grid with as many columns as can be fit into the display port.

Yet another variant is the Golden Grid System (MIT License), which sports 18 columns that are proportional across the width of the browser. Those columns telescope into each other for smaller-sized displays, with the spaces between columns also changing proportionally. Better still, font sizes can scale proportionally, so the vertical aspect of the page also adjusts with resizing. Again, very little is included -- just enough to get a design started.

Golden Grid uses 16 columns that can fold into each other. Eight are shown here, with an overlay for the designer that indicates where the columns and gutters are located.

This article, "Review: Free mobile-friendly Web design frameworks," originally appeared at InfoWorld.com. Follow the latest news in programming at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

Read more about application development in InfoWorld's Application Development Channel.

Comments

Comments are now closed

Optus 10 to launch next month after delays

READ THIS ARTICLE
DO NOT SHOW THIS BOX AGAIN [ x ]