Adapting Print to the Web

If you'd like to download this post, it's available here as a Word file.

At the end of the 1300-word "print" version, I've appended a chunked version only about one-third as long. Your comments will be most welcome. I've also added the edit one of my students, Rhona MacInnes, performed on the article—reducing it to just eight words.

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.

Adapting Print Text for the Web
By Crawford Kilian
(Chunked Version)

My Webwriting students and I took the original article and tried to cut it into chunks. Here’s what I came up with: a version that reduced over 1300 words to four chunks totaling 346 words.

Chunk 1:
Chunking and Scrolling
The unit of text on the Web is the chunk—a screen’s worth of information that includes links to other chunks.

The chunk can’t be a solid mass of text. We scan Web text, looking for navigation guides, rather than reading line by line. So to scan comfortably, we need subheads, bulleted lists, and plenty of white space.

With chunks we can’t build up a cumulative argument or an extended narrative. We’re reduced to “text bites” of no more than 100 words. Chunks are good for assertion, description, and definition—not for discussion and exposition. (95 words)

Chunk 2:
Cutting
A print article about scuba diving in Belize might include descriptions of several good diving spots, plus advice on where to stay and a sidebar on local diving schools. A Web version might 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)

We try to keep average text sentence length at 20 words or shorter. (82 words)

Chunk 3:
Exploiting Web Potential
Mario Garcia, author of Redesigning Print for the Web, recommends putting information in “baskets” like newspaper sections. But online text can include specialized baskets: chat rooms, ballots, online-only content.

Garcia notes that online news stories use the classic “inverted pyramid” structure of print, but stories are shorter and often have links to related materials: earlier stories on the same topics, sites with more information, and so on. Garcia welcomes the use of icons, photos, and other graphics to enhance the message in the text. (84 words)

Chunk 4:
Exploiting Web Potential
Mario Garcia, author of Redesigning Print for the Web, says pale, cool colours (blue, green, gray, earth tones) express a conservative, reserved attitude. Bright colours like red and yellow express energy and movement.

Copying print layouts can make Web text much more readable. A paragraph sprawling across the screen is 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.

We still have much to learn about Webwriting. (85 words)

Postscript:
If I’d chosen to break the original into more chunks, I might have been able to add more material in 100-word components. But the easiest way to cut text for the Web is to cut whole paragraphs, not merely trim adjectives.

Post-postscript:
Here's Rhona MacInnes's edit, an eight-word haiku:

Chunking, bulleting
Cutting and subheading;
Nothing is shoveled

Comments

[Marja-Leena]

Hi neighbour ( Seymourite and CapCollege) !

Thanks for this! I'm still a newbie blogger and have been learning bits here and there, a lot by just looking at many other blogs & websites. The poor readability of pale texts or white on black, etc is very obvious!! You have clarified many of these observations for me.

[bp]

One of the things that I have noticed makes web text more readable is the use of smaller fonts. This coupled with wide margins seems to really work for me.

As far as scrolling goes, I find that I often highlight the next sentence that I will be reading before I begin to scroll. I always do so when I have to use the scroll bars, but if my mouse has a scroll wheel, I am able to keep my eyes focused on the text so I don't have to worry so much about losing my place.

I think it might be interesting to consider how modifications such as the scroll wheel have impacted what formatting techniques are suitable, and, of course, to consider how future tech changes of this sort might change acceptable or ideal web formatting.

[Derek]

In my seminars about web writing and editing, I add some other points:

- Use boldface emphasis to highlight major points.

- Use links liberally, and build documents with reader responses and inbound links in mind.

- When you have control over the design of the page, choose readable colours and fonts that are appropriate for your audience and topic.

- Include appropriate illustrations or graphics to help make the document scannable and to augment the text.

I've consolidated Crawford's and my points on my own site, and pointed to an article I found (and use in my talks) that really needs editing for the Web:

http://www.penmachine.com/journal/2004_03_01_news_archive.html#107997892203784244