University web designers have a tough enough job as it is, juggling users needs while pleasing committees and numerous other stakeholders. Doesn’t matter if your web office has complete control or just influence, using a grid can make completely unrelated sites look uniform.
In this post I’ll focus on using a horizontal grid, vertical grids are not as popular so ill leave them up to you to explore.
So what is a grid?
Grids exist for the single purpose of bringing uniformity to a traditionally nonuniform environment. The horizontal grid consists of a set of columns with left and right margins that create gutters. Page elements fit within these columns and gutters.
Using a standard grid allows for fast prototyping, wireframing and designing. By having a set of element widths it gives the designers constraints and the developers a global stylesheet to work from.
The above screen shot is from the University of Nebraska-Lincoln and it shows how nicely the page elements fit into the grid. You would be surprised at the number of sites that use this same grid structure.
Calculating a grid
Step 1 is to determine the site width. 960 is the standard width but you can choose anything you wish.
Step 2 is to choose how many columns you want. The most common numbers are 12 or 16.
Now the tricky part, each column has an equal left and right margin. A typical 12 column grid has 10px on each side which leaves you with a 20px gutter.
Determine your column width by taking the:
(960 px page width - 240 px total gutters) / 12 columns = 60 px wide columns
Reasons to use a grid
- Designers love constraints, no really, they do
- Consistency without mandating a template
- Developers don’t have to start from scratch
- Breaking the grid can make things stand out
- Gives you the upper hand when working with demanding departments
Simple steps to start using a grid
- Make a list of your most common page elements
- Header, Menu, Search, Main Image, News, Events, Contact Info, Promotions, etc.
- Dividing up the page into the desired number of columns and gutters
- Place the elements on the grid
- Using a framework
- Design frameworks for Illistrator, Photoshop, InDesign..
- CSS templates to get the structure up fast
- Will soon become embedded in the culture of the designers and developers
Downsides of using a grid
- They are constraining
- CSS frameworks have been known to be bloated
- Changing the grid after sites have been launched can be difficult
- Can lead to non-semantic naming conventions
Some frameworks and resources
- YUI Grid CSS
- Grid Overlay Bookmark
- Grid CSS Gallery
Photo by adactio