Print stylesheets

There’s an interesting thread going on just now on the Information Architecture Institute mailing list about print-specific (CSS) style sheets.

The conversation seems to be heading along two paths: Should you offer:

  1. a “print page” link or button?
  2. a print-specific CSS stylesheet?

1. Print page link or button

I remember working with a client a few years ago who insisted on my providing a “print this page” link, with appropriate printer icon. “There is absolutely no way that I can print the page otherwise!” she insisted. She didn’t realise that her browser had a print function: as she was using Windows it could be found on the menu bar at File > Print, or by pressing Ctrl+P.

I felt uneasy about adding what I regarded as an unnecessary addition to the page, duplicating as it did the browser’s functionality. It also relied on the user having JavaScript enabled on their browser, otherwise it wouldn’t work, further adding to the user’s confusion.

I argued that what was required was better education amongst users about how to use a browser.

2. Print-specific stylesheet

“Print this page” link or button or no, the question then lies about what is presented when the page is finally sent to a printer. Do you just leave it to the screen stylesheet to dictate what is shown, or should you provide a specific print-only style?

One contributor to the conversation had to say:

In research findings that I saw last year for a client, people (our target people, that is) still had an aversion to “just pushing print”, recalling pages that would cut-off content on the sides, etc. (Russ)

The great thing with print-specific stylesheets is that you can control exactly what is and what is not shown. You can remove navigation items (which are redundant on a 3D sheet of paper!), provide a print-relevant typeface (serif rather than sans-serif, for example), replace colour logos with mono equivalents, add link URLs to the end of each link so that hidden information isn’t lost on a print-out, etc.

However, you will still get people berating you for the fact that the printed version is totally unlike the screen version of the same page.

An opinion shared by Todd, a design researcher:

I can’t count the number of times I’ve tried to print a page, expecting to print what’s actually there (e.g. want the page as is) and got a completely different format from a print style sheet … I think you should use the print style sheet, but do your best to duplicate the web page as much as possible (e.g. only remove unnecessary navigation and footer elements, but leave the rest visually intact). (Todd)

Sabrina offered this compromise:

  1. Printer-friendly version: appears in a pop-up or in the same window (I notice that older audiences want to hit the back button in a new window, and it doesn’t always work) that calls the printer function, in case that doesn’t work, this page will also contain a print button. If you decide it’s a pop-up, it will also have a close button.
  2. CSS for print version of the page being viewed: for users who use the Print command in their browser and don’t care about printable versions (not me).

What are your thoughts, preferences and current practices?