Why designing and developing with a grid framework is better for you and your business

Grid design has become a very popular trend on the web in the past few years, with many high profile sites jumping on board. The concept originated from print design, but has now been adpated to the web. This article will discuss the basic idea behind it and why it's a good thing.

What is a grid?

Simply put, grid design on the web revolves around designing and formatting content based on a pre-defined series of columns and gutters. Grid layouts usually come in the form of 12, 16 or 24 columns and used a fixed width design, although there are frameworks for fluid width layouts. The main idea is to promote better alignment and organisation of content on the page, allowing for better usability and readability.

How does it work?

It doesn't matter which framework you use, the basic premise is the same. Columns are grouped together to create the foundations of the page. For example, a 12 column grid can be divided into groups of 4, 4 and 4 grid units to create a 3 column layout or you could also do a two column layout by having a group of 4 and 8. The possibilities are numerous and easy enough to implement with a few tweaks of the code.

Why designing websites with a grid is good

Saves design time

The biggest draw card for me is that it saves time in both the design and development processes. Design mockups can be done much quicker as you don't have to worry about calculating widths or spaces as most frameworks come with a Photoshop file preconfigured with guides and overlays to design with.

Saves development time

Development wise there are several benefits:

1. You don't need to specify and write the CSS for column widths, spacing and positioning - the selectors that handle this is all included in the framework.
2. Easier collaboration - Designers and developers have the one shared platform to work from making life easier for everyone
3. Less testing required. Frameworks are generally tested to be cross browser compatible, meaning you don't have to spend so much time debugging (particularly with IE6).
4. You don't need to write commonly used code from scratch, most of it's done for you.

Clean and perfectly aligned layouts

By using the multi column arrangements of the framework, you're free to concentrate on designing rather than making sure everything is aligned up nice and neat. Because of the framework, you will also have consistent widths to your columns, meaning no more randomly sized elements appearing in your design. The little things count in a great design, and mismatched and uneven alignment can ruin the flow of a page.

Nice even spacing

The gutters in grid frameworks allow for consistent spacing between columns. As with alignment, mismatched and uneven spacing can ruin the flow of a page.

More effective presentation of content

By using grids you can easily break up short chunks of content into columns, allowing for easier readability, better design and ultimately for getting messages across to your users better.

Standardised code base

When you've worked on dozens of websites, having a standardised code base means you're not scratching your head looking at code you wrote many moons ago - it should still be familiar to you.

Saves time

Did I mention that it saves a lot of time?

Why designing websites with a grid is bad

Well there's nothing much to incriminating say here, but I feel I should provide something for the sake of argument.

Restricts your freedom

By sticking to a grid  framework you're limiting yourself its rules i.e. column numbers, widths, class names and anything else it includes. Basically you're stuck with what you got. But the more familiar you are with the rules, the better you will be at breaking them and bending them to your will.

Restricts creativity

So if you have some totally out there design, then a framework may not be suitable. However, if you have something like that then you should just opt not to use a framework in the first place.

You need lots of good content

Successful and effective usage of a grid framework relies on good and plentiful content that you can work with. This means that for very minimal and content light websites, the framework isn't really being put use at all.

Extra unwanted code

Some frameworks contain a lot of code that you'll never use, adding additional precious KBs and lines of code to your project (note the sarcastic tone there).

Takes time to learn.

You'll need to spend some time initially coming to grips with the naming conventions and usage of the chosen framework. This isn't such a big deal really as developers generally are a clever bunch with good levels of code-aptitude.

Grid frameworks

960.gs - Probably the most popular

Blueprint - One of the first I used, then I switched to the 960 system.

YUI 2: Grids CSS - Supports both fluid and fixed width, they've also DIY grid builder.

The 1KB CSS Grid - A lightweight alternative

The Simpler 978px Grid - Built by the guy behind Web Designer Wall. I'm liking this one a lot - the code is cleaner and the gutter widths are more generous.

Summary

Like any framework, wether for print, music, construction or web, the aim is to provide a solid foundation that will accelerate and standardise projects. The amount of time saved throughout the entire project is a huge benefit to both you and your client. You can design and develop faster allowing you to turn over more projects and the client can see their hard earned cash being put to use a lot earlier on than is usually the case.

There are a few minor downsides to using a grid framework, but in my opinion they are easily overcome.