5 Steps to Building a Phenomenal HTML5 Infographic

What’s the case for HTML5?

Even if native frameworks are far more prevalent, we’d argue that the evolving digital landscape – or more specifically, the demand for a strictly standards-based Internet – will render anything that doesn’t work with developers (rather than against them) obsolete. That’s our case for HTML5.

Compelling content is easily and robustly developed, and it has the remarkable potential to create cross-platform apps or media with a mark-up that very simply, lends itself to an enriched user experience. It’s great news for all site owners keen on driving unique traffic or creating “stickier” users (and who doesn’t want that?)


Who’s used it for infographics?

In recent months, we’ve seen an upturn in the volume of HTML5 infographics being produced by organisations with bigger pockets (it’s not yet in the purview of smaller sites and independent bloggers due to development times, and its relative novelty). And still, what we’re seeing in terms of quality and volume is pretty incredible.

We’ve outline five steps to helping you to avoid some of the key pitfalls in devising and deploying your own project, so you can build your own phenomenal HTML5 infographic.


1.   Tell a story.

The first step (or the sketching-doodles-on-napkins phase) involves conceptualising your infographic. The most successful infographics are just devices to tell a story.

Think about what you’d like it to accomplish: are you trying to inform the user, like this infographic that takes you through the hydraulic fracturing process? Do you want to persuade your user to take action, like this imaginative slavery footprint infographic? Or is it simply designed to inspire emotion? How can you communicate your concept as a narrative?

One of the most effective examples we’ve seen is the Life of Julia, an infographic which takes you stepwise, through the life of a fictional character to emphasise the positive impact of Obama’s policies for women (it was deployed by the Obama election campaign team).


2.    Do your research.

It sounds relatively simple and perhaps even too basic to deserve a mention, but there are a few self-appointed infographic sentinels in cyberspace that would like nothing more than to tear your message to shreds. If you’re attempting an infographic that will make use of statistics to further an argument (especially a social or political one), consider this step doubly important.

Make sure you’re communicating the facts, and your infographic suddenly has more credibility (and potentially more links from reputable sources that appreciate your handiwork).


3.    Sketch out a visually stunning design.

Whether you’re working in 2D (read Adobe Illustrator infographics of old) or developing interactive content for an HTML5 infographic, design is an element that is undoubtedly front-and-centre. If you want users to share your content and generate links, expect to invest a good 70% of your total infographic development time on creating work that is easily differentiated from standard fare.

When switching to HTML5, there’s one singularly important consideration: you’re not working with the narrow infographic that requires a user to scroll hopelessly down into an infinite pixelated abyss of useless information; make use of the space to work with the screen in an interesting new way. Mirroring the two-dimensional format isn’t so effective.


4.    Cherry-pick your favourite HTML5 animation tools.

Once you’ve familiarised yourself with the documentation behind HTML5 (it’s important to use the mark-up efficiently, and draw on HTML5’s niftier features), try your hand at implementing them using an animation tool.

These tools are designed for intermediate to advanced HTML5 developers (but can even be tinkered with effectively by novices, although we don’t recommend it without a bit of background first). Here’s two we quite like:

Adobe Edge (Mac/PC): The beta version is free.

Edge is an intuitive development environment that integrates a timeline with drag-and-drop, which allows users to compose each animation “frame.”

Tumult Hype (Mac): It’s a bit pricier at approximately $50

It boasts the same keyframe animation system as Edge, but it’s packed with additional features to customise your final product. Did we mention it’ll always be cross-browser compatible? Creates fully-responsive content? Or that it’s essentially a WYSIWYG editor?


5.    Deploy and optimise!

Once you’re finished, click upload, optimise your CSS and take some browser snaps to ensure compatibility across the board (except for IE6, because really, who cares? And also it won’t work anyway). Pour yourself a hot espresso, snap your biscotti, sit back and take a measure of pride in becoming one of the pioneering developers to fully harness the power of HTML5 for phenomenal infographics.


Your turn: Think HTML5 has been overhyped without any regard for its (lack of) compatibility? Will you be using some of our tips in your own project? Let us know what you think — we’d like to hear from you.

Comments are closed.