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
Oh… I always thought you had to have your site title (Calm Banana) in an h1… now I know better. This will help matters a bit in my future design.
Oh and I need to put up an introductory message… Oh and I need to fix my navigation… so many things to do, so little time…
Great entry.
I hate this day. 
We all know my coding sucks, let’s not rub it in!! If anyone REALLY wants to see it, they can just turn it off with the web dev toolbar.
… Actually, I just did that, and it doesn’t look too awful!! Yay! 
Occasionally I use text browser for surfing. It’s not quite same as with images and all, but in some way quite fun :P. I didn’t go nude this year (nor last year), I think I might try next year, we’ll see it then. Anyway I can tell you that your site isn’t afwul to surf with ELinks, though you right your sidebar could be later *hugs*
An excellent blog post and one which I hope will inspire me to take a look through some our sites and fix the mistakes. Glad to see you got round to stripping for us! 
Omg, this is the smallest comments textarea on the planet. FOR SHAME RACHAEL.
Kidding, kidding. I think your site looks great, nekkid! XD
Mine looks worse, Rachael. Yours doesn’t look that bad. To me, Amarantine looks like a pile of junk all thrown together, lol. I want my CSS back. This is my first year of doing this. I thought I would have the fun also *wink* *hugs*
There’s no rules against using your domain in your h1 :p
PS. Increase the cols and rows on this textarea!
Really useful and motivating information, thanks for the pointers
I somehow picked up putting my site name as h1 on every page, too. I wonder where that started
You know what? I like it when the site title is in h1. At least I know which site I’m browsing you know! (Especially for mobile phone users. You may leave the browser on for a while and then forget which site you’re on.)
I think it would be particularly useful to have internal anchors with “Go to navigation” “Go to content” “Go to footer” etc. at least in no-CSS mode so it makes life just a tad more easier.
Like Jem said, there is nothing wrong with using your website in the H1 heading. Where did you even read that in order to use the H1 it has to relate to that page’s title?
You use headings in order of appearance, and even default Wordpress themes have it set up as so: H1 is applied to the website’s name, h2 is usually the description (in your case “i give free hugs”). Next of course should be h3 which can be applied to your entry titles, and apply h4’s to the headerings that your sidebar would use.
Where did you read that it wasn’t okay to use your website in an H1?
What Jordan said.
I missed your nakedness. :S
Haha I didn’t do this either, I don’t think I even want to know what my site looks like minus the CSS!
Are you kidding me Rachael? I just viewed your site nekkid (thank you Web Developer Firefox plug-in) and it looks fine to me. I was able to see everything just fine.
I wanted to participate in CSS Naked Day but I was still figuring out WordPress themes and kinda wanted to keep working on the CSS of them, ha.
I missed the whole naked day thing, didn’t even realise it was happening. But yeah I didn’t get the whole H1 thing. Meh, I don’t know much though.
Don’t talk your CSS structure down so much Rachael.
I think it’s actually quite good practice to code the navigation at the bottom as this forces Googlebot etc to go through all the useful keyword content in the page before being diverted off to your other links.
Don’t beat yourself up. You have at least got the right stuff in there to start with! No nested tables or inline styles from what I can see. Adding a few skip links would help.
Just a quickie: navigation is generally best at the bottom of the page. Slightly counter intuitive, but there’s good reason. Navigation stays the same on every page, and once the user knows what the nav is, they really don’t want to have to have their screen reader go through all that before they get to the page content - on every single page.
Which is why it’s often best to have the source order place page content first, navigation last. And use some skip links just in case. Also, placing page content near the top helps SEO a little bit too.
Anyway, your mark-up isn’t too bad at all
Also, if you want CSS naked day on any site on any day, use Firefox and the Web Developer Toolbar. Once installed you can press Ctrl + Shift + S to completely disable CSS. Press again to restore. It’s a good way of quickly checking source order without needing to inspect mark-up.
Leave a comment?
·
Rob Hawkes said:
Don’t be so harsh on yourself, it’s just a bit of restructuring you need to do, at least your site actually works without CSS!
I’ve done the same as you with making my site title the H1 tag, though — it only occurred to me the other day how stupid it is. *fixes in new layout*