Infographics That Take Responsive Web Design To The Next Level.

By Jeremy Girard

Mar 23, 2015

Infographics are increasingly popular on websites, with good reason: designers have excitedly embraced the chance to present complex information and data in this incredibly visually arresting form. Now, otherwise-boring content can be infused with a level of “Awesome” that not only makes information easier for readers to understand, but dramatically improves the visual presentation of that content. Smart and good-looking – a winning combination!

With the rise of responsive web design as a solution to support the widest range of devices and screen sizes possible for our websites, infographics can play an important role in helping to propel those sites to the next level. The benefits to this approach are many – but so are the challenges! Additionally, there are a number of different ways that you can bring infographics into your responsive web design project. In this article, we will take a tour of some of these approaches to adding infographics on websites. We will also cover those aforementioned benefits and challenges. Finally, we will look at a whole bunch of really cool infographics in the process! The tour is about to begin – please keep your hands in the vehicle at all times and enjoy the ride!

The Benefits Of Infographics.

As previously mentioned, infographics, or “information graphics,” are an excellent way to visually present complex or hard-to-understand data and information. As Lemonly, a design and data visualization firm, says on its Infographics + Responsive Design: A Perfect Match website (more on this site later) –

“If a picture is worth a thousand words, consider an infographic being worth a novel.”

Wow, I love that! When I first read that statement I thought, “What a great way to describe the advantage of using an infographic to illustrate an idea or concept!”

This page by Lemonly goes on to add some reasons for why infographics are so effective at conveying information, including the fact that 83% of human learning occurs visually.

This advantage is valid whether the infographic is being presented in printed form or online -- but when we think about digital presentation and infographics on websites, we can imagine a number of additional reasons to use images/infographics with responsive web design, including:

• Articles with images get 94% more views.
• People are 30 times more likely to read an infographic than a text article.
• Infographics are easily shared on social media sites.

So a really great looking infographic will not only look sweet on your site and help your audience understand the important concepts you need to convey, but it can also help your pages get more views and encourage readers to consume and share that content! That’s like a win-win-win-win situation!

Our First Example.

Hey, I thought you said we would look at some cool infographics on this tour?  That I did…so let’s pause here for a moment and look at our first infographic example!

A few months ago, The Washington Post published an infographic to illustratethe depth of the ocean at which a signal believed to be from the missing Flight 370 was found. The infographic is excellent, starting at a light blue and getting progressively darker as you get “deeper” down into the ocean. Along the way, you see how deep submarines dive, where you would find a giant squid or a sperm whale, and how deep the wreck for the Titanic was found. Further and further down you go until you come to 15,000 feet, just shy of 3 miles down, to where the signal was detected. Saying that the signal was “three miles down” is one thing, but seeing this presented visually really gets to the depth of the problem (sorry, I couldn’t resist). As you scroll down and down and down, you get much more of a sense of this data than could be conveyed without these visuals!

Not only does this infographic look great and help tell the story, but the image used also makes it very easy for readers to share this information with others! As of this writing, the page has had 134 thousand Facebook shares, close to 14 thousand Tweets, and it has generated 276 comments on the page itself!

Interactive Infographics.

The infographic we just looked at is awesome, but it is just a static image. Another advantage to using infographics in our responsive web designs is that you can do so much more than just have a flat image that is being used for that infographic. You can make those infographics interactive!

Websites, by nature, are interactive. Links can be clicked, elements can be changed as the mouse hovers over them, items can appear and animate as the page scrolls, videos can be embedded on the page, etc. A savvy web designer can combine the advantages of an infographic with the interactivity of the Web to create an experience that is not only visually rich, but immersive as well!

Examples Of Interactive Infographics.

What do I mean by “interactive” infographics? Well, we’ve come to the next stop on our tour – so let’s look at some more examples!

The Bright Future of Car Sharing is a great example of an interactive website/infographic combination. This site is presented in a horizontal layout, allowing you to scroll side to side (instead of up and down) to proceed through the content. This is important because the website lets you use the arrow keys on your keyboard to “drive” the little car that is at the start of the infographic.  As you make your way through the information that is presented, you can stop and click on many of the datapoints and elements of the infographic to access more information and delve deeper into it. You, the user, can decide what is important to you and shape your experience based on those preferences. Even if you don’t click any extra links, there are cool animations and things to see on your journey, like waving flags, angry gorillas, a walking moose, and much more!

