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:

Benefits

  • 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.

Drawbacks

  • 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:

  1. <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?

Posted on September 6, 2005 in CSS, Usability

Comments

  1. Sorry, no good answers to your questions. But some thoughts from my perspective..

    Arguably, websites are about the content, which we also proclaim are one of the greater goals of semantically coded sites. With that presumption, what I’m personally interested in when printing a page is the content, to read offline away from the computer. As such, with a whole different media to present the information within, I expect the printed version to be just as pleasant to read as the online one - which often would suggest that a few radical changes will have to be made regarding the layout.

    Browsers have also had their own ways of changing the printout of a website, i.e. removing all background colors, which can ruin the readability of some elements.

    Although valid points on the drawbacks, I’d rather have the original designer of the website to control the layout and presentation of the content in the printout as well. And even then, although not quite user-friendly, I still have the option of taking a screenshot to print if the intent of printing is having an example of how the site looks online.

    And just a thought.. Would it maybe be possible to write a Javascript which chooses which CSS to use on a print event? Making it possible to give the user a way to override the default print-stylesheet when needed.. If so, this could probably be rewritten as a User Javascript for users to load on sites they dislike the print-stylesheet on..

    Sorry for the rant, you just inspired a lot of thinking. Don’t think I’ve dedicated much thought to the problem before :-)

  2. And by the way, you are lacking an ending tag for the code-example at the end of your post, making all the following content including the sidebar appear in a mono-spaced font.

    Just a friendly alert, and just remove this comment when you’ve corrected it!

  3. September 6, 2005 by Roger Johansson (Author comment)

    Frode: Well, I’m not saying you should not provide a print stylesheet. I’m just doing some thinking out loud about when to load it to meet the expectations of the largest number of visitors. Neither way will make everybody happy.

    Thanks for catching the missing end-tag. Dunno how that slipped through… very unlike me ;-).

  4. “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 the see on-screen.”

    My experience is the exact opposite - whenever I’ve added a print stylesheet the reaction from the users is 100% in favour, particularly as simply printing off a webpage would often result in text being clipped off, images not printing, colours not printing, and so on.

    “Takes choice away from the user since it becomes very difficult to print what you see on-screen.”

    The way I saw people getting around that was to use ‘print screen’ and paste into Word or Paint. It may be harder to print what is seen on screen but - again, this is just in my experience - the vast majority of people who want to print off a webpage are doing so to read the content, and have little interest in seeing an identical copy of the site appear in their printer (which it rarely is anyway).

  5. A quick question; do you think that media=”handheld” has all the same issues and arguments?

  6. “the vast majority of people who want to print off a webpage are doing so to read the content”

    I agree.

    However…. I’ve also had clients who insist that the printed pages of their sites look exactly like the on-screen version in an effort to preserve the site’s “branding”.

    My compromise is to preserve the main branding elements (logos, taglines, photos etc) and try to strip out as much junk for the print version as I can get away with (footers, disclaimers, sub-topic links, banners, etc).

  7. Paul, you’d be surprised about how many people don’t know what the PrtScrn is for. It’s just like the font resizing thing – yes, a user can choose view -> text-size, but it’s much more user-friendly if we place cute inviting +/- icons, isn’t it?

    Regarding the media=”handheld” read more about it in the Part Two: Methods to the Madness article.

  8. I like to say “printable version versus printable page” whenever this discussion is brought up. My take is that when a person hits Ctrl +P they expect the screen to print but when they click a button that says “printable version” or something similar not only [should] they get a preview but it also provides them the either/or option. Either print the screen, or use the nifty printable version button.

  9. September 6, 2005 by Kalle Wibeck

    Hmm, that’s a hard one to answer.
    I understand the “protectionism” towards branding as well as I respect the “expected behaviour” theory…

    But if I must vote, it’s definitely for using media=”print”, since the users I’ve met are far more irritated over broken printed pages* then they are over a wider page with a serif typeface…

    *) try a print preview on the redesigned A List Apart at 100%…

  10. By all means I am for media=”print”. Yes it breaks expectation for some users, but in cases I’ve seen it breaks it in the best possible way: user gets decent looking printout instead of usual crippled and cut-off crap.

    “I wish every web page would do this!” - that was a reaction when I demonstrated this feature to someone.

  11. It’s more work & setup, but doesn’t a printer friendly version (a new page) make the most sense if you want the user to have the best of both worlds? They can print the current screen (not printer friendly), and if the user likes they have access to a printer friendly page which can be printer too.

  12. The one area where printing a page “excatly” as it appears on screen may be when financial sites need to be filed with the SEC. I’ve heard requests from compliance departments that pages look exactly like they do on screen for filing purposes. That said, whether that was an actual requirement or just confusion on the part of a non-technical lawyer was always unclear.

    Branding should certainly be a concern, but at the end of the day, I agree with the comments about printing to read content. And most sites that don’t use a printer style sheet end up with content that runs off of the right side of the page. That’s certainly not usable.

    Another solution would be to use some scripting to offer a printer version that reloads your content on screen with your printer style sheet. That way, if the user selects “printer friendly” they can see exactly what it will look like when it prints.

    Rimantus put it best: worst case scenario is that the user gets a “broken” page that actually displays all of the content. Just like accpeting graceful degradation in legacy browsers, we should accept it with regard to printed output as well. Until browsers evolve or standard paper grows larger than 8.5”, we probably don’t have much of a choice.

  13. One of the problems is that so many sites have the little printer icon on them that clients now expect to see them there.

    Explaining that print-style sheets are available, and have been for a long time, doesn’t change their attitude. Other sites have the printer icon, we need it too.

    Also, clients expect people to be able to click the link to the printer-friendly page, preview the page and THEN print ie. not just print straight from the webpage.

    So, all up I’m finding that poor design decisions in the past have been turned into some sort of ‘norm’, which I’m now expected to put into practice even if there is a better way.

  14. September 7, 2005 by maurizio

    I am for “media=print” too. Every time my clients print web pages, they have the same problem: images, text etc etc don’t print well or they are out of page. So, a possible way could be to have a “print pages” in your menu (or such a link wherever you want) to link a page where you can explain what happens when someone prints a page on your website.
    If you use a “print version” link (and print version page) for every page on your website, why don’t you use a simple “print pages” page to explain the problem? It’s easy - just one page - and you don’t have duplicate contents problem with search engines. And, first of all, you start teaching your users something about CSS an print media type :)
    Oh yes, there is still a problem: what if I want to print exactly what I see on screen? Images, page layout etc etc? I have to think about it!

  15. I always supply a print style sheet. I do retain logos etc in that sheet, but I don’t retain the total page layout. I haven’t had a complaint yet, beyond the actual customer who only wanted to get a paper copy of the look and feel. I explain how to get that. Re the duplicate penalty on the search engines for an actual print page - yes, the robots tag will protect you from that 99% of the time. (Bots make mistakes, but only rarely, and you must ensure your syntax is perfect) HIH!

  16. September 7, 2005 by MichaelD

    I have to agree with Paul Haine’s comments. I might be an exception to the rule, but I only print out web pages for future reference… or in order to be able to read them on the train on the way home ;-)

    In that regard, there’s nothing more frustrating than starting to read an article, just to find out you’re missing parts of words and sentences, because someone decided that their publicity should be printed on the left of the page (thereby pushing away part of the content).

    In my opinion, “media=print” is more than just a gimmick. It also saves me a few clicks in comparison to having a printable version.

  17. Considering the branding aspect of the problem, my experience is that clients usually have (or should have) one font set for screen presentation, like web, PowerPoint etc and another for print media.

    Having that in mind my suggestion is that you style the print version to accommodate the style guides for print media.

  18. In my opinion, it is the job of the browsers to educate the users and to let them choose which version they want in Print Preview.

    The browsers could show selection possibilities for screen stylesheets, print stylesheets (there might be several, for colour printers or black-and-white printers, for example), or – if available – a PDF version of that page. All these formats could be available via the LINK element and its attributes.

    But unfortunately, browsers were never good at printing and they still are not. It is time that this changes. And not only for printing, but in general for alternate visual representations of a document through stylesheets.

    Every user should be able to select a screen, alternate screen, handheld, projection, or print stylesheet for whatever media she is reading the page. That means, the user should have the possibility to print the handheld, print, screen, or projection version, for example. (By the way: I still think it is a bug that Opera uses the projection stylesheet when in fullscreen mode – it is certainly no projection if I use my browser fullscreen on my screen. Better to implement a Projection Mode.)

  19. I actually print a lot of Web pages (like the many research reports available), and in fact I go through a toner cartridge every year. I have a whole set of hoops I jump through each time (print preview in IE Mac, copy and paste to BBEdit or Word, print a single test page) and it all bites.

    The worst part of it all is that my own print stylesheets are barely adequate. Yet so are everybody else’s!

  20. Seems to me the reason we have media types at all is to differentiate between just that. We all accept that we can and should where applicable be serving up a different layout/design for say handhelds. Print is still a different medium to the screen and we should be providing the best layout within the restrictions of that media.

    Ok so clients and users may be expecting to print out what they see on screen, but I honestly can’t remember the last time I saw that produce a page that was an exact duplicate, so that’s pretty much a moot point. And from my own point of view I couldn’t agree more with avoiding the usual cropped content.

    It’s still possible to maintain branding when using print styles. Johan makes an excellent point about using print style guides and where these arent in existence already it’s usually possible to adapt the screen layout sufficiently to maintain the brand presence. Indeed a client with print guidelines is more likely to approve of a printed version of their ‘brochure’ site that follows as many of those guidelines as possible as opposed to a mess of semi-site content.

    And so we’re back again to user expectation. Oddly enough I find myself not adverse to the old-school ‘print page’ button. I like Peter Stringer’s idea of loading in the print styles as a method of preview so that the user is pre-warned if they were hoping to acheive a screen shot when printing. Perhaps the best way to do this would be a bit of behaviour Layer JS to insert a print link which in turn switches the stylesheets while adding a ‘return to norm’. That would give us the ability to have just the one page and avoid any subsesquent SEO and maintenance problems. I’ll probably have to go and put my standards hat on and think about that one though.

  21. I like Peter Stringer’s idea of loading in the print styles as a method of preview so that the user is pre-warned if they were hoping to acheive a screen shot when printing.

    Browsers could offer a choice as well: preview and print the document with the author’s print CSS active or inactive.

  22. I do not agree. I think the best way is to use a print css file. The user can then either go to File > Print or Print preview. Many users also uses the right click > print because of sites that uses frames. The do not know if the site is using frames. Also some users do hit CTRL + P. The good thing is that they all get a printerfriendly version.

    I have in some instances used an print icon that opens up the print dialog. When conducting usability tests we have asked the users what they think will happen when clicking the icon, most users said that they thought the print dialoge would open.

    Example of print icon (top right corner, site in Swedish)

  23. September 7, 2005 by Kristin V

    If I understod right you´re asking if google and other search engines will find the print-pages up if you add the meta tag ?

    It want find your pages. That together with a .txt file in the folder root with the text User-agent: * Disallow: /

    will do it. Of course you have to have the print pages in another folder…

  24. We use a print style sheet at Boxes and Arrows, and I added a print preview that uses JavaScript to switch between the screen and print layouts.

  25. When it comes to content (articles), I don’t think users are going to be upset that the menu, ads, and other nonsense didn’t print. FamilyResource.com is an excellent example of proper screen and print CSS. When a user prints an article, everything is stripped except for the article title, author and article content.

    Example Article: Planning Retirement

  26. Users behaviours and expectations are set by the(what i classify as) “primary” tools they use in their day to day interaction with computers. and one of these primary tools is the browser. Every time they click on File > Print, they expect to see a Print Preview somewhere close by - which they can click to check if the output is desirable.

    While the printer friendly CSS is a great tool in their hands, it would help to let them preview the output before they go ahead..my 2c.

  27. What about search engines?

    Roger,

    No, search engines will not penalize the site for a “print version” page.

    If a standard method of “print version” were to exist for this page, it will have a different URL.

    Further, most print versions will have all site navigation, advertisements, UI elements removed and, by removing these items and utilizing different style sheets, search spiders are reading different HTML code; hence, a different page (because of a different URL and different code).

    And, Let’s say Yahoo’s editorial review staff, i.e., human readers, get a “print version” of an tutorial page. These editorial staff readers know the difference between site-significant content written for users and keyword-inflated content written for search engines. [Site-significant content examples being scientific sites, educational sites, government sites and news organization sites.]

    I’ve constructed sites with various CSS print versions or PDF files of a webpage. These “print” versions have been — Eventually — indexed and cached by engines. They don’t have high engine prominence, though; they’re not popular.

    Still, if there are lingering concerns about penalties, use JavaScript (or, PHP) induced style switching which does not create a different URL nor duplicate content on a separate page.

  28. September 9, 2005 by Henning

    No roundtrip to the server is necessary, so it’s faster and consumes less bandwidth.

    Personally, I’d use an alternate stylesheet for print-friendly pages. But instead of using the media=print method, use a javascript style switcher to change the style on the fly when users click the “Printer Friendly Format” link.

    That will save on the bandwidth and allow the user to print either what they see on their screen or the printer-friendly version.

  29. The number of times I’ve gone to sites, especially as a student needing information, and they haven’t had print stylesheets I’ve found my expectations dashed by getting printed out waffle, navigation and image elements where often the information runs off the page. One time I printed a reference page - I’m not sure what the set up was with stylesheets or whatever but it was a long time ago so I’d expect no print CSS, and I got about 50 pages pumped out at me with about 5 lines per page of information. That was in a uni computer lab and I couldn’t stop it printing. At 10 cents a page I was a bit miffed.

    I’m all for print css and can’t really understand the problem with expectation. Do people really want to print the superfluous stuff? Maybe giving them an option to print either way might be worth looking at. Is the expectation that they’ll get a pixel perfect fit to page view of the current rendered browser page? Then in that case they will probably always be dissatisfied.

    PHP styleswitching to provide a printer friendly version is effective too but similarly - what content do you put into it without hurting someone’s expectations? Seriously, ten users may expect ten things when they press print.

    I’ll stick to using print css or PHP styleswitching for a long time yet.

  30. September 9, 2005 by Roger Johansson (Author comment)

    It’s interesting to hear about the different views on this. No pointers to actual usability testing though. Anyone?

    I think people like us that more or less live in their web browser are better prepared to understand and appreciate print stylesheets loaded with media=”print”. Many others will obviously also appreciate it, but I think there is a decent amount of people whom it will confuse. I have no scientific evidence to back that up with, so I may be completely wrong.

    Several comments mention offering a printer-friendly version on a new page, which is what I currently do here (actually what the “Print version” link does is reload the same page with a stylesheet suitable for print and some stuff stripped out). I have also had clients that expect it to work that way.

    Browsers could definitely get better at printing, and being able to choose which stylesheet to use from the print dialog seems like a good idea.

    I’m not too fond of relying on JavaScript to load a print stylesheet.

    paul: I hadn’t thought about media=”handheld” having similar issues, but now that you mention it… maybe. Probably not though, considering that browsing the web with a handheld device is still pretty cutting edge and most people doing so can be considered technologically aware.

    Kristin: My print-friendly pages have the same URL as the screen versions. All I do is add a query string.

    Sean Fraser: What I’m serving is the same URL with a query string appended and things like the sidebar removed.

    nortypig: In my experience, yes, some people do indeed want to print the document exactly the way it looks on their screen.

    That’s why I currently use a link to a print-friendly page instead of using media=”print” - it gives people a choice. It is not something I will defend forever, just what currently seems like a reasonable compromise. If someone can prove me wrong (preferably backed up by research ;-) ) I am willing to reconsider.

  31. I think, as the Web is changing, the user expectations will, too…

    I don’t want to stick to that “Print Version” link for years, just because users expect that and that such thing is a relict from the time we had to use tables for layout.

  32. I don’t think it matters if you don’t meet user’s expectations - as long as the user is not disappointed as a result.

    In my experience, they are a little surprised at not seeing the navigation, search box and advertisements etc on the print out but then they consider you’ve saved them paper and ink and, infact, their expectations could be exceeded!

  33. Roger: “Same URL with a query string appended and things like the sidebar removed.” meets different page criteria.

  34. I’ve used the following:

    meta name=”robots” content=”noindex,nofollow”

    in all my print style sheets and have yet to be penalized for duplicate content (In Google, Yahoo, and MSN).

    However, considering how capricious some of the bots can be, who knows when they will start overlooking the noindex,nofollow tag.

  35. I haven’t read the whole discussion but…

    How about using a print stylesheet AND a “print-version” link/button? You can easily switch CSS with the help of e.g. PHP.

    When the less experienced user clicks in “print version”, he will get to see the same page with the print stylesheet.

    Combine with a noindex, nofollow in your meta, and you’re set.

  36. Anyone considered this being a feature to implement in the UA? File -> Print reader friendly (uses media=print). File -> Print ‘as is’ (prints as screen shoot).

    Why put another burden upon the web developer? ;-)

  37. In my experience, which is with non-tech savvy family and friends, they expect to the content printed or they want to be able to only see the content; my only explanation of that is to think of all those hot-spot usability tests, iris scanning et al; people tend not to see certain parts of the page on-screen or certainly focus on certain parts so when they appear on print they’re confused. The other point is that whent they do see it they don’t want to see Navigation (as it serves no purpose on paper). As most things are I see it as the way in which its implemented, remove only the things that are pointless on paper such as navigation, in fact I remember an article where this was extended so that printed links instead of being “link - title not url” became “link - the absolute url” instead. Perhaps not expected but useful

  38. September 20, 2005 by Anonymous

    Use the metatag described in the article and link to a printable version. Also provide a print stylesheet. both options give the same content to the printer.

  39. Last year I implemented an intranet for a multinational corporation, used by some thousands of staff throughout Europe. As they had chosen a design which, frankly, had too much design and not enough content about it (don’t blame me, I’m just a coder), I implemented a print stylesheet on the simple grounds that, otherwise, it was actually impossible (in IE, the corporate standard) to print any of the content at all.

    After the site had been live for 6 months, I casually asked the guy in charge if any users had reported problems printing. He looked surprised, thought about it and said no, nobody had ever had any problems with printing. Then he looked at the screen, realised what I meant, grinned and asked me how I’d done it.

    I concluded that the print stylesheet made the users’ lives better without them even noticing. That’s the way technology should be.

  40. I find that since websites can’t unanimously decide on print=media or print-friendly links, I always want to see what’s being printed before I commit so as to not waste ink. I’d much rather highlight what I want, and print the selected text and/or images taking my chances on a print stylesheet that may not exist.

    Also, occasionally (although seldom) I’ll want a logo/image along with the copy because I may print several documents before going to the printer to check churning out of it. The logo will be a visual cue to help me quickly differentiate between articles without having to read the first few sentences.

    As a user, I like to have complete control over what’s being printed so I’ll stick with text-selected printing or link+preview. It may be confusing when an inexperienced user familiarizes themselves with the branding/color/style of a website only to print something that is completely unfamiliar.

  41. September 23, 2005 by teeves

    edit: “I’d much rather highlight what I want and print the selected text and/or images, rather than take my chances on a print stylesheet that may not exist.”

  42. September 29, 2005 by mmmbeer

    Our solution: don’t use a print stylesheet, but create one. Then add a javascript stylesheet switcher to a “printer friendly” link. The link alternatively has a non-javascript printer friendly option (basically the server-side script changes the stylesheet to the print one).

    We’re currently debating if we want to have the media=”print” on by default. My instinct is yes because things just print nicer when I can lose all the screen layout stuff. Plus, everyone likes to save color ink.

    For me, it’s a toss-up. I think that user’s expectations are low currently because they don’t usually get printer stylesheets from sites that should have them. But, I also think that once they understand it, they’ll expect more of it.

  43. April 3, 2006 by Zephyr

    Just in case anyone makes it all the way down to this comment…

    Two more arguments for removing screen sections from a print:

    • Economic: print cartridges are expensive

    • Environmental: less paper used

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.