Using layout grids in web design

Overview of the benefits of using a layout grid as part of the web design process. Grids have long been used to bring consistency to printed work but their adoption by web designers has been slow. Bearing in mind the problems associated with fixing vertical heights in HTML based pages, do they even have a place in the web designer’s tool kit? I’ve long been a fan of grids, using modular grids as the starting point for web pages and emails. Right from the outset using one brought better layouts, followed by constant layouts over multiple projects, which is very useful for maintaining branding. If you are going to be using a CSS frameworks, designing to a grid makes complete sense.

Starting point

The grid I currently use has evolved over several years. At first I would simply divide pages into 1/2s 1/3ds 1/4s and so on. This was kind of ok but I always ran into difficulties when translating designs produced in Photoshop into finished site. The problems usually arose as page widths chosen, often at random, could almost never be neatly subdivided into columns whose widths were round numbers.

What is required are page widths that can be neatly divided into neatly into modular column units. If maths isn’t your thing then online tools like this one from 29 digital can do the maths for you. If you’re going to use a 3rd party framework then you could use the grid generators for blueprint or YAML which pre-prepare the CSS for you, see resources below.

I use a simple spreadsheet to carry out the calculations required. Currently I use a 12 column grid of 832, 942 or 986px with gutters adjusted to match. I feel the latter width is currently rather wide for safe use, it was for a CSS framework for an already approved design.

Using the grid

At the time of writing, this site uses a grid that’s 942 pixels wide, with 12 columns and 13 gutters. Although setting exact heights on HTML pages presents problems, it’s worth having rows as well as columns in the grid as they can be used when setting the proportions of some elements on the page. In the case of this site, proportions of the page header, footer and some images all fit the vertical grid unit.

The grid in practice

Modular grids suit, and assist in, the process of web design. Grids both aid creativity and visual design by providing starting points for layouts as well as helping to provide points of alignment that keep things looking neat. They can also help reduce build times as having set widths makes layout calculations very easy so reducing build times. The pursuit of reduced layout and testing times has set me on the course of developing a CSS framework, for which a layout grid is makes total sense.

Reading and resources

Tags: