How to optimize your website layout to ensure your content is the first one in the page
2007-10-09A small tutorial on how to structure your website layout, to order your page content according to its importance and display it in the standard way
I think you noticed the standard website layouts these days. Most websites have the following structure:
- One header that usually contains the website logo and name, probably a menu and a serch box.
- One navigation menu, sometimes as a column on the right or the left of the page that contains the site categories, subsections or other information to guide you on the website.
- Effective page content, that is usually located after the header.
- One page footer that contains copyright, privacy information and other "not so interesting stuff".
The importance of these sections is as follows:
- Page content
- Navigation menu
- Page Header
- Page footer
Most search engines are pretty smart on figuring out what content is repeated on your pages and determine your page header, navigation menu and page footer accordingly.
Web pages display the content in the same order as it is contained in the html source. Using css, you can change the display order of your page content.
In this way you can have your sections in html ordered according to their importance and display it to the user in the standard layout that he is used to.
The trick is very simple. Most sections like "header" are fixed, so you can have an absolute positioned layer (div) to display it. So, as you know, you can place an absolute positioned layer anywhere in your source code.It will be displayed in the same position becuase it has an absolute position.
The other trick is to use "float" to swap div position and voila.
Enough talking, let's write the code.
The html code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<title>Optimized page</title>
<link href="optimized.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
1 Content
<p>View the source of this page to see the section order</p>
</div>
<div id="navigation">
2 Navigation
</div>
</div>
<div id="header">
3 Header
</div>
<div id="footer">
4 Footer
</div>
</body>
</html>
The CSS
body
{
/*ie nedds these*/
margin:0px;
padding:0px;
font-size:24px;
font-family:Arial;
/*align center for IE*/
text-align:center;
}
/*
make text more visible
*/
div
{
text-align:center;
line-height:1.2em;
}
/*we use #container DIV to center #content and #navigation in the page*/
#container
{
/*our page width*/
width:1000px;
/*center relative div*/
margin:auto auto;
/*make space for the header*/
margin-top:200px;
}
#content
{
/* we substracted navigation width from page width and got 800px*/
width:800px;
height:auto;
/* have a minimum height, this does not work in IE*/
min-height:300px;
/* use float to inverse position with navigation DIV*/
float:right;
/*color section for identification*/
background:#ff0000;
}
/*
internet explorer min-height fix
can be removed if you don't need a minimum height
in this way your CSS will be clean from hacks
*/
* html #content
{
height:300px;
}
#navigation
{
/* set margin top to header height*/
float:left;
height:auto;
/* have a minimum height, this does not work in IE*/
min-height:300px;
width:200px;
/*color section for identification*/
background:#fd6464;
}
/*
internet explorer min-height fix
can be removed if you don't need a minimum height
in this way your CSS will be clean from hacks
*/
* html #navigation
{
height:300px;
}
#header
{
/* postion absolute so we can place our div anywhere on the page, in this case the first div*/
position:absolute;
/*our page width*/
width:1000px;
/*center absolute div*/
/*put div on the center of the page*/
left:50%;
/*move div 50% right to put it in the center of the page*/
margin-left:-500px;
/*pu the div fist on the page*/
top:0px;
height:200px;
/*color section for identification*/
background:#f9acac;
}
#footer
{
width:1000px;
clear:both;
/*center relative div*/
margin:auto auto;
/*color section for identification*/
background:#ffd4d4;
height:30px;
}
To see a live example click here
To download all fiels for this example click here
Don't forget that the most important SEO rule is "Have good, original content". All other optimization just fade to this and help you for a limited time, because search engines change their algorithms pretty often. Of course, pushing your content higher in the page is also a good optimization that will help you, whatever the algorithms are.
Share this with the world
Related
Comments
No comments at this timeMake yourself heard