Biopsy of an early HTML5 Project

We've just completed our first foray into HTML5 at primvintagefashion.com
It's a simple HTML5 intro, true, but for me it was an education in what is possible / what is not with HTML5. There's lots of HTML5 functionality crammed into this small space - the CANVAS tag (which scales to fit the screensize of the device visiting) - animation loop - CSS3 (that Typewriter font is downloaded - and rendered - by your machine on the fly) and the AUDIO tag.

SO, HOW WAS IT?
Well, the javascript extensions for HTML5 are actually pretty fun. Lower level than AS3 but way more powerful than what straight javascript/jQuery offer. It's always going to take longer to build something than with Flash, but with practice you could probably get it down to about 125% of the effort. That sounds bad, but it's much better than my original thoughts of double the effort.

DRAWBACKS?
- Well, the big one - and a surprise - was the differences between HTML5 engines. It's not as standard as Jobs et.al. would like you to believe. For example, pre-update iPhones struggle to render anything at all..!
- Audio is especially badly supported. We used SoundManager (which uses the audio tag when it can, and a small flash movie when it can't) but it's really hit-or-miss whether a device is going to give you sound. If you DO get it, there's no real (certainly no standardised) way of triggering a sound at an EXACT moment. That's not such an issue with our little typewriter, but for most apps - especially games - this is ESSENTIAL. This issue alone shows that HTML5 has some way to go before it can match Flash or supplement the app store
- Performance. It's not good. At all. HTML5 javascript is SLOW on anything under a 2.5Ghz Macbook Pro - again, it's not so noticeable with this Typewriter - but the fact you can notice it does not bode well.
- Internet Explorer - until IE9 comes out, we just don't have support for IE. Sure, you could force visitors to download Chrome frame - but is that really cricket? Nope - particularly for an intro. So, we'd have to create a flash version ANYWAY - but in this case we're lucky - there are no interactions (other than to click through) so in a cunning and slightly cheeky fashion, we simply VIDEO'ED our HTML5 animation (using Quicktime screen recording) and wrapped that in a flash app!

So there you have it - an HTML5 intro that can be viewed from pretty much any device. Phew!

WHAT HAVE WE LEARNT?
- It IS possible to deliver complex content to all devices - but only using a mix of HTML5 and Flash
- HTML5 has some way to go before it can properly compete with native (e.g. App store) apps or even Flash - particularly in terms of performance and sound management

WHAT WE WANT
- Proper choice i.e. Flash on iPhones/iPads, decent JS Audio support, the death of IE9-, WAY better javascript performance, a stick with an astral body atop

And finally, here's a handy chunk of the script that you can use for determining whether your visiting browser should be dealt HTML5, Flash or neither:

function isiPhone() { var agent=navigator.userAgent.toLowerCase(); return (agent.indexOf('iphone')!=-1); }
function supports_canvas() { return !!document.createElement('canvas').getContext; }
if (supports_canvas()) {
document.location.href="html5.html";
} else {
if (isiPhone()) document.location.href="home.html"; // Non-HTML5 iPhones cannot handle flash either, so skip direct to home-page!
document.location.href="flash.html";
}