Designing and Developing with Grids
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
.jpg)
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.
There are number of tools out there for creating grid PS templates + the
CSS. 3 nice web tools are:
http://960.gs/
http://www.tinyfluidgrid.com/
http://www.gridsystemgenerator.com/
