Don’t like grids? Try our ten pixel method.
There may be a proper name for this somewhere out there and it may be commonly known. If so we apologize if this has been repeated.
Grids are making a comeback and are becoming quite common in the web world. If your site doesn’t follow a set structure in its layout it may seem disjointed and difficult to navigate, read or look at.
There is a popular template being used at the moment, it is called the ‘960 Grid System‘. The 960gs site has two templates which you can download.
- 12 Columns – 60px wide columns with 20px gutters
- 16 Columns – 40px wide columns with 20px gutters
There are one or two drawbacks with using a grid. The main one is that it can take a while to perfect a design and sometimes you will land up with an element being a couple of pixels out, which can be a nightmare.
Today though, I am not going to talk about creating a site with a grid. I want to talk to you about another method that we sometimes use at OBOX-Design. We call it the ‘Ten Pixel Method’.
What does this mean?
It means that, the width of all your elements are divisible by 10, and that the spacing between elements is, at the least, 10px apart. We sometimes use this method when a site needs to be liquid or if a site needs quick deployment.
A good example of its application would be our new Content Management System, but unfortunately we cannot show you that just yet, so for this, we will create the framework from scratch. The first thing to do is to decide whether your site will be liquid or static.
For simplicity sake we will create a static layout. The next step is to decide on the width of your site and how many columns it will have. Key thing here is that columns must be divisible by 10 in order to keep a clean layout.
We will create a site 960px wide (I believe that this is now the standard width, grids or not, it is best suited to static layouts). It will have 2 columns. The Menu will be on top, content on the left and Misc details such as Links, Advert or Recent Posts on the right. One of the positives of this method is its quick execution.
So first things first let us create the HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The 'Ten Pixel' Method</title> </head> <body> <div id="container"> <div id="header"><h1>Our Company</h1></div> <div id="menu_bar">Menu goes here</div> <div id="site_body"> <div id="content_bar"> <h1>Content Column</h1> </div> <div id="right_bar"> <p>Right Column</p> </div> <br /> </div> <div id="footer"><p>© 2008</p></div> </div> </body> </html>
Now that we have our layout in its simplest form we need to determine how big each column is going to be. What I do is take the sites decided width and divide it by the amount of columns the body will have. From there I can easily determine the width of the menu column, content column and right column. In this case it is easier because we only have two columns, the content column and the right column:
The right bar must be able to contain 336px adverts: 350px
This leaves us with the main content column. I want there to be 10px between the two columns so this one must be 600px wide.
Now that we have our widths let us create the style sheet. One of the main elements of the 10px method is that your padding and margins must be at least 10px thick on each side. A site with space to breathe is a healthy one, so I recommend 10px padding for the side bar and 20px for the content.
Below is the styles to implement into our site (I have also included some standard styles in this CSS):
/*----- Std Styles -----*/
body{
margin: 10px;
padding: 0;
font-size: 8pt;
}
body, p, a, tr, td, .date, pre, code{font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; position: relative;}
h1, h2, h3, h4, h5{font-family: Georgia, "Times New Roman", Times, serif; position: relative;}
p{color: #111111; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; line-height: 18px; font-size: 8pt;}
h1{color: #222222; font-weight: lighter; font-size: 25pt; letter-spacing: -1px; margin: 0px; padding: 0px 0px 10px 0px;}
h2{color: #222222; font-weight: lighter; font-size: 15pt; margin: 0px; padding: 0px 0px 10px 0px;}
.clearboth{clear: both;}
/*----- Layout Styles -----*/
#container{width: 960px;}
#header{
padding: 10px;
margin: 0px;
width: 940px;
background-color: #036;
clear: both;
}
#site_body{
width: 960px;
padding: 0px;
margin: 0px 0px 10px 0px;
clear: both;
}
#menu_bar{
width: 940px;
background-color: #f3f3f3;
padding: 10px;
margin: 0px 0px 10px 0px;
clear: both;
}
#content_bar{
width: 560px;
background-color: #f3f3f3;
padding: 10px 20px;
margin: 0px 10px 0px 0px;
float: left;
}
#right_bar{
width: 330px;
padding: 10px;
float: right;
background-color: #ccc;
}
#footer{
padding: 10px;
margin: 0px;
width: 940px;
background-color: #f36;
clear: both;
}
/*----- Header Styles -----*/
#header h1{color: #fff;}
Your site should look something like this:
Notice that we have 10px between the header, site content and footer. There is also 10px between the main content column and the right column. None of this was done by reverting to any grids. It should not have taken long to execute and, because of the simple method, makes it easy to make changes and add content.
All that is left it to fill each area with content. Remember to apply to the 10px Method to all items, that means widths divisible by ten and spacing at least 10px apart.
I hope you find this method useful. I have used it on quite a few sites recently, most notably our new Content Management System. If you don’t find it useful then at least you can use this code as a template for future designs.