Zmags: Infographic Viewer and Distribution

email this not that

We’ve always been hesitant at developing infographics that are horizontal because they’re such a pain in the butt to distribute. Our clients, Delivra, just did a fantastic infographic that compares two emails… the good and the bad. The problem with a horizontal infographic is that it doesn’t really fit in most content layouts. You can’t take an infographic that’s 1,000 pixels wide and shove it comfortably into a 600 pixel width region.

Zmags viewer to the rescue! Using an iframe, we can easily design a 1 page viewer with the infographic in it. We can even add a link in the viewer header back to the website! The code is simple… just set the width and height to how you want the viewer to display.

<iframe allowfullscreen=”” frameborder=”0″ height=”300″ src=”″ width=”640″></iframe>

Click “Toggle Fullscreen” and you can bring the infographic to full screen and pan and zoom throughout it, seeing all the details. Another great advantage of this method is that you can add your Google Analytics account to the viewer and see the number of views!


  1. 1

    Hi guys, Cody here, from Delivra. I wanted to thank Doug for this article but more importantly let everyone know that we have seen a great response to the horizontal infograph. Sometimes doing something different, in and of itself, is of interest to people. It helps that the infograph is very pretty and informative. The Zmags viewer is a lifesaver and works great on devices of all types (another great suggestion from Doug).

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.