- April 2013
- December 2012
- November 2012
- October 2012
- September 2012
- May 2012
- April 2012
- October 2011
- July 2011
- June 2011
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- January 2009
by Brian Haveri, Development Team Lead
October 22, 2012
View the detailed comparison: http://responsive.vermilion.com/compare.php
Don’t know which responsive framework to use? Neither did we, so we tested them all.
What is responsive web design?
Responsive web design is a rapidly growing approach to web development wherein webpage layouts respond to their environment. That is to say websites should look good and function well no matter where they’re viewed, be it a desktop computer or mobile phone. Responsive frameworks give developers a baseline for building responsive websites.
Each developer on our team tackled a different framework and then reported their findings back to the group. We all used the same design from an actual client project to build a webpage with the frameworks, then compare the differences in UI, syntax, and developer happiness.
Which frameworks did we test?
We focused on the three big responsive frameworks:
ZURB Foundation (version 2 and 3)
Where are the pages we created?
Our comparison actually isn't page specific but we did test real client designs including a recent website launch for Campaign for Action.
The surprising results
It wasn’t obvious beforehand, but responsive CSS frameworks fall into two categories:
Both responsive framework and UI library: Bootstrap and Foundation
Primarily responsive framework: Skeleton
Bootstrap has popularity and momentum on its side, so we had high expectations. In fact, we expected Bootstrap to walk away the clear winner, becoming our framework of choice going forward. Turns out Bootstrap is great, but there’s no clear winner; not even close. Let’s take a look at each framework...
What you should know about each framework
Bootstrap’s grid system comes with both fluid and fixed layouts. Mobile support landed in Bootstrap 2.0 and is solid, but still has room to grow.
In terms of “responsiveness,” Foundation is arguably the most robust framework. ZURB, a product design agency in Silicon Valley, built Foundation as boilerplate for client projects where custom design is expected. Foundation’s grid support is best-in-class and with version 3 released 6/29/2012, Foundation’s grid options became even better.
Foundation’s UI library is also great for rapid prototyping, but not as expansive as Bootstrap.
Skeleton is a style agnostic framework built by Dave Gamache (Designer at Twitter; formerly Interaction Designer at ZURB). Syntactically, Skeleton is reminiscent of the popular 960.gs, making Skeleton easy to learn for many web developers. Skeleton’s grid support is on par with Bootstrap and has room to grow.
If your goal is rapid prototyping, you will probably need to pair Skeleton with jQuery UI or a similar library. That’s not bad, in fact that simplicity is arguably awesome, but it’s clearly a line in the sand between Skeleton and Bootstrap/Foundation.
Building a responsive team
The best result from our experiment? Our entire team can articulate the ins and outs of each framework. Our interactive team showed incredible initiative, breaking down each responsive framework into an exhaustive list of features, pros, and cons. All of this in addition to their full schedule of client work. Cheers to Vermilion’s interactive team and to the developers of Bootstrap, Foundation, and Skeleton for moving the responsive web forward.