Designing and Developing with Grids

Edwin Antonian | 19/05/2011

One thing that is always an issue when designing websites is the column widths. Widths tend to change from page to page within a PSD file and when you're trying to design quickly they can tend to be overlooked.

Once a website design is approved and passed on to the HTML slicers, column width / margin / padding often gets neglected and the site layout (which looked great in Photoshop!) looks completely wrong in the HTML slice. When the width of columns / margin / padding are not correct, it makes the whole site look a bit out of whack. See example 1.

In this example the PSD is created with a 960.gs grid system. As you can see the columns span across 7 grid columns (270px). However the HTML width is set at 290px, which is off by 20px.

Example 1

So this is where a nice grid system comes in handy. The designer sets the column width via the guide lines within the PSD and when the CSS/HTML developer takes over, the column size is set on the div with a class to match the design in this case class="grid_7". Not only does this help the design look like the html slice but also assists in rapid development so the width / margin / padding of certain elements don't need to be guessed by the developer.