Printing the Web

“Consider how extraordinary paper is: lightweight and flexible, it supports thousands of typefaces, as well as black-and-white and color illustrations, and its high-resolution and high contrast facilitates reading.”Despite predictions to the contrary, it doesn’t seem that the advent of networked information sharing has reduced human consumption of paper. In fact, given the amount of printouts modern offices and homes produce, one is inclined to say that even MORE paper is generated today than ever before. A “paperless society” feels a long way off.

Works such as “The Myth of the Paperless Office” by Abigail J. Sellen and Richard H. R. Harper confirm this. The authors show how paper use often increases after the introduction of computers in an office. Such observations have been commented elsewhere (see Information Week). The paper industry is doing fine as well: the largest paper producers in the United States have continued to grow economically over the last five years. In short, there is no real evidence of a world without paper.

Consider how extraordinary paper is: lightweight and flexible, it supports thousands of typefaces, as well as black-and-white and color illustrations, and its high-resolution and high contrast facilitates reading. David Gelernter, Yale professor and computing visionary, aptly summarizes: “The ‘paperless office’ is a bad idea because paper is one of the most useful and valuable media ever invented. …‘On paper’ is a good place for information you want to use; a bad place for information you want to store.”

David Gelernter, “The Second Coming: A Manifesto”
(http://www.edge.org/3rd_culture/gelernter/gelernter_p6.html)

The reverse is also true: computers are good for storing information, but generally bad for using it. Research shows that difficulty in reading from a computer screen stems from poor resolution: compared to paper, monitors—even of the highest quality—offer only low-resolution reading.

On the web there are additional complications. Jacob Nielsen offers insight here:

• Web users feel that they have to move on and click on things.
• Each web page competes with millions of other pages for attention, potentially reducing users’ ability to focus on one content source at a time while online.

Jacob Nielsen. (1997) “Why Web Users Scan Instead of Read.”
(http://www.useit.com/alertbox/whyscanning.html).

It is no surprise that many people print information from the web. Rather than overlooking this common behavior, it may be advantageous to plan for and support printing when designing a website.

Designing web pages with printing in mind
For some websites the user experience already extends onto paper, like it or not. Ignoring this may result in lower overall user satisfaction. Consider the following factors when designing web pages that will be printed:

1. No Alternate Version
   Sometimes web developers do not have the time, money, or know-how to offer alternate print-friendly versions of web content. Creating online pages that also work on paper is still possible.

   After a user selects “print” from the browser, the page is formatted before it is sent to the printer. The width of the layout is reduced to about 650 pixels for 8.5″ x 11″ paper, or 630 pixels for A4, assuming normal margins.

   If all the elements of a page can’t wrap around to fit within this 630-650 pixel area, content on the right will simply be cropped off. This is often caused by absolute positioning of page elements, such as fixed table widths, or large images. A web page with a fixed size of 800×600 pixels may look great online, but will lose its right edge completely when printed.

   Flexible layouts relying on relative positioning are better for printing, allowing the page to compress down to fit onto paper. I believe using flexible positioning and relative table widths (i.e., percentages) constitutes good web design practice in general and should always be considered (see “The Myth of 800×600” in Web Review, http://www.webreview.com/2001/03_16/webauthors/index01.shtml).

   Frames may complicate the printing process or sabotage it completely. Flash and other rich media formats may also be problematic and may not print at all. Additionally, including content in a DHTML layer essentially hides it from the printer. If you want your users to be able to print, reconsider these technologies.

2. Alternate Print-Friendly Version
   Print-friendly pages can eliminate the above-mentioned problems and yield higher quality printouts. Programming a print-friendly function is indeed more work, but CSS makes it relatively easy for an experienced programmer (more below).

   The “print this page” button, however, shouldn’t just duplicate the print function on the browser. Instead it should do something with the content to make it more appropriate for paper. Here are few ideas for creating a print-friendly version of a web page:

   1. Remove navigation. Unless the site navigation is somehow important for the text itself, it is rather useless on paper.
      Example: International Herald Tribune, www.IHT.com.
   2. Remove or change graphical ads. Banners may not make sense on paper, particularly animated images, which are generally meant to be clicked.
      Example: NY Times online, www.nytimes.com – changes full-sized, animated ads to small static images.
   3. Remove absolute page widths and change to relative positioning. This will ensure that the browser can scale down a page to fit on paper without losing any text. Removing fixed widths for printing means you can still have fixed width web pages on screen.
      Example: CNN.com, www.cnn.com
   4. Change fonts from sans serif to serif. Sans serif fonts are better (i.e., more comfortable and quicker) for online reading, while serif fonts are easier to read from paper.
      Example: Boxes and Arrows, www.boxesandarrows.com.
   5. Add citation information to the print version. Most browsers print the page title and URL on the top of a printed page by default. However, you may want to offer a clearer, thorough citation at the top of the page.
      Example: ZDNET.com, www.zdnet.com
   6. Remove dark backgrounds. Though most browsers don’t print backgrounds by default, it’s best to change any online color combinations to black on white for the print version to ensure a readable printout.
      Example: Evolt, www.evolt.org
   7. Write out links to show the URL. On paper an underlined word (i.e., a link) in the middle of a text is not very helpful. Instead, show the URL after the link in parentheses. This can be very problematic with long URLs (e.g,. dynamic pages with unconverted parameter strings) and may require manual examination of links within a text body.
   8. Display the print-friendly version before printing. This could be in a new window, offering users feedback as to what the document will look like and giving them more control. It is not recommended to start printing immediately after clicking the “print this page” button.
      Examples: International Herald Tribune, www.IHT.com (displays print-friendly version and invokes browser’s print command at the same time)
   9. Collate information into the final print version. Related documents are sometimes spread out over multiple web pages. The print version should consolidate necessary content.
      Example: IBM articles – you can print the current article or the entire section.
   10. Ensure that color coding is not required to understand content. It is safe to assume that most users will be printing with a black and white printer. Charts with colored bars, for example, are useless in black and white. Add text labels for clarification for pages that are likely to be printed.

CSS to the rescue
Unless there is a very good reason, you really don’t want to maintain two different versions of a web page. CSS allows you to reformat content for a print version without having to maintain multiple separate documents.

Features of CSS take printing into account and offer a great deal of power and flexibility. Most of the suggestions above can be implemented with style sheets. For example, with CSS you can:

• Add or remove any defined page element, such a navigation menu or images
• Change font type, size, and measurement (from pixel to point, for instance)
• Define page breaks
• Define page margins (separately for the first page if you want)
• Write out URLs for links

W3C has recommended a set of extensions to CSS to better support printing from the web, referred to in the specification as “paged media” (see http://www.w3.org/TR/REC-CSS2/page.html). For those who are looking for more details, see CSS guru Eric Meyer’s excellent article in A List Apart, which explains the nuts and bolts of code needed for print-friendly pages (http://www.alistapart.com/stories/goingtoprint/).

Additionally, XSL Formatting Objects, also a W3C recommended technology, is extremely powerful. With this you can print from XML with highly controlled layouts. See “What is XSL-FO?” for an introduction (by G. Ken Holman, http://admin.xml.com/pub/a/2002/03/20/xsl-fo.html).

Capabilities of both CSS and XSL-FO point to the need for better control of printing formats and underscore the fact that people do indeed print from the web. Web design, in turn, should take advantage of these technologies to ensure a consistent user experience on and offline.

Remember, as well, that the tendency to print from the web is often a desire to capture information for later use. That is, often users want to walk away with content. In addition to or instead of creating a print version, offering a downloadable version of a document also addresses this need. PDF format, for instance, is great for downloading and printing, and can even be generated “on the fly.”

Those of us concerned about the environmental impact of increased paper use may argue that adding a print button encourages people to print, thus wasting paper. I would argue they will print anyway – with or without an added button. But consider how a print-friendly version may actually be better:

1. Print-friendly versions avoid problems with printer reformatting and normally use fewer pages than directly printing a web page.
2. Removing navigation, banners, dark images and backgrounds saves ink.
3. Print versions could also be offered as downloads, thus avoiding printing all together while still allowing users to capture online information.
4. Cutting and pasting text is easier from print-friendly pages. For the small group of web users (myself included) who cut and paste text from the web, print versions are advantageous.

Finally, designing with print in mind necessarily forces website creators to conceptually separate content from presentation. Lessons learned from developing alternative print versions of web pages could be applied to other situations, such as creating PDA versions of web pages. As designing for multiple formats becomes increasingly more important, such skills are all the more valuable.

This is not at all to say you should ignore creating attractive and useful displays of information to be read online. My point is this: perhaps we are heading toward the paperless society and are just in state of transition. Maybe as the quality of computer screens gets better and people start reading online in the first grade, we will loose our need for paper. This surely won’t happen, however, within the lifespan of your next web project. Therefore, consider how users interact with other formats and media, particularly paper, and address the reality that people print web pages. With a little planning and foresight creating printable pages is relatively easy and extends a positive user experience to paper.

• “The Myth of the Paperless Office” by Abigail J. Sellen and Richard H. R. Harper
• “Lexmark Shreds Paperless-Office Myth” by John Soat, Information Week (2002)
• “The Second Coming: A Manifesto” by David Gelernter
• “Why Web Users Scan Instead of Read.” by Jacob Nielsen. (1997)
• “The Myth of 800×600” by James Kalbach, Web Review (2001)
• W3C CSS Spec
• “Going to Print” by Eric Meyer, A List Apart (2002)
• “What is XSL-FO?” by G. Ken Holman, xml.com (2002)

James Kalbach is currently head of Information Architecture at Razorfish, Germany and has a masters degree in library and information science. Previously he established a usability lab at I-D Media, a large German digital agency.