It seems the most of the users here are graphic designers. I've seen that editors like Dreamweaver are pretty common, so I would like to stress some of the tricks that acctually are the most important for Search Engine optimazation.
Valid and Semantic code:
- We all know about validation. To validate a page means you've used no deprecated tags, and that all your code are nesten fine. The most important thing is that your code is
semantic. This means that you are using proper tags in the right occations. This means <h1> for site name, a list for menus, and so on.
I will explain some techniques to use valid and semantic (X)Html and css to get the result you want.
The header:
The
header/logo is really just a background color and a nice font. The problem is that every user got to have that font installed to display everything right. Or do they?
The CSS-Technique:
- The image replacement technique is a good approch to the header issue. This is a very easy technique that can be used for everything.
Note that I am skipping some code in these examples. Click the link at the bottom to se full Html Strict and Css with explanations.
(X)HTML:
Code:
<div id="wrap">
<h1><a href="/ydf/" title="Home"><span class="hidden">Happilycreate.com - The personal portfolio of Mr....</span></a></h1>
</div> <!-- end wrap -->
CSS:
Code:
* { margin: 0; padding: 0; outline: 0; } /* Browser resetting */
* .hidden { display: none; }
/*--- Layout ---*/
div#wrap {
width: 900px;
height: 100%;
margin: 0 0 0 50px;
display: block;
}
/*--- Logo. Using imagereplacement for header ---*/
h1, h1 a {
display: block;
width: 250px;
height: 139px;
background: url('images/logo_masthead.gif') no-repeat top left white; }
The result:
-
http://2dropsdesign.com/ydf/
-
CSS with explanations
I will explain some other usefull techniques later on. Please add your own techniques as some may learn from it.
