Reduce your code.

Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!

In January I told you to lose the fat in visual clutter and plug-ins, now in the second half of 2008 we’ll talk about trimming to create a more semantic, SEO friendly, easily maintainable, clean and lean website code.

To start with, keeping styles and javascript out of the header and in their own external files that you call into the document does wonders for improving readability, faster loads, and ease of maintenance.

Rather then multiple lines of style information replace it with one line, putting all of that in a .css file. Similar with javascript you can put it all into a .js file and save some space with a call to that file. This is also convenient as changes made to the external file is applied to your entire site. Changing the font colour for your links can be done once, instead of several times for every html document. At the same time this file caches and as a result increases the speed in which your site loads.

However, the meat of reducing the bloat in your website code comes in minimizing your css elements and making use of existing html tags rather then creating multiple div’s. So rather then creating a separate class for your navigation in your header you use the header class and apply style to you unordered list like in the following example.

So here is the basic structure of the header,

and it’s styled like this

#header {
display:block;
height:61px;
}

#header h1 {
width:282px;
height:41px;
background:url("images/logo.png") top left no-repeat;
text-indent:-9999px;
float:left;
}

#header ul {
list-style:none;
}

#header li {
font-size:1.1em;
padding-left:1.56em;
float:left;
}

This reduced your code by at least two divs and a few spans. The same concept can be applied throughout your website, giving an entire section a class, and then using tags to fine tune the details within. Another good example would be giving your posts a class and then using the small tag to format the date in a similar manner.

So go through your code and see what can be reduced, and once you have the leanest possible html and css, run your css through cleancss for even smaller file sizes. And if you have any questions feel free to ask in the comments below.