Different types of info graphics for the Web
by Gaurav Gupta
The evolution of web development technologies gave rise to new forms of communication, education and dissemination. In particular, infography, a visual resource born in the nineteenth century, has been incorporating sound, animation and interactivity, three characteristics impossible to achieve in printed paper. In the Web medium, however, there are several tools to implement these elements, and give rise to the following types of info graphics:
Info graphic / Info graphics. With this generic name is known the static, traditional web info graphics that are implemented with an image in some format without animation (JPG or PNG) or with images and HTML text. They are virtually indistinguishable from info graphics that are published in printed media, although they may contain links.
Gifographic. Info graphic created with an animated GIF image. It is a traditional format known by all (dated 1987), which allows to reproduce a sequence of images perpetually, without sound or control by the user (unless other technologies are added). Example: How Social Signals Impact Search Engine Rankings.
Video info graphic. Info graphics represented with a video. Naturally, there can be animation and sound (even videos or archive images), but the control by the user is limited: you can only play, pause, rewind and advance, without affecting the way the content is presented. Example: Evolution of the F1 Car.
Advanced info graphics. Other technologies allow to implement enriched info graphics that are inserted more naturally in the DOM of the page. The SVG image format allows you to create scalable, animated graphics, high quality and easily index able for search engines. JavaScript can add to those graphs interactive features (that is, make the graph to be modified by user action). CSS3 helps you manipulate your visual appearance and facilitate or even enhance animations. To this combination can be added videos, images, maps and other objects in multiple formats. Example: Wind Map.
The traditional info graphics are those that present the greater compatibility, ease of realization and speed of load. In these three aspects, gifographics (one of the major trends of the moment) are less convenient but gain in expressive clarity (certain concepts are better understood through an animation than a still image). The more complex and heavy video info graphics have the problem of forcing the user to read the info graphics in an established order; however, in compensation, they have the wide possibilities of audiovisual support. Finally, the info graphics based on SVG, JavaScript and CSS3 can represent a great complexity of realization (not only designers but also programmers are required) and poor performance, but in return they provide, by far.