I’d like to start off by talking about web page layout because it is one of the foundations of building a good website. This involves talking a little bit about grids and the CSS box model.

Grids

Ill leave the brief definition to Wikipedia:

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.

Figure 1: Carbon13's Grid Layout

Though your design is meant to change and grow, it is important to make a few decisions on where you want to start. One of these first decisions is whether you want to have a fixed or fluid width website. If the site is a blog, or a website where there is content that is meant to be read, I recommend a fixed width layout. This is because studies show that there is an ideal column width of about 12 words and that reading rate slows and retention decreases as you make the lines longer. I think that 12 is a little on the conservative side, but do recommend that there shouldn’t be too many more than 20 words per line.

Using Carbon13 as an example, I have a fixed width two column layout with a 600px content and 300px sidebar for sponsors, featured posts, and other links. There is also a consistent spacing between grid elements which is referred to as a gutter. Carbon 13 features 20px gutters that separate blocks of content . Gutters can not only separate boxes of content but serve as padding for the text or objects nested inside a block. In the binding of a book, gutters are the extra space allowed in the center of the book while space between columns are called alleys. More modern definitions refer to both grid spacings (gutters and alleys) as gutters. I find that using one gutter width helps to bring a feeling of consistency and professionalism to a sites look.

The CSS Box Model

Figure 2: The CSS Box Model

/* The CSS */

#aBox
{
   width: 100px;
   height: 40px;
   border: 5px solid #3D9436;
   padding: 25px 10px 0px 40px;
   background: #A4E84A;
}


<!-- The HTML -->

<div id ="aBox">
Hello World!
</div>

Would look like this:

Try these tools out! Will write a post about Firebug soon.

Tools:

• Firebug – take a dive into your CSS and HTML with this extension for Firefox and Chrome
• Fluid 960 and the 960 Grid System
• Gimp