12

Choosing a Responsive Web Design Framework

August 7, 2013 In labs

Want to Build a Responsive Website Design?

Before attempting to build a responsive website it is a good idea to explore what others have developed. This article includes a collection of responsive web design templates aimed at making the process easier. Not sure which framework to pick? Download them all and see which one works the best for you. Learning from the code in action is a good way to get started on your way to creating a responsive website design.


Bootstrap V2 from Twitter

http://twitter.github.com/bootstrap/

Bootstrap V2 is a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. Included in the package are lots of goodies like custom buttons and dropdowns. Additionally, the LESS CSS framework was used, which aims to minimize CSS code.

Our thoughts: Developed by twitter peeps, the framework seems rock solid and the responsive re-sizing is well done. This seems like one of the most solid responsive frameworks available currently.


Get Sekeleton

http://www.getskeleton.com/

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton uses a 960 pixel wide grid layout with built in buttons and tabs.

Our thoughts: The responsive layout will adjust for iPad and Mobile devices and the framework is light-weight. The only drawback is that the Skeleton template only works up to a 960 pixel width. This can be fixed, however it is a limitation if you want to have a layout that stretches to fit large displays.


CSSGrid.net

http://cssgrid.net/

CSSGrid.net is a fluid CSS framework built for a 1140 pixel grid. A column-based fluid grid is included, as well as fluid image resizing. Unlike the other responsive frameworks listed above, this framework will not have 4 or 5 layout shifts as it gets smaller. Instead, everything scales smoothly.

Our thoughts: 1140 pixels may seem like a large area, but this is the perfect size for a monitor with 1280 resolution. The smooth scaling effects of this framework are its best asset. Unfortunately the CSS is fairly bulky.


Less Framework 4

http://lessframework.com/

Less Framework is probably the oldest responsive template found online. Now in its 4th version, the framework helped set the standard for responsive frameworks. In comparison the framework is very similar to Get Skeleton. The website allows users to customize their options such as line spacing and HTML5 support before download the code bundle.

Our thoughts: This is a solid and tested responsive framework, but does not have to extras that are found in Bootstrap V2 or Get Skeleton.


Closing thoughts

These frameworks are all great starting points. In terms of which template is the best out of the box solution, our answer would be Bootstrap V2. However, for a fluid and responsive layout CSSGrid.net would be the winner. Depending on your preferences, any of these frameworks can help you get started with building a responsive website.

Another thing to consider while experimenting with these frameworks is that they are templates, templates which are meant to be built on top of. A 12 column grid does not work for every layout, so it is important to be imaginative when writing code to use within these templates.

2 Responses to “Choosing a Responsive Web Design Framework”

  • Jonathan says:

    Good review, I think that skeleton is probably best for smaller projects while another css framework like bootstrap may be better for starting larger ones. I’ve been using Get Skeleton for about 3 months now, maybe a bit longer, and it’s perfect for building small responsive sites quickly. I have only played with bootstrap, but I think my next project will be fully bootstrap. These responsive css frameworks make building multiplatform designs that much faster than it used to be.

    • workbysimon says:

      Get Skeleton is a great framework. It simplifies the development by just focusing on a few breakpoints. Bootstrap is really great too – but there are almost too many ‘optional’ add-ons which can make it really bulky. The key is finding something you are comfortable working with and customizing. Eventually you may just want to grab small pieces from a framework and just build the rest custom.


Leave a Reply

Your email address will not be published. Required fields are marked *