The Dangers of Fracking is a similar interactive infographic. Although the site works in a more traditional up/down scrolling method, unlike the horizontal scrolling, car sharing example we just looked at, the experience between these two sites is very similar. On this one, you can use your arrow keys to “dive down” into the data and animation. If you have a scroll-wheel on your mouse, that would work as well. As the page scrolls down, a drop of water becomes a tanker truck which drives into a fracturing site where we eventually go deep, deep underground. During this journey, key information is presented for the part of the process/infographic that we are currently viewing. This is a great example of a very complex, and lengthy, process that is more easily explained via an infographic and which is made more engaging thanks to the interactivity of the site! The illustrations, movement, and overall presentation really make this a wonderful example of both an infographic and an engaging and interactive web experience.

The Challenges Of Infographics And Responsive Web Design.

So the benefits of pairing infographics and responsive web design have us pretty excited, but before we adding amazing infographics to our sites all willy-nilly, let’s slow it down a bit and look at some of the challenges that come with this approach as well (sorry to be a spoilsport).

In the interactive examples given previously, one thing you may have noticed is that none of those websites are responsive! The main challenge here is because of the reason why many infographics are so awesome, because they are so visually complex and interesting! Many responsive web design sites are very minimal in design, with large headlines of text, paragraphs of body copy, and maybe a floated image or two. That simple layout is not difficult to make responsive, but highly detailed infographics like the two examples shown in the section above would be incredibly challenging to make fully responsive! To properly convey the information and maintain the integrity of the infographic, both from a data presentation and a visual design standpoint, we want to have pixel-perfect control of our infographic, but responsive design and pixel-perfection do not typically go hand in hand. This is an area where and adaptive web design approach will work in our favor, allowing us to achieve the Pixel-Perfect Responsive Web Design we want!

We will come back to that thought and look at adaptive web design as it relates to infographics, but for now, let’s look at some infographics that are, indeed, being used on responsive web sites.

Scaling Infographics.

There are a few ways that we can add infographics onto our responsive websites. The first, and easiest, of these approaches is simply to add the infographic as an inline image. We can then set that image’s width to “100%” to ensure sure that it takes up the space available to it and so that is grows and contracts as the browser size changes. You could also use an Adaptive Images solution to automatically scale the images for different screen sizes, ensuring that you do not send a too-large image to a device that will not display it at that full-size.

The infographic Eternity Web Development (ironically the infographic is actually about Responsive Web Design) does indeed scale as the page grows or decreases in size. This is not a bad solution, but at the smallest sizes, the text of the infographic does get a bit difficult to read. This is the downside to using this “width=100%” method of infographics and responsive web design – the biggest sizes will look fine, but some of the smaller sizes may not work as well. In the end, this is because you are simply taking an image that was designed to be viewed at a larger size and shrinking it for smaller screens. You do not have the ability to make pixel-perfect changes with this solution that you could have it if you were instead using an adaptive web design approach and deliberately rearranging the elements of the infographic’s design for a predetermined set of screen sizes and resolutions.

Responsive Infographics.

For the next stop on our tour, we will look at some infographics that actually do respond alongside of a full responsive website, starting with the aforementioned infographic page from Lemonly titled “Infographics + Responsive Design: A Perfect Match.”

If you scale your browser up and down in size, you will see that this page does more than simply shrink or grow the images, there are actual changes made in how the data and visuals are laid out to best present that content for different screen sizes. There are also some nice animations as the page first loads, adding a bit of motion to the presentation and giving it some life! This is a great example of information being deliberately adjusted on a responsive web design to really get the most out of this infographic.

Another example of a responsive infographic, which interestingly enough is also about responsive design (I am seeing a pattern here), is on the Sitefinity website by Telerik. Just like the Lemonly example, this infographic works really well in a responsive web design layout and the information reflows and the layout changes as the screen size gets bigger or smaller. This example is not as intricate as the Lemonly site, nor does it include the nice animations and movement, but it is still an impressive use of an infographic presentation in a responsive web design.

How Do You Feel About Infographics And Responsive Web Design?

What are your thoughts on this topic?  Have you seen any excellent examples of infographics being used online? Where they responsive? If so, how intricate was the design and content being presented in that graphic? If they were not made responsive, what do you think the reasoning was behind that decision? Please add your thoughts on this topic in the comments below and also share any great infographic (responsive or otherwise) examples that you have found out there!

Blog  /  Web Design  /  Responsive Web Design

Comment