Christian Heilmann

HTML5 showcases – open and broken by default?

Saturday, November 13th, 2010 at 12:58 am

As announced earlier I am leaving Yahoo to work in Mozilla as principal evangelist with the focus of HTML5 and the open web. So my job will be to advocate the awesome of HTML5 to the world.

Yay HTML5 and the open web technologies

I love the open web and HTML5 and I strongly believe that they are the future of our work environment. HTML5 brings sanity to the crazy hacking we had to do in the past to run web applications in browsers. I don’t want to change hashes and use iframes to seed browser history, I don’t want to use Flash to allow for uploading several files at a time and I really don’t want to have video that I cannot manipulate from JavaScript.

We’re forging the future happiness of end users here and our main job is to sell HTML5 as the better alternative to what we are doing now. We need showcases to tell the world just how awesome HTML5 is and luckily a lot of people do so.

Be good, be open

The messaging of the leading lights of HTML5 is simple: it is about open technologies and the web. So instead of PDFs and Flash movies a lot of presenters use hand-rolled HTML5 slide systems which are simply documents on the web and anyone can see them with a browser. When Tantek gave his “HTML5 right here, right now” talk at Fronttrends in Poland and YUIConf in Sunnyvale he very much pointed out the graceful degradation of systems like that and their benefits for the web. As HTML slides are on the web people can easily find them and read them.

When it gets weird

The problem that a lot of HTML5 demos have right now though is that they only work in a certain environment. Showcase presentations like Paul Irish’s The State of HTML5: Inaugural Address even need more than one browser to work and Paul switches them during his talk. This is a feat of HTML5 right now – not everything works the same across browsers and you want to show off some of the cool things by sticking to one browser and others in another browser.

A few days ago for example people got very excited about a 3D Tetris implementation by Tobias Schneider which apparently looks like this:

3D Tetris

I went through all my HTML5 browsers and saw this:

I learnt about this demo from Twitter. Whilst the original Tweet by Tobias stated that a Chrome Dev Channel build is needed as the browser to see the demo, retweets and others omitted that piece of information. This is bad. As you can see in the screencast above all I saw was broken implementations – even in Chrome. Only Safari showed it the way it was intended.

The issue is that the slide systems expect environments working without providing a fallback to other environments. I am a geek, I can live with that – if I showed this demo to people who are not geeks they’d get the main impression that HTML5 is just weird and doesn’t work yet.

Tobias more or less agreed to this:

@codepo8 Sorry, but when it isn't working in the browser of your choice, HTML5 seems to be broken right now.

This all in all doesn’t help the cause. If you want to advertise a new book you don’t show a bleached out and unreadable cover. If you want to showcase the reliability of a car you don’t make a video of it not starting.

Using HTML5 demos responsibly

There are a few solutions to these issues:

  • Do not upload demos that only work on your computer and your environment – let people wait for the video of your talk and upload the code to GitHub telling people exactly what is needed to see them.
  • Create a screencast of your demos and offer that one as a fallback for browsers that don’t support your functionality. Test in your live demo for the browser you need to make it work and show the screencast to the others explaining which browser you used to be able to see it live. This also protects you against the very common case of having no connection and conferences. The simplest way to create a screencast is by using Screenr. More tips are available in my Developer Evangelism Handbook.
  • Spend some more time and also support other browsers – this would also allow you to show the differences live.

I know all of this is more work, but nothing that couldn’t be tackled if you distribute the job a bit. Contact others to maybe help you fix your demos for other browsers they are more familiar with and we’ll have great demos to show the world the power and revolution that is HTML5.

Update: and it works! I just wanted to point out that taking Tobias’ example was not about shaming him or anything like that. I loved his presentation and the demo and quoted his tweet to show that tweets will be taken out of context. People not re-tweeting his explanation that the demo only works on Chrome was another good example of how things go wrong right now. To add, following our conversation Tobias did fix a lot of the demo and I am very thankful about this: fixing

Share on Mastodon (needs instance)

Share on Twitter

My other work: