Using a Background Grid to Assist Web Page Layout
Welcome to the seventh and final installment of a series covering fundamental design principles as applied to web layout creation. This series uses numerous code samples to show you how to implement such design concepts as the Golden Ratio and the Rule of Thirds to construct several professional-looking web page designs that will be visually appealing to your visitors.
Provided that you’ve already read all of the tutorials that preceded this one, I should assume that at this point you have pretty clear idea of how to apply both the Golden Proportion and the Rule of Thirds to build different kinds of web page layouts, ranging from the classic three-column designs to those composed of only two columns.
As you learned before, assigning the proper dimensions to certain areas of a web document, either by using the Divine Proportion or the Rule of Thirds, helps to distribute the contents of web sites in a more harmonious way, simply because this distribution emulates a pattern that’s already present in nature.
However, it’s also fair to stress one important thing regarding the implementation of these two specific principles when creating web page designs: unless you have a calculator at hand or use some online tools like the Phiculator (http://www.thismanslife.co.uk/phiculator), you may find it quite hard to position elements on a web page without having a visual guide behind them.
Fortunately, this issue can be easily resolved by using a background grid. But you might be wondering how it works. Well, it’s possible, for instance, to design such a background grid in Photoshop, and then assign this image to the “<body>” element of the web document via CSS, thus displaying a handy visual guide that can be used for quickly aligning web page elements according to the Golden Ratio and the Rule of Thirds.
So, in the next few lines I’m going to demonstrate how to use this approach, in this case for building a fixed design in accordance with the Rule of Thirds. Want to see how this will be accomplished? Then start reading now!
Using a Background Grid to Assist Web Page Layout – The background grid for a Rule of Thirds web page
As I said in the introduction, it’s ridiculously simple to create a background grid that can be used for aligning elements on a web page. This process can be completed quickly with any image editing software. I’m going to build our grid with Photoshop, but naturally you can use the program with which you feel most comfortable.
Essentially, the steps that need to be followed to create this grid are generally the same for any image edition program that you might utilize. Since my grid will stick to the Rule of Thirds, start out by opening a blank document of 900px X 100px and then create the grid by vertically dividing the document in thirds of 300px each. Don’t worry about creating horizontal grid lines, since they won’t be utilized in this example.
Finally, paint the image with a color that offers a good contrast with the elements that you’re planning to include in your web page. Once you’ve done this, simply export your graphic as a GIF or PNG to the folder that you’ll be using for storing the web document.
If everything has gone as expected, you should have created a background grid similar to this one:
Now that the grid is ready to be used as a background for the web document, it’s time to see how to assign it to the “<body”> element with a few simple CSS styles. This way it can be displayed across the entire document.
This process will be discussed in depth in the following section. Thus, to learn more, please click on the link that appears below and keep reading.
Using a Background Grid to Assist Web Page Layout – Displaying the background grid on the web page
Before I start showing you how to transform the grid image created in the previous section into a visual guide that will be displayed on the web page, it’s fair to clarify that this approach isn’t mine. The idea of using an image as a background grid was originally conceived by Khoi Vinh and you may want to take a look at his site here (http://www.subtraction.com/2004/12/31/grid-computi) to see a nice usage of his grid.
Having said that, it’s time to code the corresponding CSS styles that will be responsible not only for creating a fixed three-column web page layout, but for assigning the grid image that you saw previously to the page’s <body> element.
These CSS styles will be defined in the following way:
padding: 0;
margin: 0;
background: #eee url(grid.gif) center top repeat-y;
}
#container{
width: 900px;
margin: 0 auto;
}
#header{
height: 100px;
padding: 0 10px 0 10px;
}
#sidebar{
float: left;
width: 280px;
padding: 0 10px 0 10px;
}
#extrabar{
float: right;
width: 280px;
padding: 0 10px 0 10px;
}
#content{
margin-left: 300px;
margin-right: 300px;
height: 302px;
padding: 0 10px 0 10px;
}
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
}
h1,h2,p{
margin: 0;
}
As you can see, the set of CSS styles defined above are tasked with building a simple web page layout which is composed of three primary columns, identified as “sidebar,” “content” and “extrabar” respectively. Each of these columns has been assigned a width of 300px, aligning the whole design with the Rule Of Thirds. However, the most relevant thing to note here is the following rule:
body{
padding: 0;
margin: 0;
background: #eee url(grid.gif) center top repeat-y;
}
Despite its ease, this rule is truly powerful; it tells the browser to display the grid image created in the previous segment across the whole web page, as a background grid. Now it’s much easier to align elements on the page, since the background image acts like some of the grids available in any graphic editing program.
Pretty nice, right? At this point, you hopefully understand how to use a simple GIF or PNG image as a helpful background grid, which can be displayed on a web document for aligning purposes. However, the CSS styles coded above would be incomplete if they weren’t linked to the document’s markup.
Therefore, in the section to come I’ll be performing this task, so you can see more clearly how the background grid can be utilized for placing different elements within the web page in perfect harmony.
Now, click on the link below and read the following segment.
Using a Background Grid to Assist Web Page Layout – Completing the sample web page layout
To complete the development of this sample web page layout that uses a single image as a background grid, it’s necessary to link the CSS styles coded in the previous section to the corresponding markup of the page. To do that, I’m going to create a whole new (X)HTML file, which will render the layout along with the grid. Here’s how this file looks:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3-column web page layout using the Rule Of Thirds (uses background grid)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #eee url(grid.gif) center top repeat-y;
}
#container{
width: 900px;
margin: 0 auto;
}
#header{
height: 100px;
padding: 0 10px 0 10px;
}
#sidebar{
float: left;
width: 280px;
padding: 0 10px 0 10px;
}
#extrabar{
float: right;
width: 280px;
padding: 0 10px 0 10px;
}
#content{
margin-left: 300px;
margin-right: 300px;
height: 302px;
padding: 0 10px 0 10px;
}
#footer{
clear: both;
height: 100px;
padding: 0 10px 0 10px;
}
h1,h2,p{
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="extrabar">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">
<h2>Subheading</h2>
</div>
</div>
</body>
</html>
See how simple it is now to include certain common elements, such as headers and paragraphs, into the web page by using the background grid as a visual guide? I hope you do! I decided to keep the markup of the previous web document rather basic so you can easily grasp the functionality provided by grid.
In addition, below you’ll see a screen capture that shows how the web page coded before is rendered on screen, including the background grid. Here it is:
From the above image it’s clear to see that using a background grid is truly a killer approach, particularly when it comes to aligning elements on a web page according either to the Golden Ratio or the Rule of Thirds. Finally, I encourage you to build your own design grid, so you can see how useful it can be for building harmonious, aesthetically appealing web page layouts.
Final thoughts
It’s hard to believe, but this is the end of the series. However, this shouldn’t make you feel sad at all, because you learned the theory that stands behind the Golden Ratio and the Rule of Thirds. Besides, you saw how easy it is to take these principles into the terrain of web design, which can be truly helpful for creating beautiful web sites.
See you in the next web development tutorial!
