Web Dimensions for Your Infographics

By Justin Beegel, MBA, The Infographic World Team

The challenge of sizing an infographic for the web is design sizes are now so variable, there are no standards to speak of. The “responsive design” brought about with the advent of HTML5 changed the web design landscape permanently.

Unlike a printed graphic, where everyone who sees it experiences it in the same size, the actual size of a web graphic changes depending on the readers’ devices. A device screen can range from 27″ for a desktop computer to 5″ for a smartphone.

Always optimize for your audience. Use web analytics software to determine how people are accessing your site and base your decisions on that data.

That said, you do need to think about a few elements when you’re publishing work online.

Screen aspect ratio for infographics

Responsive design is the web design principle that tries to make visual images clear and legible across a wide range of devices. For an infographic designer, the beauty of this approach is that your work will automatically fit itself to the screen it’s viewed on.

As a designer, you don’t need to come up with one aspect ratio for work that will be seen on a laptop and another adapted to smartphones.

The increasing use of HTML technology has made responsive design a standard. You don’t have to be a programmer to use and benefit from these technologies. Phasing this technology into your work will make it much more accessible and readable and will certainly be a valuable job skill for you as an infographic designer.

If you’re not using responsive design, think of where your target audience will be viewing your infographic and work backward from there. If most of your readers are getting your material on a specific platform or screen proportion, you design with that in mind.

Users don’t always want to scroll down to see more, so think of what information you want your readers to see when they first look at your infographic.

For work that needs to be scaled for concurrent print and web use — say you work at a newspaper, and your infographic will run in both the print edition and online at that website — stick to using vector files. They’ll make it easy for you to scale your work.

Screen resolution for infographics

One of the most common and basic questions asked in website design is what monitor screen resolution to use. The somewhat unhelpful answer is that your work should be optimized for the most common resolution, but it should work for all of them.

On the other hand, no design exists that looks the same in every resolution, platform, and browser, so creating one isn’t a realistic goal. What you’re aiming for is a balance — something that looks perfect under the most common conditions and still looks really good in less typical conditions.

The website StatCounter monitors statistics on a variety of factors you may find useful, including the top screen resolutions, mobile resolutions, and browsers in use.

Always check your work by looking at it in different browsers and resizing the browser windows to see how your work looks under different conditions. And always design with your audience in mind. For example, if you know the target audience mostly uses mobile devices, design with mobile in mind.