Blog

An HTML5 infographic, animated with HTML5 – a world first?

September 21, 2012 by:

This infographic, or animographic (as we’ve just coined it), summarises the need-to-know facts about HTML5 and brings them to life with animation produced using HTML5.

[iframe src="http://www.mark-making.com/animographic/sample/index.html" width="100%" height="200"]

As a creative agency we love to put our grey matter to the test. With already plenty of infographics out there on the subject of HTML5, our self-imposed challenge was to try and do something that would stand out. The big idea?

If it’s all about HTML5, why not animate the infographic using HTML5. Seems kind of obvious, but to the best of our knowledge it’s the first of its kind.

The animation element has been developed in HTML5 using Adobe Edge. It’s been a lot of fun and we have learnt a huge amount in the process. For a visual account of the journey we have been on, check out our Behance profile. Individual credit goes to Russ Henderson for his conceptualisation and art direction, and to David Souch for his illustration and graphic design skills.

The next step for us is to develop some useful resources on HTML5. Watch this space for my white paper on the subject and handy tutorial videos on using Adobe Edge. We’re also working on our own mini-movie animation based on the animographic.

View the animated ‘animographic’

[iframe src="http://www.mark-making.com/animographic/sample/index.html" width="100%" height="200"]

View the static infographic

HTML5-infographic-static

P.s. HTML5 is a language that is still under development and as such may not correctly work in all browsers. It is always important to ensure your browsers are up to date, not only for security reasons, but for the new features and HTML5 support. We created our animation using Adobe Edge, which is still in development by Adobe. We did say this was cutting-edge stuff…

Further reading

If you want to learn more about HTML5 read the Wikipedia article

What do you think?

Shannon Young

Shannon Young

Front-end designer/developer