I challenge you to create a beautiful CSS3/HTML5 infographic :) See at the end of the article for more infos.
Why you should build your infographics in HTML5 and CSS3.
I see a lot of infographics around here, and most of them could be built only with web technologies (HTML5 + CSS3 + SVG).
src:
1
2
3
4
5;
Most of the infographics we see are beautiful, but sooooo static.
You can make them much more alive if you use the web technologies.
Interactive content
You can change the style/content of an element if the user interact with it: :hover effects, fold/unfold on click, buttons to decide
what to draw and select options (select a country, choose how to sort, ...), etc.
Live data
With an image, you're just showing a "snapshot" of your data at a certain time. The web allows you to fetch data. Your infographic could
look completely different depending on when it is viewed. Build your graph with
SVG or Canvas (here is an awesome library to do that: g.raphaeljs.com/) in real-time.
Animations
Make it move! With SVG SMIL, CSS Transitions, Canvas (see ProcessingJS), CSS Animations,
you can build beautiful animations. You can even embed a video!
Make it sexy
Well, it's obvious, your infographic must be beautiful. With CSS3, you have infinite
ways to make things beautiful: gradients, font-faces, multiple background, transforms, SVG background, ...
Side effects
- Your infographic will be accessible (copy/paste!)
- People will be able to enhance it (view source! Host it on github.)
- You can have multiple layouts, like a mobile layout (mediaQueries)
Want to give it a try?
Here is a random list of free data sets. Take a look, build something
interactive/live/animated/sexy in CSS3/HTML5/SVG, share it here. I'll
publish the most interesting ones on the Mozilla Hacks blog :) (probably in June).
Comments