Nav & Search

New Website – Semantic HTML 5, SEO and Transcendent CSS

Projects

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:

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<title>...</title>
<link rel="canonical" href="..." />
<link rel="shortcut icon" href="..." type="image/x-icon" />
<link rel="alternate" title="..." href="..." type="application/rss+xml" />
<style type="text/css">
@import "...";
</style>
<script type="text/javascript" src="jquery.js"></script>

<!--[if IE]>
<script>
document.createElement("header");...
</script>
<![endif]-->

</head>
<body>

<header>
<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>
</header>

<article>
<header>
<h1><a href="..." title="..." rel="bookmark">...</a></h1>
<p>...</p>
</header>
<p>...</p>
<footer>
Published <abbr title="...">...</abbr> by <address><a href="...">...</a></address> ...<abbr title="...">...</abbr>.
<p>Filed under: <a href="..." rel="tag">...</a></p>
</footer>
</article>

<nav>
<ul>
<li><a href="...">...</a></li>
...
</ul>

<ul>
<li><a href="..." title="...">...</a></li>
...
</ul>

<ul>
<li>
<figure>...</figure>
</li>
</ul>
</nav>

<footer>
...
</footer>

<script type="text/javascript" src="global.js"></script>

<!-- Google Analytics below -->
...
</body>
</html>

The HTML <head> starts with the HTML 5 doctype, it contains the necessary description and keywords meta-tags (but not the ones that only clutters), a unique title, the website icon (although I haven’t made one yet), the canonical reference (if the website pops up on different URL’s) and the RSS-feed. Finally the head contains the main style sheet, jquery javascript-library and some Javascript to allow HTML 5 tags in Internet Explorer.

I tried to get as little code as possible before the main content, as a result I only put a single <header> element with the main banner image and a link to the main page before the main content which is contained within <article>-tags. The relatively compact header means that the <H1> is on the 33rd row which also makes Google happy. After the <article>-tag (or tags) the site navigation is put in HTML 5 <nav> elements in lists, I might put a few more (dynamic) links in there which references similar pages on my site, the important bit is that they link to the main pages of the site. I’ve also included external links to the main social sites I use. The key here for good SEO is to link to the important pages while keeping the total count down, we don’t want too many outgoing links and they bring down the content to code ratio. The footer basically only consists of a small copyright notice (which really isn’t necessary but anyway recommended according to what I’ve read) and the Javascript and Google Analytics code is placed right before the page ends to optimize the loading time.

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.



Leave a comment

Your email will not be published.

*