No one outside of the Google, Yahoo!, MSN, and other search engine programmers know exactly how a search engine decides which page is more valid for a particular search. Reading sites like Webmaster World you can find theories and experiments, but very little hard proof. With that, please keep in mind that this is one of those theories, and may make no difference on your search engine placement.
There is a visitor benefit however, especially if your header is graphic or script intensive. The content is loaded first and should be visible first so that your visitors do not have to wait for your entire page to load before viewing your content hopefully making them less likely to press back.
Introduction
Search engines jump around site to site, crunching text as they go. This text all gets plugged into a database that is queried when you search for a particular page. Our goal is to make sure that the search engines have an easy time deciding what our pages are about. We do this by hinting with meta description and meta keyword tags, although these are becoming less important. Another technique is to make sure that our content, which potential visitors will be searching for, is near the top of the HTML code instead of all the “garbage” code for headers and navigation. This makes it easier for the search engine to decide what your site is about and can be especially beneficial if your page is large and bulky.
Sketch
First we need to get a rough idea of how we want the page to look. For this example we’re going to stay relatively simple – a body with two columns, content and navigation, and a header and footer.
The idea is that the text in the gray content box is what people are coming to read. It is also what they are searching on, so we should make it as easy on the search engines as possible to index. The problem is that in the natural flow of the page it comes either second or third depending on how you handle the navigation box. And headers and navigation tend to be light on text but heavy on HTML markup, JavaScript, and graphics; stuff that the search engine does not deal with.
The information in the cyan, yellow, and red boxes serves little information to the visitor. While it is important to have a well thought out navigation plan, a well designed header, and your copyright information on the footer; that is not why your visitor is there.
So, the plan is to have the content written first with everything else following. Of course that goes against the natural flow of the page. Fortunately CSS gives us the “position: absolute;” tag so that we can put boxes exactly where we want.
CSS Positioning: Relative & Absolute
The default positioning for a web page is relative. That is, every object comes in line after its predecessor. We are going to use relative for the content and footer boxes so that the footer falls to the bottom underneath the content. For the header and navigation we are going to use absolute positioning so that we can leave them until the end of the file, but still be able to place them exactly where we want.
One catch with this is that we need to leave room for the header and navigation boxes, and for this we will use the margin set of properties.
CSS: The Boxes
A lot of CSS is based on the box model. That is everything you do is considered a box. Text is contained within a box, graphics are within a box, divs are a box. That is important because it is the placement of these boxes that we are working with. Once we get our primary boxes positioned, the content inside the boxes is easy.
Note: I’m using CSS IDs in my definitions, although you could just as easily use classes. The choice of IDs is a personal preference.
Our design is made up of 4 primary boxes: header, content, navigation, and footer. Since we are primarily interested in the content box, we will define it first.
#content
{
/* Leave room for header */
margin-top: 100px;
/* Leave room for navigation */
margin-right: 100px;
/* Position is not critical, since relative
is default, but I'm listing it anyway. */
position: relative;
}
Notice that we left margins for the header and navigation boxes. Since we will be placing these later, there had to be room left.
The footer box will be defined similarly to the content box, although we will not need to leave margins.
#footer
{
width: 100%;
position: relative;
}
The only concern with the footer is that it goes across the entire width, although you may want to consider centering text as well.
The navigation and header boxes take a little more code because of their absolute positioning.
#header
{
position: absolute;
/* Start at (0,0) */
top: 0px;
left: 0px;
/* Make the box 100% with & 100px wide */
bottom: 100px;
right: 0px;
}
#nav
{
position: absolute;
top: 100px;
right: 0px;
width: 100px;
}
Notice that we defined the widths of these two boxes using different methods. For the header, we listed the 4 points that make up the box corners. On the navigation box top and right are listed and width gives us the width. Height for the navigation is dependent on what is put inside that box, it will grow as needed, whereas the header box should not grow.
The HTML
Now it is just a matter of putting our content into the correct boxes. The easiest way is just to view a sample.
<link type="text/css" rel="Stylesheet" /> <div id="content">All of your content goes here. This is what your users came to read.</div> <div id="footer">Footer goes here.</div> <div id="header">Graphics, whatever for your header</div> <div id="nav">Your navigation menus</div>
Caveats
While CSS has been around for a while, CSS-P (P stands for positioning) is not as well supported. Notably Netscape 4 does not support it and Internet Explorer version 5 is somewhat buggy in how it treats boxes. IE5 will load the pages, and they will look almost correct, but some of the boxes may not line up correctly. NN4 will most likely put the boxes in the order of the HTML code. If you have a high percentage of visitors using NN4 (my sites get less than 1%) you can use some sort of browser sniffing code to have alternate style sheets and alternate HTML pages.
For this particular layout to work correctly, the content box needs to be taller than the navigation box, otherwise the footer will line up with the bottom of content but have the navigation overlap. For most sites, this is not a problem, and I’ll leave the solution for another article since the intent of this article was to be a simple method.
Sample
If you still are confused, take a look at my site. I used this technique to build the pages. It has only been recently updated, so I am not positive what effect this will have, but I believe it will be positive. You may also notice that the CSS file is much more complicated than the simple sample I have presented above.
More Information
Webmaster World – CSS Forum
Zen Garden
Be First to Comment