Should I use a Responsive Framework for my site? | Responsive Web Design

TLDR: No.

Unfortunately that answer is not going to be something you can take back to your development team or client as an explanation so we will take a closer look at what your options are when approaching a framework.

And after saying that I recently built a site using a Framework and it went really well.

What is a Framework?

A framework can have a few different meanings so lets make sure that we are all on the same page to begin with. When I’m referring to a Framework I’m talking about something with that has been created to structure the layout of your web pages. This covers your grid but also covers typography, navigation layout, buttons styles, tables etc etc. Within this list I like to break them up a little bit further as some Frameworks cover every single element within your website while others give you the barebones to get going.

Different types of Frameworks

Frameworks come in many shapes and sizes (and complexities) but generally fall into the following categories: Boilerplate, Grid System, Bootstrap/Full Function.

Boilerplate

Boilerplates are designed as a bare minimum frameworks providing you with only enough to get started. The most popular example of a boilerplate is probably HTML5 Boilerplate. There is also a responsive version of the template that you build through Initializr

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

Pro’s 

These are the pro’s.

  • Great barebones structure (head, title, meta tags)
  • Stays up-to-date with the latest best practice approach
  • Comes with an awesome .htaccess file

Con’s

These are the con’s.

  • Contains files like .htaccess, modernizr, and normalize.css that aren’t preconfigured for your needs.
  • Doesn’t give you any grid and UI styling, you have to build that from scratch.

Grid System

Grid Systems are a little more advanced that boilerplates. They focus less around the HTML template itself that you will be using, focussing more around building up a series of CSS classes that will form the grid system to be used within the HTML. Don’t get me wrong, the HTML structures are there and can be a little “DIV Soup” but that isn’t he main focus.

These responsive grid systems, when used correctly, can be extremely valuable for setting up your layout at the beginning of your project and can often allow you to prototype your ideas quickly and allow for clients to see those ideas in real browsers… and more importantly in the browser/device they will be most likely using when the sign off of the project.

Pro’s 

These are the pro’s.

  • Quick to build site layouts
  • Provide cross browser support for grids… can be tricky

Con’s

These are the con’s.

  • If you decide you want to go outside the 12 columns it comes with, or go full bleed for some sections you’re going to have to rework some of the Styles
  • Most likely you need to put everything in “rows” or “containers” adding in additional markup for every element of your site.

Bootstrap/Full function

These are the big guns. They are full fledged frameworks that provide everything from the grid to the UI and design elements. The most popular of all is Bootstrap (formally named Twitter Bootstrap as it was developed by two members of the Twitter team in their own time) however Zurb Foundation is another example that has gained in popularity.

Pro’s 

These are the pro’s.

  • Everything you need to build a full responsive site
  • Tested cross browser
  • Built in Sass so you can configure your own variables

Con’s

These are the con’s.

  • Provides everything you need… plus a LOT of stuff that you’ll never use
  • Gives you the answers without really understanding the question or the working out.
  • Can create sites that look a little “Samey”.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.