Web standards content is platform agnostic

A while ago I wrote ‘It’s not HTML5! But that’s ok’ and then I finished a web standards version of The Guardian’s interactive in order to prove they do not require Flash. So when I saw I had been mentioned on The Guardian website’s technology section I was excited!

Who’s who in the phone hacking scandal (in HTML5) >>

Nice implementation in HTML5 – though of course you’ll need a compatible browser. Code at https://github.com/emmasax/Phone-hacking by Emmasax.

I was disappointed by what had been written and want to go into a bit more detail about the implementation of my web standards interactive.

It’s not implemented in HTML5

If you implement something only in HTML5, it will simply be a highly semantic HTML document – no styling, no behaviour. My interactive uses HTML, jQuery, CSS and images. While the doctype of the page is HTML5, there is only one aspect of HTML5 that I’ve used and that is the data-* attribute.

I use it to store the relationships between each person directly in the HTML, then read its value with jQuery.

You won’t need a compatible browser

Ok so technically you will need a compatible browser to see something (structured content), you’ll need one that’s capable of rendering HTML. That’s anything from IE6 to Safari on the iPhone to Lynx (a text-based browser) running on Unix.

Added to the HTML is CSS. I think this is what most people mean by ‘requiring a compatible browser’ because some CSS3 properties only work in nightly builds of WebKit. I don’t use any CSS3 to style the content so to see the basic layout you’ll require a browser that renders CSS2 – IE6 handles this fine.

On top of that I add jQuery. This gives me the required behaviour and a more complex circular layout, which is dependent on Javascript.

The rounded images and borders are combined in PNG masks; used specifically because it doesn’t require the CSS3 border-radius property that isn’t compatible with IE less than 9. A side-effect of that is that IE6 can’t render transparencies in PNGs.

IE6 – the problem child

While I could add a Javascript fix for this lack of support, it gives me an opportunity to show what progressive enhancement is all about. I remove all Javascript functionality from IE6 and these users only get the well structured data. It isn’t possible to feature detect PNG transparency using Javascript, so I use conditional comments to include the behaviour where I want it.

Web standards = works anywhere

Of all the things wrong with most descriptions of web-standards interactives, I mind most that it’s assumed they will only work in the latest version of WebKit or similar. Web standards based pages will work pretty much anywhere – the least you get is visibility of the raw data/information underneath.