To grid, or not to grid?

Grids form an essential part of our lives. We may not always notice them, but their influence on what we see, hear and do is everywhere. Wherever plans have been called for in the building of objects, the division of areas, of the decoration of flat surfaces grids have been involved. The desire to bring order to the bewildering confusion of appearances reflects a deep human need ... Grids, modules, and systems not only have practical applications, as a means to resolve complex design problems, but they also provide a sense of order and temporary respite from the most pressing and basic human fears and dilemmas. * Taken from http://www.artofthegrid.com

I'll be honest here. Up until quiet recently (well, roughly 4 years ago now), using grids never really entered my mind when I would start a new project. And that was fine ... for the most part. But then when the common use of tables in websites got thrown out the window a while back, I began to get a little worried about maintaining some sort of balance with the structure of a webpage. I mean if there are no walls, how are we meant to put the roof on? Well, thats the way i thought at the time anyway ...

Now, while tables "did the job" for laying out pages, they never quiet got it right in all browers. That said, they were an aid, of some sort, when quickly trying to mock up a webpage. Then, with the advent of full support for CSS across most commonly used browsers, with the exception of a few earlier versions of IE, designers had now found a way to control and layout all the elements of a page from one source, without having to worry about what it would look like in this or that browser. This itself though, brought it's own headaches.

I really do love CSS.

By no means am I even attempting to bash CSS here ... I love CSS ... I'm trying to explain where my own need for grids came from. Now, while it may be possible to throw together a webpage in 3 seconds in Dreamweaver, that is fully XHTML and CSS compliant, it may not be the most interesting or well layed out page in terms of content placement and what portion of the page is occupied by what content. This is where a designer can run into problems ... as I did. "Content is King", I read somewhere once. If this is the case, then content placement is the Queen ... and design by grid is the holy ceremony of wedlock that binds them together.

When designing a webpage in Photoshop or Fireworks, without a grid, the designer tends to find themselves a little lost in terms where to begin. Choosing a grid structure to start with tends to solve a lot of these issues early on. Now, while it's not as easy as 'just choosing a grid' (there are a few variables to consider), it's not that difficult to see what kind of grid you may require, depending on what the nature of the site is and who it is intended for. The idea of using grid structures to contain and unite all the information on a webpage works best for me. A correctly chosen grid can accomodate almost everything.

Before choosing a grid, though, the designer must prioritise the information they want to display, and only then begin to design a grid layout that will best display this information. There is one other major external factor which may have an adverse effect on your chosen grid design and must be considered ... and that's screen resolution. Screen resolution has become a major issue with designing grids. Do I design for 800x600, 1024x768, 1280x1024, 1920x1080 or higher? This really boils down to the type of audience that will be looking at your website. Designers, for example, will more than likely use quiet high resolution screens, and so can comfortably browse sites designed for 1280x1024 and higher. Other audiences such as home users will, more often than not, use lower resolution screen ... typically 1024x768. Once you have decided your target audience and you choose your grid type, it will be easy to see how all these blocks of information can be layed out in a manner more fitting with the information you want to display and how you want to display it.

One grid to rule them all.

There are, of course, different types and styles of grid in use today all over the web ... and there is no holy grail when it comes to choosing one. This is simply down to the designer and the type of site they want to create. Personally, I use the 960 Grid ... it caters for a fixed width of 960 pixels and from a single column all the way up to 16 columns, and any variation in between. Don't let the term 'fixed width' confuse you. There are arguments for and against using fixed width grids, but I'll discuss that matter another time. Suffice it to say, fixed width or non-fixed width, grids are still too important to not consider using.

The 960 Grid system in use.

Having said all that, it's just as important not to be overly confined by a grid structure ... it can be quiet easy to become constrained by grids too! I find that it's best to design using a grid that works, and then break out of it in certain areas to create more of an impact.

Some grid resources.

The Grid System
"The ultimate resource in grid systems."
960 Grid System
Set up a grid for the common 960 width.
Grid Calculator
Another online tool for creating grids.
Web Page Layout Grid
A large image to use in the background when designing with a grid.
Browser Grid
Shows the maximum safe sizes for different resolutions.