Rearrange page code to raise text relevance

by Michael Meadhra | Jul 01, 2004 5:25:00 PM

Tags: Michael Meadhra

Takeaway: Micahel Meadhra examines how to rearrange the order of the elements in a typical two-column page layout consisting of a full-width header panel across the top of the page, followed by the two-column section, and then a full-width footer at the bottom of the page.

This article originally appeared in the Design and Usability Tactics e-newsletter. Click here to subscribe automatically.

The placement of text content within a Web page can make a significant difference in some situations. The most notable example is in search engine rankings. Some search engines examine only a limited number of characters (i.e., 10,000 characters or 25 KB) on each page and ignore the rest of the text on any page that exceeds the standard length. Search engines that index the entire contents of a long page often give more weight to content that appears closer to the top of the page when calculating page rankings and relevance to a particular search term.

The sequence of page content is also significant when a Web page appears as plain, unstyled text. That might occur when viewing a page on alternate display devices, such as a PDA or cell phone, or when a visitor uses assistive technology, such as a screen reader.

Old-style table-based layouts with embedded formatting didn't allow Web builders much opportunity to alter the order of the text in the page markup. The sequence of the page elements was dictated by the page flow from left-to-right and top-to-bottom. Modern structural markup combined with CSS styling provides much more flexibility. As a result, Web builders often have the option of rearranging blocks of page markup while maintaining the same page layout in the browser window.

Let's examine how we can rearrange the order of the elements in a typical two-column page layout consisting of a full-width header panel across the top of the page, followed by the two-column section, and then a full-width footer at the bottom of the page. The central two-column section includes a narrow navigation column on the left and a wider column for content on the right.

Two-column layout--the usual way

Because the natural flow of a Web page starts at the upper left corner and flows to the right and down, it's usually a little simpler to create your markup in that order. When you take this approach, placing the navigation links in the left column pushes the main page content down in the page code as shown in the code for Figure A.

The example code below uses CSS floats to achieve the two-column effect. The div#head and div#foot rules set the attributes of simple, full-width divs for the header and footer. The div#foot rule includes the clear: both statement to make sure the footer stays below the main and nav columns and doesn't flow up to fill any empty space.

The div#navcol rule floats the div containing the navigation links to the left and sets its width to 20 percent, creating the left column. That leaves room for the main text div to fill in the remaining space to the right. The div#main rule sets the left margin to a value slightly larger than the width of the navcol div, effectively creating a vertical column for the main content. I described this technique in more detail in "Dealing with differences in CSS floats in IE and Netscape."

Here's the CSS code for the example:

body {
    margin: 0px;
    padding: 0px;
}
div#header {
    text-align: center;
    background-color: #CCCCCC;
    height: 60px;
    line-height: 60px;
}
div#navcol {
    padding: 10px;
    float: left;
    width: 20%;
}
div#main {
    background-color: #99FFFF;
    padding: 10px;
    margin-left: 22%;
}
div#foot {
    border-top: solid #000 1px;
    background-color: #CCCCCC;
    padding: 5px;
    text-align: center;
    clear: both;
}

As you can see below, the XHTML markup for this example page follows the normal left-to-right and top-to-bottom flow. The first div is the header, followed by the div for the nav column, then the main content column div, and finally, the footer div. (Note: For the sake of brevity, the nav column is shown as a simple unordered list with no links, and the text in the main and footer divs is shortened.)

<body>
<div id="header">
    <h1>Header Text</h1>
</div>
<div id="navcol">
    <h4>Nav Column</h4>
    <ul>
        <li>Lorem ipsum dolor</li>
        <li>Consectur elit</li>
        <li>Sed do eiusmod tempor</li>
        <li>Ut labore et dolore</li>
        <li>Ut enim ad minim</li>
    </ul>
</div>
<div id="main">
    <h2>Main Content</h2>
    <p>Ut aliquip ex ... consequat.</p>
    <p>Lorem ipsum dolor ... incididunt.</p>
    <p>In reprehenderit ... incididunt.</p>
    <p>Ut enim ad minim ... voluptate.</p>
</div>
<div id="foot">
    <p>Footer text goes here. In reprehenderit ... laborum. </p>
</div>
</body>

Using a left float for the left column is a workable solution to a two-column layout, but there are advantages to having the main content appear above the nav column text in your markup. Let's try an alternative that makes that arrangement possible.

Moving the main content up the page

One of the advantages of CSS is that you can often use slightly different techniques to achieve the same (or very similar) effect. The example code for Figure B uses an alternate technique for creating a two-column effect that enables us to change the sequence of the divs in the markup, thus bringing the main content closer to the top of the page and moving the nav column text to a less prominent position further down the page.

The technique is very similar to the one in the previous example. However, instead of floating the nav column to the left and allowing the main content to fill the space to the right, it floats the main content column to the right and allows the nav column to flow up into the empty space to its left.

In this case, the div#head and div#foot rules remain unchanged. The div#main rule floats the main content div to the right and sets its width to 75 percent. This creates the right column and leaves blank space to the left of the main column. The div#navcol rule just creates a little padding around the text. It doesn't need a float attribute because the normal flow causes the nav column to fill the empty space to the left of the main content column.

body {
    margin: 0px;
    padding: 0px;
}
div#header {
    text-align: center;
    background-color: #CCCCCC;
    height: 60px;
    line-height: 60px;
}
div#navcol {
    padding: 10px;
}
div#main {
    float: right;
    width: 75%;
    background-color: #99FFFF;
    padding: 10px;
}
div#foot {
    border-top: solid #000 1px;
    background-color: #CCCCCC;
    padding: 5px;
    text-align: center;
    clear: both;
}

Creating the two-column effect by floating the main content to the right and allowing the nav column to fill in to the left allows us to rearrange the markup so the main content text comes before the nav column text. The following XHTML markup is the same as the previous example except that the order of the main and navcol divs are reversed.

<body>
<div id="header">
    <h1>Header Text</h1>
</div>
<div id="main">
    <h2>Main Content</h2>
    <p>Ut aliquip ex ... consequat.</p>
    <p>Lorem ipsum dolor ... incididunt.</p>
    <p>In reprehenderit ... incididunt.</p>
    <p>Ut enim ad minim ... voluptate.</p>
</div>
<div id="navcol">
    <h4>Nav Column</h4>
    <ul>
        <li>Lorem ipsum dolor</li>
        <li>Consectur elit</li>
        <li>Sed do eiusmod tempor</li>
        <li>Ut labore et dolore</li>
        <li>Ut enim ad minim</li>
    </ul>
</div>
<div id="foot">
    <p>Footer text goes here. In reprehenderit ... laborum. </p>
</div>
</body>

Simply moving the main content div up to a higher position in the page markup can increase the weight that some search engines give to that content. The result can be better relevance ranking for the keywords within that text. The difference would be small in the example pages above, but in pages where the left column contains supplemental sidebar information or ads, the difference in the page ranking could be significant.

For more tips by Michael Meadhra, visit our CSS & Design Dev Tips Library .

Print/View all Posts Comments on this article

Discussion thread from the e-newsletter send Newsletter Editor | 07/07/04