Responsive Animated Infographics

Do you remember the infographic? Infographics became very popular because of their impact on conversion. On the user side, they were full of quick, easy to digest information. They were colorful and, when created well, clearly illustrated comparative information that one could pick up at a glance. On the creator’s side, they increased the ROI (return on investment) of their posts and shares. The impact of the graphics on a company’s visibility and brand awareness was staggering. The Whole Brain Blog boasted numbers such as:

• increased traffic to their website by over 400%
• lead increase by almost 4500%
• the number of new visitors to their site to almost 78%

But one thing all of these posts have in common is that they are at least two years old.

If infographics have that kind of potential for performance, why do they seem to be considered a played out fad?

One possible reason is the tipping point for mobile. Infographics that are exciting and all-encompassing on the desktop become an arduous pinch-n-grab affair on a mobile device. This means sharing via social media with the rise of traffic on mobile, causes frustration and decline for the engagement potential on these images.

The next reason is a little more simple. When a concept doesn’t adjust to the present context, it fades away. With more interactivity and motion on the web, a static graphic doesn’t have the same pull as something that is more visually exciting, and here is where motion trumps all.

Animation shouldn’t be considered at the end of the design and development process, it should be the bones. If we marry that idea with the concept of conveying a lot of information visually, we can update the very basis of what an infographic is and does. I took the text content of an infographic I found in the book Knowledge is Beautiful, and reimagined the look, feel, and implementation.

Here is a revisited approach, keeping in mind the two problems equated with its decline. A responsive, animated infographic. Keep in mind that the progress of the text transitions are sped up here in order to demo the animation, not neccessarily the content. Shown below is the collapsed responsive view, so visit the pen here for the full content.

In terms of design, traditional infographics typically make use of a salon-style, visually-loaded method. Here, we’ve still filled the usable image area but updated the design to feel a little more clean. We didn’t overload the graphic with many elements because unlike traditional static infographics, if there are too many different moving parts, it’s disorienting for the viewer. It’s also heavier to load so there is a performance hit.

In terms of responsive design, instead of having the entire presentation be fluid throughout, we had the infographic stay in place until a breakpoint, and then moved elements to different positions, allowing the main SVG to respond fluidly at that juncture. Even though we designed desktop first, our media queries are a mobile-first implementation. I used an SVG which is very easy to make fluid, adjusting the viewport slightly on mobile with javascript.

var shape = document.getElementById(“svg”);

// media query event handler

if (matchMedia) {

  var mq = window.matchMedia(“(min-width: 826px)”);

  mq.addListener(WidthChange);

  WidthChange(mq);

}

// media query change

function WidthChange(mq) {

  if (mq.matches) {

    shape.setAttribute(“viewBox”, “0 0 765 587”);

    shape.setAttribute(“enable-background”, “0 0 765 587”);

  }

  else {

    shape.setAttribute(“viewBox”, “0 0 592 588”);

    shape.setAttribute(“enable-background”, “0 0 592 588”);

  }

};

We’re then animating it with GreenSock(GSAP) to take advantage of the both the timeline and the ability to scrub the animation to find different points in time to interact with on a slider. GreenSock also helps with a lot of cross-browser transformation origin rendering problems on SVG. Below is an example of one piece of information in the graphic displaying on the timeline. Note that we’ve added a relative time for all of these animations to fire at using a label.

tl.add(“likely”);

tl.to($(“.p1”), 0.3, {

  scale: 1.3,

  transformOrigin: “50% 100%”,

  fill: $blue,

  ease: Bounce.easeOut

}, “likely”)

.to($effect, 0.3, {

  y: -10,

  ease: Circ.easeOut

}, “likely”)

.to($eLine, 0.3, {

  stroke: $orange,

  ease: Sine.easeOut

}, “likely”)

.fromTo($(“.d1”), 0.3, {

  opacity: 0,

  scale: 0.7

}, {

  opacity: 1,

  scale: 1,

  ease: Back.easeOut

}, “likely”)

.to($m1, 0.3, {

  fill: $green,

  ease: Circ.easeOut

}, “likely”);

We can also improve the accessibility of the graphic by adding a title attribute on the illustrative svgs. You can also supply an aria-labelledby on the associative svg.

<svg aria-labelledby=”title” id=”svg” xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 765 587">

<title id=”title” lang=”en”>Circle of icons that illustrate Global Warming Solutions</title>

If you need to, you can also supply a title for any element in the SVG DOM. You can find more information on implementation in this great article by Dudley Storey. In the case of this demo, we kept the text separate so that it’s still completely legible to screen readers. This is an improvement over the original infographics, which as static images, could not be accessed in this way.

We’ve provided a fallback to older browsers and devices by creating a static image that still rotates with the timeline and dialogs. We use modernizr to check and provide a hook so that the image doesn’t download when it’s not necessary. This doesn’t provide all the information that the full SVG does, the purpose of the png here is a graceful degradation. If you want to make sure that your reach is backwards compatible with no degradation, you can offer something more robust.

.inlinesvg .fallback {

  display: none;

}

.no-inlinesvg .fallback { 

  width: 500px;

  height: 500px;

  display: block;

}

This demo is merely a sketch, to ponder methods for which we can give shareable information more muscles with responsive animation. The same thing could also be achieved with pngs, CSS, canvas, and variety of other methods. The potential that we have with the tools now supported on the web are exciting and can breathe new life into older concepts.