An Infographic Nobody Can Read on a Phone

A tall picture full of small print

A few years ago, infographics were everywhere. One tall image, several screens long, packed with headings, small print, icons and numbers, designed to be shared and linked to.

Plenty of businesses commissioned one. On a computer screen it worked: the reader scrolled down a column about as wide as a page of text.

On a phone, the same image is shrunk to fit the screen. The headings survive, the small print turns to specks, and reading means zooming in and steering around in two directions.

Most readers try for a few seconds and leave. The ones who stay read a fraction of it.

Why it shrinks so far

Phone browsers fit images to the width of the screen. A graphic drawn six hundred pixels wide for a desktop page appears at roughly half to two thirds of that width on most phones.

Every word inside it shrinks by the same amount. Text that was already small on a desktop ends up smaller than anything a phone would normally display.

Zooming in helps one line at a time, but the reader loses their place with every pinch.

A layout of columns and arrows was designed to be taken in at a glance. Read a few words at a time, it stops making sense.

Words locked inside an image

• Search engines read the file name and alt text, not the words drawn in.
• Screen readers announce one image, however much it says.
• Readers cannot copy a figure or a sentence to quote it.
• Browsers cannot enlarge or translate the text separately.
• Corrections mean reopening the design file and exporting again.

The first defeats the original purpose. The page holding the infographic has almost no text, so a search for the very question it answers has nothing to match.

What it was meant to do

Infographics were usually made to attract links and visits. Other sites would share the graphic, credit the business and send their readers back.

Some did. Much of the sharing, though, was of the image file itself, copied onto blogs and boards, sometimes without a link at all.

And readers who do follow a link back now often arrive on phones, at a page they cannot read. The work that went into the graphic is still good; the page around it is what fails.

Rebuild it as a page

Each section of the infographic becomes a heading with a short paragraph under it. Each number becomes a sentence, with its source named.

Icons and small illustrations can stay as decoration beside the text. Arrows and flow diagrams become numbered steps, which read naturally from top to bottom on any screen.

The result is longer to scroll and much easier to read. It also gives search engines the actual words people type when they look for the subject.

Give the page a plain title that names what it explains, in the words a customer would use. A clever slogan from the top of the graphic rarely matches anything people search for.

A worked example

A climbing hold maker casts holds in a small workshop and sells them, mostly online, to climbing gyms and to people building walls in their garages.

In 2012 it commissioned an infographic of the main hold types: jugs, crimps, slopers, pinches and pockets, each with a drawing, a short description and the grip it suits.

The graphic was shared on climbing forums and pinned many times. On the maker's own site it sat alone on a page, one image several screens tall.

Most visitors now arrive on phones, where the descriptions shrink to specks. A search for the difference between a crimp and a pinch found nothing on that page to match.

The page was rebuilt at the same address: a heading and a paragraph for each hold type, a photograph of a real hold from the catalogue beside each, and a link to the holds of that type.

The original graphic stayed at the bottom, offered as a download for gyms that print it for their walls.

Simple charts that survive a small screen

A chart that works on a phone shows one thing. A handful of bars, large labels, and the key figure written in the text beside it as well.

Charts with a dozen categories and a legend in small print belong on a computer screen. On a phone, split them into two or three simpler ones, or replace them with a short list.

Describe what each chart shows in its alt text, in a sentence: the result, not the picture.

Keep the address, keep the graphic

Rebuild the page at its existing address wherever possible. Any links the infographic earned point there, and they keep counting for the new version.

Offer the original image at the foot of the page, for people who want to print it or pin it. That way the graphic is a bonus for those who want it, not the one way to reach the content.

Tall images still suit Pinterest, where people save them to boards. A version for pinning that links to the new page sends those readers somewhere they can actually read.

If the graphic contains figures that have since changed, correct them in the text and either update the image or say clearly which year it describes.

The counter-case

Not every graphic needs rebuilding. A simple chart with large text and a dozen words reads well enough on a phone and can stay as it is, with its message repeated in the alt text.

An infographic that was purely decorative, or that covers a subject nobody searches for, may not justify the work. Moving it to an archive is a reasonable outcome.

But where the graphic explains something customers genuinely ask about, it is content that deserves to be read. Put it in words, and keep the picture as the extra.

Turning it into a page

1. Open the infographic on your own phone.
2. Type out every word it contains.
3. Give each section a heading and paragraph.
4. Redraw the key chart large and simple.
5. Check every figure is still correct.
6. Rebuild at the same address to keep the links.
7. Offer the original graphic at the foot.

Step two does most of the work. Typing it out shows what the graphic actually says, which is often less than it seemed, and turns up figures that have quietly gone out of date.

Words locked inside a picture cause the same trouble in menus, as covered in navigation built from an image map.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.