Print-friendly CSS and usability
The CSS media type “print” allows authors to specify a stylesheet that is only used when printing. This can be very useful and allows for neatly styled printouts that hide non-essential parts of the page and only contain the main content. It’s a great concept. The problem is what users expect.
In my experience, many people expect what comes out of the printer to match what they see in their web browser. If you load a print stylesheet by using
media="print", you will confuse some people by making what they find in the printer possibly radically different from what they see on-screen.
Now, this has been discussed before. Cameron Adams wrote about it in CSS, printing and user expectation and there were discussions on the subject in Marko Dugonjić’s 10 Minutes to Printer Friendly Page and in my post Printing stylesheets.
Arguments both for and against using media="print" to automatically load print stylesheets are put forward in those discussions. A summary:
- No roundtrip to the server is necessary, so it’s faster and consumes less bandwidth.
- Printing several documents after one another is easier since there is no need to request the printer friendly version for each of them. Just print and you’re done.
- Allows caching of the print stylesheet which enables offline printing.
- No need for the visitor to look for—and find—a link to a print friendly version.
- Breaks user expectation—many people expect what comes out of the printer to match (or at least be similar to) what they have on their screen.
- Takes choice away from the user since it becomes very difficult to print what you see on-screen.
To me most of the arguments are pretty strong, and I can’t see a clear winner.
Where are we now?
This was discussed a bit, but I don’t think there was a consensus. What is the situation like now? Does anyone know if any research or user testing has been done on this? What about search engines? Will they consider a link to a print friendly version duplicate content, possibly penalising the site? If so, what should you do about it? What I’ve done is to add this to the print friendly version:
<meta name="robots" content="noindex,nofollow">
Anyone have any input on whether that will make any difference to Google and other search engines with regard to duplicate content?
That’s a whole bunch of questions. Who’s got any answers?
- Previous post: HTML tags vs. elements vs. attributes
- Next post: Custom borders with advanced CSS