The beauty of web standards

Image taken from designblurb

Image taken from designblurb

I dont consider myself an expert on web standards, far from it. But I know a good thing when I see it and experience it. Ever since reading Jeffrey Zeldman´s book, “Designing with web standards” I´ve been an avid web standards uhhh, guy.

When I got my first job as a web designer / coder I only knew how to use tables for layout. I was quite good at it actually, all those spacer gif´s ahhh, the good old days. The company I worked for had little insight into the div layout thing, it wasnt until I started doing it by my own motivation that we started to do table less layout. And when I read Jeffrey´s book things really started to develop fast for me and the company.

I´ve been reading up on some html 5.0 stuff but at this moment in time it seems like a distant dream, browser support well, sucks! It seems like the browser vendors are doing a bit better on CSS 3.0 than html 5.0 which does help some. But of course there is always one browser (guess who) that is really lagging behind the rest.

I coded my own site to meet the w3c standards and validate. This stuff is actually quite simple, just learn what some of the tags are supposed to do. The p tag is for a paragraph of text. Block-quote is for a quote from someone. H1 is the main headline of the page and you should use h2, h3, h4 etc for the subsequent headlines within the page. Use strong for stuff you want to be bold, it´s really simple when you just read up this stuff. I highly recommend Jeffrey´s book.

gummisig.com block quote

gummisig.com block quote

Facebook block quote

Facebook block quote

A great example of the benefits of correctly marking up you code can be seen when I imported my rss feeds from my site to the notes in Facebook. I actually was a bit surprised, but after getting over that I was like “of course, yeah web standards”, not in a nerdish way of course. Everything looked great in Facebook too, they apparently have also made styles in their css to accommodate for standards. My blockquotes look like blockquotes in the Facebook notes as well.

There are millions of other reasons to code your site with standards, this is just a small one. But it is fun to see the result. This should also look good on handheld devices and rss readers, etc.

Good markup will look good everywhere, except maybe in Internet Explorer, pun intended.

You should follow me on Twitter here