Publish Your Infographic on the Web

Your infographic can exist in one of two forms: print or electronic (published online). Each format has some common features as well as advantages and disadvantages. Web graphics let the reader scroll down through the information, but print graphics are usually designed in a single, wider block. (See the figure.)

Most graphics published online have a long, vertical orientation. Readers start at the top of the web page and scroll down to discover information “below the fold.”

The term “the fold” is borrowed from newspaper publishing, when the whole newspaper is folded in half, like in a newsstand. What you first see — only the top half of the front page — is “above the fold.” In an online or mobile device setting, above the fold is simply what a visitor sees when first visiting a site — or in this case, the first section of information.

What you place above and below the fold is something to keep in mind as a designer because you can control your graphic’s effect on the reader by changing the order in which you reveal things. As readers scroll down the page, they’re following a storyline in which new facts come to light.

One disadvantage of web graphics is that the width is limited to the size of the reader’s screen (the viewport), which can be particularly narrow on a smartphone. In this case, think of your graphic in terms of sections the reader will pause on while scrolling through. The flow of your graphic becomes determined by what information you put in each section, like chapters in a book.

Because technology never stops evolving, it can be challenging to stay on top of the best ways to design infographics for mobile devices. Presently, the best way is using HTML or CSS to deliver your text content. You don’t have to become an expert — you just have to ensure that your infographic is as user-friendly as possible.

Using HTML or CSS to create a graphic with fewer bells and whistles can make the infographic faster to load. It also sucks up less bandwidth and removes some of the sluggishness if the viewer is in a place with a weak connection.

Going forward, you may be asked to design infographics for multiple formats — mobile devices and tablets as well as personal computers. Exploring web-based solutions can also provide new ways for getting your point across, such as using interactivity, providing links to supporting information, or including calls-to-action that wouldn’t be possible with printed materials.

On the other hand, one of the great advantages of using web graphics is that you have nearly unlimited length (height), which allows you to incorporate a great deal of information. You shouldn’t, of course, construct your graphic so it scrolls on and on with no regard for keeping your graphic concise and focused.

The point is simply that height dimensions don’t decide how much data you can include. As long as your information is compelling and relevant to your main point, the flow of your narrative can continue beyond what you may be able to include on a printed page.