StATS: Printer friendly versions of web pages (September 13, 2004)

I use Microsoft FrontPage, and their newsletter listed a resources for creating printer friendly web pages. I dislike the idea of having a separate set of pages for printing, and try instead to find a good balance so that the page looks good both on the screen and on paper. This is not always easy, but writing for the web has always been filled with difficult compromises. Page breaks are impossible to control, and often I get an orphan line at the top or bottom of the page.

The basic things I do are:

1. Avoid a lot of navigation links on the left hand side of the screen. I feel like I'm swimming against the tide here, but I have never liked cluttering up the screen or the page with a bunch of navigation links. I especially dislike the almost universal tendency to put those links on the left hand side of the page. It doesn't look good and  it interferes with the ability to print well. In my mind, navigation links belong at the top of the page (with possibly a repetition at the bottom of the page).

2. No frames. Here I have a bit more support from my colleagues. Frames exist more for the convenience of the web author than for the web reader. I also have not used tables to control the line width. You want a narrow line width when reading on the screen, but this leads to a lot of wasted paper when you print. Instead of tables, I use the <blockquote> tag to provide reasonable margins. If the wide lines of my web pages make it hard to read, consider making your browser window a bit narrower.

3. Moderate sizes for graphic images. It is very hard, but I try to keep all my graphic images around 400 pixels or so. When I am showing screen dumps of dialog boxes in SPSS, this is not always possible. I saw a web page a while back that did the math and showed that images more than 525 pixels (don't quote me on that number) would not be guaranteed to print well. I also avoid more than 300 pixels in height because that will often cause an awkward page breaks. Sometimes I break a graphic image into several pieces so that a more natural page break can occur.

4. No background and limited use of color. Backgrounds set a mood for a web page, and I have always felt that the quality of the writing was the only important thing. But backgrounds also interfere with your ability to print well. The same is true for colors. When I first started, it was fun to use a soft yellow background, but I gradually came to realize that it added nothing to my pages, and made printing a bit trickier as well. The more recent browsers seem to know when to ignore backgrounds and when to switch colors, but why take the chance that some mood setting combination makes it difficult to print your web pages?

I'm part of a larger web site ( and I have to maintain some level of consistency with their pages. That leads to a navigation bar at the top that does not fit in well with the rest of my site and which does not print well either. I'll try to work with the webmaster to reconcile these problems when I have time.

The two web sites that have most influenced how I design my own pages are:

There was a very good article about web design that argued for a minimalist approach and drew an analogy to Shaker furniture. This appeared in the Winter 1997 newsletter of the American Statistical Association sections on Statistical Computing and Statistical Graphics (pdf format). This is a big file, and the article itself doesn't start until page 23, but it is well worth looking at. Here's one of my favorite quotes from that article.

A Shaker chair is useful. It is well suited for sitting. Its clean, smooth lines have no excess adornment; the beauty of the wood is adornment enough. So should Web sites be structured for maximum utility, allowing the value of their content to attract and hold user interest.

This page was written by Steve Simon while working at Children's Mercy Hospital. Although I do not hold the copyright for this material, I am reproducing it here as a service, as it is no longer available on the Children's Mercy Hospital website. Need more information? I have a page with general help resources. You can also browse for pages similar to this one at Category: Website details.