Robin Whittleton

Kyan vs. HTML5

Here at Kyan we like to keep up to date, so new technologies regularly come under the spotlight. This week’s focus: HTML5. Jumping straight into an unknown is rarely a good idea for a client project, but with no such qualms about internal projects I elected to rework our intranet.

First off, it’s important to point out that a lot of the promise of HTML5 comes from new technologies: the canvas element, <video> and <audio>, and the new &lt;input&gt; types (previously known as Web Forms 2.0). For our intranet these either have no obvious applications (&lt;canvas&gt; & &lt;video&gt;) or aren’t implemented in the common browsers being used (for us that’s Safari, Chrome and Firefox). Where we can benefit currently is the extra semantic elements and the tidying up that comprises the majority of the specification.

So what specifically did we change?

  • Simplified the header. The new simpler &lt;doctype&gt; and &lt;meta&gt; elements remove a bunch of cruft, and I took the opportunity to simplify the linked CSS and Javascript.
  • Changed some of the in-page containers to their ‘added semantics’ versions. For example, where previously we were using a &lt;div id="header"&gt; we can now just use the HTML5 &lt;header&gt;.
  • Changed some of the text elements to be more semantic. For example, previously the &lt;small&gt; element was defined to mean ‘make this text smaller’. In HTML5 it’s gained a semantic meaning of ‘this text is smallprint’.
  • Ran the code through an HTML5 validator with some interesting results. There isn’t an official W3 HTML5 validator yet, but you can use their development version (which is based on Henri Sivonen’s validator.nu). This is capable of some validation that the older W3 validator couldn’t do: e.g. warning if the number of table cells in a row doesn’t match the number of table headers.

The results

All in all, a lot of the benefit of this exercise came from a thorough reading the HTML5 spec and blogs like HTML5 Doctor even if we can’t directly apply those technologies yet. It also gave me a chance to refactor some of the older parts of the system into a more modern markup style. This should stand us in good stead when we start to use these technologies on a public-facing website.

Tags: html, html5, standards, upgrade

See more posts

Comments: 1

gav
commented on

Looking forward to seeing the 'cruft' tag implemented ;)

Add a comment

Note: comments are moderated before publication.

Most Popular

Free Wifi in Guildford

Peter Roome

I was asked by a friend today if I could recommend any bars/restaurants/cafés in Guildford where she could access free WiFi on her laptop. Besides Giraffe I wasn’t aware of anywhere else in town so I posted the question to Yammer in the office and received a number of help…

Kyan Jukebox Festive 50 2008

Gavin Shinfield

Alright pop pickers? Not ’arf! Well, it’s that time of year again, best of 2008 lists abound so I thought I’d put together some of the top tracks to be rocking the Kyan jukebox from this year’s releases and now that Saint John no longer graces our airwave…

Easy image rollovers

Robin Whittleton

Recently themeforest.net ran a quick tutorial on how to achieve an image slide effect similar to our homepage. I thought I’d go into some more detail about the design decisions we made.

Writing is hard, so do it

Neil Middleton

Over the last few months I’ve been working on something that I wouldn’t have seen myself doing at any point in my life, and that’s the task of writing a book. I’m not talking about a ‘Janet & John’ novel, or some sort of ‘Fifty Shade…

We're hiring! Join our team, see all of our latest jobs.