How not to markup your site

This entry was posted on April 9, 2008

Today is CSS Naked Day, where (hopefully) many hundreds (if not thousands) of bloggers will strip off their CSS and show you their blog’s nudey bits. I was originally not planning to go through with this, because I’m so ashamed of my code right now, but then I thought this would be a good opportunity in teaching you how not to markup your site.

CSS is very useful, in that with CSS you can cover up some of the “mistakes” in your site. However, it’s important to fix those mistakes at the source, so that you shouldn’t need to hide them with CSS. It’s important to get the bones to your website right, because not everyone will be viewing your site the same way you designed it.

Let’s use my site as an example. It looks fairly aesthetically pleasing, right? Nice big title at the top, navigation below it, nice neat sidebar over on the right, etc. etc.

How does it look when CSS is turned off?

BAD.

My title is at the top where it should be, although it’s in an <h1> on every page, and is therefore interpreted as such. Is the title of every page on my site “Calm Banana”? No! So why am I using an <h1> tag for my site title? Because I’m naughty. One of the first things I have done with my new design is take my site title right out of that <h1>.

What comes next? My welcome paragraph. This is fairly good, I think. My site name doesn’t make it obvious what my site is about, so let’s explain things to people.

After the welcome paragraph one might expect to see my navigation. After all, once you’ve found out what a site is and what it’s about, it’s not unreasonable to assume that you might want to navigate it.

Not in this case. Next in the markup is my sidebar (of which my welcome paragraph is a part). You (the user) are forced to scroll over my blog categories, my monthly archives (of which there is no April 2008), my contact link, my q*bee link, my RSS feed, and my tagline before you finally get to the navigation.

After that you finally get to read this (my blog). About time! In fact, one of the few elements of my site that is actually in the logical place is my footer, which is right at the bottom. There really is no excuse for the shoddy piece of work I like to call a “structure”, and right now it’s top of my list of things to fix.

I look forward to tomorrow when my site can have its clothes back. I miss them.

20 lovely people have commented

·