Grids, Formatting Website Design

Shawn Escott - February 24, 2009

When it comes to a solid design for your website, a grid can come in handy. Just as a house needs a sturdy foundation, a work of art or design requires the same. The website picture plane, or the monitor size and resolution, is your first consideration when building your foundation. Below are some statistics regarding user resolutions according to the W3Schools web statistics and trends from January 2009.

The average user has a resolution of 1024×768 or higher so it is a good idea to base your grid on this information. A good number to start with is 960 wide x 500 high. The reason your size should be slightly smaller than 1024×768 is that you need to take into consideration browser toolbars at the top of the page, the right scrollbar, and the horizontal fold of the page. This width will give you an even number to divide the space into columns of 12 (60px each) or 16 (40px each) with 20 pixel gutters and 10px side margins.

12 Column Grid

16 Column Grid

You can repeat a similar process horizontally if desired. You can now use this grid as a guide when placing objects and text on the page. This solid structure will help ensure a solid design.

For more information on grids visit 960 Grid System.