Over the last week I’ve been rebuilding my website from the ground up, at first it started as a small project to transform the core parts to object-oriented php as a learning excercise. However, I soon realized that once I was at it I might as well take the opportunity and rewrite the output the embrace some new technologies and better practices to generate cleaner and more modern HTML that hopefully is easier to style and even better for Search Engine Optimization.
The goal with the HTML output was to reduce the code to content-ratio (which was already quite good), reduce the amount of code and content before the main content of the page and provide more semantic tags by using HTML 5 (<article> for blog posts etc.) instead of using divs’s with different classes. In the classic practice of using both belt and suspenders I’ve also incorporated microformats into the output. Microformats clutter the code with more classes that it might otherwise be possible to skip but I think that it’ll be good for better search engine indexing and that the pro’s outweigh the con’s. Specifically, Google has said thay they embrace microformats and they provide more hooks to which CSS can be added until all browsers support CSS3.
Basically, every blog post now looks like this:
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="canonical" href="..." />
<link rel="shortcut icon" href="..." type="image/x-icon" />
<link rel="alternate" title="..." href="..." type="application/rss+xml" />
<a href="http://anders.zakrisson.se/" title="Anders Zakrisson"><img src="http://anders.zakrisson.se/style/img/banner.png" alt="Banner for anders.zakrisson.se" width="620" height="80" /></a>
<h1><a href="..." title="..." rel="bookmark">...</a></h1>
Published <abbr title="...">...</abbr> by <address><a href="...">...</a></address> ...<abbr title="...">...</abbr>.
<p>Filed under: <a href="..." rel="tag">...</a></p>
<li><a href="..." title="...">...</a></li>
<!-- Google Analytics below -->
When I was at it I also redesigned the entire site design, I’m aiming for a sort of notebook look since that’s basically what it is. I think that it’ll evolve further and become more polished but I’m quite happy quite happy with the basic looks and use of screen real estate. I used the 960 grid system for a basic two column layout and positioning but I’m trying to find ways to make it look less static and rigid by offsetting various elements.