Christian Heilmann

HTML5 – Moving from hacks to Solutions – my talk at Confoo in Montreal

Monday, March 14th, 2011 at 8:03 pm

I just returned from Confoo in Montreal, Canada where I gave a closing talk on the second day about innovating on the web using HTML5. Here are the slides, notes and an audio recording of the talk.


Audio recording


Today, we’ll talk about HTML5 - moving from hacks to solutions. This is a topic that I’ve covered a lot lately but funnily enough – I am not getting tired of it.

We work in new media!

The reason is that I’ve seen the worst of the web and I see HTML5 as a chance to make us move forward in our evolution of the internet as the media that works, is available for everyone and makes us more efficient rather than turning us into couch potatoes and forget our day to day worries in exchange to watching artificial people live the life we would love to have.

Oh, Canada!

First of all, it is good to be back in Canada – I like Canada a lot, Wolverine is from here and all the people I met so far in our small world are amazingly crafty developers.

HTML5 is tech evolution in action

So what is all that HTML5 stuff about? To me, it is about moving forward and letting go of ideas we consider to be the best solution but really only use because we are familiar with them. Better the devil you know, right?

A much more flexible internet experience

I think as developers we owe it to the world to build a better internet experience. Computers are very versatile things and connectivity allows us to keep things up-to-date, react to change and access systems on-demand rather than having all of them hoarded somewhere.

When did we stop dreaming of awesome computers?

If you look at the movies of the last few decades you will find that we more and more moved away from computers of awesome that react to voice recognition and have unlimited potential to product placements of the currently newest smartphone or system. The same seems to happen to the web – a lot of people already see the web as boring interlinked texts and web sites that don’t help you fulfil a task. Instead people see small apps for smartphones, tablets and other mobile systems as the future. I think the web as a concept is big and clever enough to allow for both.

Uprading is a good thing

Not many people complain when they get upgrades in real life. A better seat on the plane is a nice thing to have. A faster computer makes you work better as you don’t have to wait for the bloody thing to load and finish the tasks you have to achieve using it.

Staying in the comfort zone

When it comes to web technology though, you find a lot of people who are unhappy about change and don’t trust HTML5 and related technologies yet. Change can be a scary thing – especially when you’ve been disappointed in the past. It is tricky to trust browsers to do things right for us and it is very tempting to stick with what we know and say this is all we have – this is how good the web can be.

Still waiting for the closed technology revolution

Over my career I’ve seen many attempts to make the web a better and richer experience. A lot of plugins came and went. Java applets, VRML, Real Player, Quicktime, iPix, Shockwave and many more promised to make a browser more interesting and a richer experience. Flash and with it Air and Flex went furthest out with it and their success and adoption rate shows that we need a richer web. However, pure Flash solutions are still a rarity on the web. When it comes to complex forms, huge data systems and web based applications you are more likely to find hybrids or slow and annoying server-driven systems than slick Flash interfaces.

Starting the open technology revolution

The great thing about HTML5 as an idea is that we don’t ask people to buy software or understand and start to trust new technology – instead we innovate on already existing necessary infrastructure. You use a browser to surf the web – all we have to make people do is upgrade their browser. And as everything is open there is no ambiguity as to where things are going in the future – instead of making people wait for upgrades their requests and needs drive them.

A few steps towards a better web

We have the technology and we have the ideas to make the web much, much better. What we need to do is think the right way.

Step one: stop thinking in limits

If we want the web as it is now – easy to access, open for everyone and simple to upgrade – to survive we have to stop thinking in a limited way. Web sites do not have to be multiple columns of text or follow the same principles as print design does (plain psychology and aesthetics for humans are a barrier to this, but shift can happen). Web sites can be applications that break the concept of a text document. Web sites can be independent of the size of the browser viewport – either by adapting and showing more or less according to how much space is available or by just telling the user they can move in any direction.

Step two: use what the client offers

