CSS Styling
Basic definitions such as ,html,body,a etc. I recommend starting a CSS document with these. An example would be:
define font and color. This is the first global definition.
{ font: XXXXXXXX; color: XXXXX; }
html { }
body { width: 100%; height: 100%; margin: 0px; }
This could some some problems when you are working in dimensions that are relative to the container.
a, a:visited, a:hover etc… all of those should be defined.
img { border: 0px; }
browsers tend to put a border around images by default, especially inside anchors
h1 … h6. Personally I prefer:
h1 { font-size: 180%; font-weight: bold; }
the h1..6 contain a default padding/margin normally
…
h6 { font-size: 100%; }
Use of headings:
Search engine robots, such as the googlebot, give these tags <h1>..<h6> a special attention. Use them wisely.
Use of Lists:
Same as headings, lists are read by robots. Using a <ul> for a menu with <li> that contain links is recommended.
Titles and Alts:
For images and anchors, it is recommended to define the title attribute (<a href=”…” title=”” >…). For image tags
set the alt attribute in addition.
Use of meta tags:
These are very important for SEO. Keywords and descriptions are compared with the content of the page, and help search
engine robots “grade” our pages.
Use of & in links:
If you have links that contain & such as: <a href=”http://www.mysite.com/page.php?id=5&something=true”>, replace the & with &
The URL should be http://www.mysite.com/page.php?id=5&something=true.
Centering a page:
There are various techniques of centering our layout inside the HTML document.
<center> tag was very powerful, but deprecated in HTML 4, and removed in HTML 5. I recommend:
CSS:
body { width: 100%; }
.center_layout { width: 1000px; float: none; margin-left: auto; margin-right: auto; }
.page { float: left; width: 1000px; }
…
HTML:
<body>
<div class=”center_layout”>
<div class=”page”>
CONTENT
</div>
</div>
</body>
Javascript are the end of the document:
Javascript should be added at the end of the document and not in the <head> tag. This especially applies to external .js files.
Use of CSS sprites:
The use of CSS sprites is meant to reduce HTTP calls to additional images. Assume that we have a block with round corners, that each corner is
an image. This will result in loading 4 different images, one for each corner. We could avoid it by making a single image that is a combination
of the 4 images, and when we code the block, on each corner we put the background with an offset, that will show us only the piece we want.
Add a Sitemap:
Read more on google sitemaps section.
I recommend using Firefox, the firebug addon with the YSLOW and SGML plugins to inspect your pages. Check your pages with IE6 and 7, since there are many
differneces in the rendering engines that they use. I recommend IETester with DebugBar. View your pages with Lynx (text browser) – it will give
you a better understanding of how search engine robots read your page.
