Creating budget RWD sites with CSS frameworks

Recently I was asked to create a responsive site for a friend’s Sleaford Plumber company. For those not in the know, responsive web design (RWD) can be defined as follows:

RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries, an extension of the @media rule.

Wikipedia

RWD development takes significantly longer than a traditional desktop site, so I took this side-project as an opportunity to see how much development time can be saved using some of open source frameworks available.

Requirements

This project was relatively straightforward and fortunately, my client had a very clear idea of what he wanted on the site:

  1. Introduction section
  2. Gallery
  3. Breakdown of the services he offers
  4. Contact details
  5. Contact form

My client did not have enough content to create a page for each section; therefore, I proposed a single page site. This approach would also make the development process simpler and the site would feel pretty snappy on a mobile device as all the content has been loaded in the initial page download.

Methodology

Next, I wanted to select an HTML/CSS/JavaScript framework to provide a head start on the project and keep the development time to a minimum. After a bit of research I narrowed the choice down to the following:

  1. Twitter Bootstrap version 3
  2. Zurb Foundation version 5
  3. Skeleton
  4. HTML KickStart

On the face of it they all appear to have very similar facets:

Twitter Bootstrap

Bootstrap is very popular (some might say too popular) and it’s easy to see why, the documentation is very clear, the code is well written and it contains tonnes of features. All the User Interface (UI) elements are consistently styled and follow a standardised coding pattern. The support for Bootstrap is impressive, a large number of community projects have sprung up to extend the framework and provide tooling. The community support is why Bootstrap becomes my number 1 choice for building my client’s one-page, responsive website.

Zurb Foundation

Foundation appears to be a pretty awesome project, it’s been around for a while now but version 5  has just been released this week (21st November 2013). Unlike Bootstrap (that uses the LESS CSS pre-processor), Foundation uses Libsass, a new, super fast Sass pre-processor. If you prefer the Sass syntax then foundation is well worth looking at.

Foundation touts itself as “The most advanced responsive front-end framework in the world” this is a pretty bold claim; however, as it’s the most recent release of any of the Frameworks then I guess it’s plausible. One of the biggest improvements in the latest version is the inclusion of Interchange, a JavaScript image handler. Interchange uses CSS3 media queries to dynamically load responsive content (images, video) at an appropriate size for the users’ device. This is a fantastic development and something I can’t wait to try out.

Skeleton

Skeleton is a more lightweight solution. As the name suggests, it’s a stripped down CSS framework that only provides some base styles to get your project started. If I was working from a Photoshop design where the design wasn’t based on a consistent grid layout, I would definitely consider starting with Skeleton. With complex designs, the bare-bones approach may be simpler to code rather than try and force a design into a more fully featured framework.

HTML Kickstart

HTML kick-start appears to be a lot like Bootstrap, superficially it’s difficult to see what makes it different. However, I actually prefer KickStart’s website. The site is a lot more user friendly and it’s very tempting to download and get stuck in. HTML Kickstart offers the most bang for your buck, it comes with an impressive amount of elements but is also a pretty lean solution (no bloat here). Definitely one to try out.

Conclusion

With the advent of RWD, building sites from scratch offers the developer the most control; however, this comes with a significant cost in terms of dev time. CSS frameworks have come a long way in the last couple of years, they offer the developer a substantial head start allowing them to concentrate their efforts on the other aspects of the project. Alternatively, using a framework means you can offer clients a fully responsive site in a similar price range to a traditional fixed layout site.

When it comes to selecting a framework, it’s really down to personal preference. I would personally recommend any of the frameworks above as they are all well designed, easy to implement and flexible. For my friends Sleaford plumber website, I selected Bootstrap as it has the largest community support. Zurb Foundation would have been my first choice but at the time of selection it was on version 4. Now that version 5 has been released I’m really looking forward to trying this out on my next side-project.