It is time we thank the browser vendors for supporting new technologies by using them. We’re right now in a Catch-22 situation were some people want browsers to support tech but the companies making browsers don’t add them yet as there is no demand. Time to break this cycle. Go on then, use local storage to make your interfaces much simpler by storing some of the information. Take a look at offline storage – not only for mobile interfaces. Play with geolocation to tell a user where they are or to prefill forms. Use native video and audio instead of yet another Flash movie. Use Canvas and SVG for charting and a fallback image linking to a browser upgrade page. Play with touch events and even with device orientation. A lot more than you think is already possible and can be used once you put it in a simple if statement.

Step three: increase your vocabulary

Communication is about vocabulary. Sure, you can make sense with a few simple words and a set of simple instructions but to make a sentence engage and spark the theatre in the head of the reader or listener you need to be able to play with language and the more pieces you have the nicer the mosaic will get. On the web we right now grunt and point when it comes to speaking to browsers. The old HTML vocabulary has become an anachronism hailing back to the times where all we had to do is mark up academic papers. Forms especially were too simple in what we needed to do with them to build enjoyable interfaces. In order to make the browsers do the things our apps natively should do we need more, intelligent HTML elements. The HTML5 spec is a step in the right direction, and we should use these wonderful new constructs to tell a better story. Non-meaningful DIVs should be replaced with SECTION, ASIDE or ARTICLE, form elements should not be a type of text but a phone number, a URL, a number or even an email. All of these words are at our disposal, but we don’t use them in day to day conversation yet which is why there is not much happening in terms of support. We should not be the translator for HTML to the browser – this can only lead to telephone-esque misunderstandings.

Step four: allow technology to retire

This is a tricky topic right now. A lot of HTML5 is not being used as there are old and outdated browsers still in use and for reasons beyond our control are not being upgraded. Here’s an idea: let’s allow old and tired browsers to retire. Let’s give them a working version of our web site that is plain HTML with reloads and the content available and let’s concentrate our efforts in supporting the web that is around the corner and needs us to become mainstream. Yes, we can simulate almost all of the new things in HTML5 for legacy browsers, but if we do that we also need to test on them to see that everything works smoothly. We should not spend our time testing for old browsers when there is new stuff to be tested. There is nothing wrong with delivering an old school experience to old technology and increase the enjoyment when and if the environment allows for it.

Step five: build systems that automate annoying tasks

Of course there are some annoyances in HTML5 - it is a young technology. The biggest issues however are not technical issues but licensing and IP related problems. For example to embed a video as HTML5 you have to provide it in three different formats to cover all browsers. That’s why we need to make it easy for people to make the switch. for example is a service that converts videos in dozens of formats and redirects the client in use to the correct format automatically. This is what we should thrive for – find issues and build systems to work around them – this is how money is made.

Step six: build tools that help others build with new technology

We have specs for the technologies and examples how to use them. We can, however, not expect everybody to be as excited about the things we are getting high on right now. We can also not expect everybody who builds things for the web or writes content for it to write everything by hand. The editors we use right now do not create HTML5 - most actually create XHTML instead. We now need to ask the companies who say HTML5 is the future to build systems that allow maintainers of the web to build it. One cool example of that is Butter which is a visual interface on top of the Popcorn JavaScript framework that allows you to build interactive presentations with HTML5 video. Aviary have an online image editor that uses HTML5 and the Aloha Editor is an HTML5 wysiwyg editor for CMS. We need more of that.

Step seven: be part of the discussion

Last but not least we need you to take part in the conversation around HTML5. If you stay out of it, you can’t complain about mistakes being made – all the processes are open and you can be part of the mailing list. It is not a popularity contents – sure, known people working in big companies are very likely to come up with good ideas, but anyone can have those and sometimes it is important not to look at an issue from a professional day-to-day perspective but see what people really need to have fixed. We need you to listen to what people are saying and validate it from your point of view. The earlier mistakes can be spotted, the easier they are to avoid. As we are dealing with open technology, there are no secrets and there shouldn’t be a reason for people not answering your questions. It is also important to look out for upcoming problems that are not yet in the specifications. Right now for example this would be the device API which will allow you to use cameras and microphones as input devices.


Share on Mastodon (needs instance)

Share on Twitter

My other work: