Adapting Print Text for the Web

By Crawford Kilian

Surprisingly little has been written about transferring print materials to Web sites. Various people, including me, have complained about shovelware—print text dumped unchanged onto the site. But not much advice is available on how to modify such text to make it more readable and usable on the Web.

Often, of course, shovelware is perfectly OK. You can stow a document online as a PDF or word-processed file, knowing visitors want to print it out. Or a document may be so short and concise that it fits snugly on a single screen.

Problems arise, however, because standard print relies on reader habits that don’t transfer to the computer screen. We really do read differently in this medium. Web text should exploit the difference.

Chunking and Scrolling

Even after 20 years, we still don’t enjoy scrolling through a long online document. So the unit of text on the Web is the chunk—a screen’s worth of information that includes links to other chunks.

What’s more, the chunk can’t be a solid mass of text. We scan Web text, looking for navigation guides, rather than reading line by line. Even a paragraph more than five or six lines long is unscannable. So we need subheads, bulleted lists, and plenty of white space. That lets us scan comfortably, finding what we want.

Chunking doesn’t let us exploit the linearity of print. We can’t build up a cumulative argument or an extended narrative. We’re reduced to “text bites”of no more than 100 words, and maybe fewer. Chunks are good for assertion, description, and definition—not for discussion and detailed exposition.

Cutting

One of Jakob Nielsen’s most important discoveries, back in the 1980s, was that text on a low-resolution computer screen slows down our reading speed. Twenty years later, screen resolution is still poor and we still read slowly online compared to print. If our visitors’ reading speed is 25 percent below normal, we owe them at least a 25 percent shorter text. Nielsen goes further and says print text should be cut by 50 percent.

In some cases this is easy. In others, it’s very hard. But when you’re talking with a friend, you don’t take two hours to describe the plot of a two-hour movie you’ve seen. For print text destined for a Web site, cutting should be routine.

Cutting and chunking a travel article, say, or an annual report, the Web editor must “deconstruct” the piece into components while still permitting visitors a clear overview. That way they can see where to go for specific information. Instead of the transition phrases we use in print (Therefore, Thirdly, Nevertheless, Next day), the transitions to other chunks appear in the links to them, especially in blurbs that accompany the links.

Imagine a travel-magazine article about scuba diving in Belize. It might include descriptions of several good diving spots, plus advice on where to stay and a sidebar on local diving schools. A Web-adapted version might therefore include a chunk describing a diving location plus links like these:

  • Another good dive spot (with a photo of my first manta ray!)
  • Hotels (surprisingly cheap and comfortable)
  • Local dive schools (very safety-conscious)

In print, we’re used to long sentences full of series: words, phrases and clauses. In Web text, those series become hard to read. They’re just too long. So we turn them into still more bulleted lists:

  • Words
  • Phrases
  • Clauses

In doing so, we also keep average text sentence length at 20 words or shorter.

In the case of a highly structured print document like an annual report, the divisions of the report become the logical dividing points of the Web version: executive summary, year’s highlight, individual chapters, and so on. These would usually be severely abridged compared to their print versions, but we would enter them through a “contents” page permitting us to jump to just the section we want.

And of course such a Web-adapted document would include a downloadable print version of the original.

Exploiting Web Potential

Reading text on paper is like traveling a road. We can see what’s growing along the roadside, but the impetus is to go straight ahead. Hypertext may not get us from point A to point B in the quickest possible time, but now we’re traveling in a helicopter instead of a car. We can see the road, but we also have a much better view of the surrounding landscape. And we can land anywhere we choose.

As Web writers, however, we’re not just tourists—we’re landscape architects.

That means we have to offer visitors alternate routes and scenic viewpoints. Back in 1997, Mario R. Garcia offered some useful guidelines in his book Redesigning Print for the Web. While his focus is on newspaper Web sites, much of what he has to say applies to other print media adapted to the Web.

Garcia uses the term “baskets” to describe sectionalized information: a newspaper site would follow the example of its print edition, putting all the sports news in one place and all the local news in another. But the online version can include specialized baskets: chat rooms, ballots, online-only content.

Email permits much easier visitor response to stories in hypertext baskets, and the Web is a far more interactive medium than print. Whatever the story, its Web form should permit the reader to do something: write back, cast a vote, join a club..

Garcia also notes that online news stories use the classic “inverted pyramid” structure of print journalism, but the stories are shorter and often have links to related materials: earlier stories on the same topics, sites with more information, and so on.

Google News and other online news sources have followed through on this idea, so that a given story may include links to hundreds of sites carrying it. Most may run the identical story, but some may put their own interpretations on it. Readers can at least compare a few.

As with print, online text relies on powerful headlines; ideally they summarize the story while also intriguing readers into seeking details. Garcia also welcomes the use of icons, photos, and other graphics to enhance the message in the text.

Hazards of Web Text

Garcia makes some excellent points about using other Web elements to convey part of the message. He argues that pale, cool colours (blue, green, gray, earth tones) express a conservative, reserved attitude. Bright colours like red and yellow express energy and movement.

But it’s all too easy to send a mixed message, Garcia warns us, by mixing hot and cool colours. Some, especially bright yellow, can skew the whole design of the site, and colour seems to work better with sans serif headlines than with serif text.

The rise of blogs has made Garcia’s advice even more valid. We see too many sites whose colours clash, or which make reading almost impossible: pale sans serif text on a dark background, for example, or black text on a dark-green background. Such layouts are reminiscent of the awful typography unleashed by Macs in the 1980s, when people had too much fun playing with fonts and clip art.

Copying print layouts can sometimes make Web text much more readable. A paragraph sprawling across the screen is very hard to read. Compressed within wide margins, to an average line length of ten words or so, the same text is as accessible as a newspaper column.

Blogging can create more than merely esthetic problems. Blog posts tend to be short, with perhaps one or two links; they’re naturally chunky. But an extended post like this one takes us right back to scrolling.

I’ve tried to compensate by using very short paragraphs and lots of subheads, but this is a compromise. For those who prefer to print out such a long document, I’ve provided a print version as a Word file.

We are still in the early days of writing for the Web, and we still have much to learn.