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
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.
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 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
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.
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.