HTML5

I redesigned this site in November, which gave me the chance to use ExpressionEngine. I quickly grow bored of the things I do for myself so I fancied another redesign and this time around I wanted to use HTML5 and see what it was all the fuss was about.

HTML5 has been generating some steam since the turn of the year so I figured I’d give it a stab.

Let me just say

Some browsers will not display this ‘properly’. Internet Explorer needs this bit of javascript, and Firefox 2 and Camino do not work well either.

Whilst this site acts as my blog and portfolio, it is still experimental so there may be things that don’t work properly. And because HTML5 is still evolving and changing, please get involved in the discussion – if you think something needs changing, say so, but also say why.

What I like

It was a good opportunity to think about the semantics of the site – which goes where and why.

Tags like header, nav, article and footer make perfect sense (to me at least), but we all interpret them differently. I found the section tag a little loose to be honest:

The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

I’ve interpreted this to put this entire blog post in a section and within that section, comments in a section tag and the comments preview as well.

This may not be the correct way, but we’ll see.

I like how short the doctype is and that you don’t need to give a type to CSS and JavaScript tags.

Looking at the source code, it all seems in better structure and order than it would do with div’s everywhere.

That said, it’s not perfect yet.

Some things I’m unhappy with

jQuery

For my aside, I use jQuery tabs to dispay categories, tags, etc. But to get the jQuery working, I’ve had to give the aside an ID. I’d prefer not to do that, but as jQuery and HTML5 grow, this will get sorted.

<aside>

The section below my navigation is currently in an aside. I’m not sure about this. It sits outside the article tag, but the aside for my tags and categories sits inside the article tag. So where should an aside go?

<header>

The header tag requires a <h1>, <h2> etc

The header element must have at least one h1–h6 descendant

So in my case, it is at the top of the page so it needs to be a <h1>. However, there is a debate about this and in my opinion, the <h1> should be around the blog title in this case. So that is what I have done. But now I have two <h1>’s and that is bad for accessibility mmmkay?

I don’t like it but I’ll go with it for a while and hopefully there will be a solution.

Also, whilst I’m on it, should I put the blog post title in a <header> tag? How many can/should you have?

Ok, I’ve stopped moaning

I don’t want it to sound like a moan, I know HTML5 is new and will change but just thought I would raise the issues I’ve come across.

Validation

This site does not validate but I’m ok with that. It is the WAI-ARIA role attribute that causes the issues.

Actually, I’ve noticed that on this page the social bookmark links create this error:

WHITESPACE in QUERY

Er, what?

Contact form

The contact form also has several ARIA attributes, and if you look at it in Opera, you’ll see it has a nifty built-in validation.

Design

I don’t intend to harp on much about the design of this site. Some of this article is still true

• The font is MgOpen Modata
• I find it hard designing for myself

Come back in six months and it will probably look different again!

CSS

A few CSS3 bits and bobs in here, in particular rgba which I love and check out the site in Safari for some transition effects on navigation (that said, the rollover effects are pretty subtle).

Thanks

Here I must give a shout out to Bruce Lawson who is doing great work with HTML5 and took the time to discuss some HTML5 things with me. So keep an eye on Bruce’s site.

Also, check out HTML5 Gallery by Richard Clark.

Future

I’ll be trying to keep up-to-date with HTML5 and whilst it no doubt will change, hopefully so will the code behind this site.

Oh…

One last thing. If anyone is heading down to FOWD there is a HTML5 meetup planned for afterwards. If you can’t make that, come and say hello to me anyway!

• Category
  • Coding