I’ve been wondering for a while about the correct way that web pages should be formatted for printing:

In my view they should be WYSISWYG.

Otherwise you get the situation demonstrated on this page from the BBC’s webpage – that by pressing print you lose the interesting diagram:


And I also seem to see an increasing amount of paper wasting non formatting: as demonstrated by this page:


So the question is: How should web pages be formatted for printing ?

  • 1
    Print Friendly (printfriendly.com) does a good job in allowing the user to edit the page before printing it. You should give it a try and see how they do it. They also have a button you can embed on your site. Mar 15, 2012 at 14:45

6 Answers 6


Formatting a page for printing is essential, since some of the user like to print a web page. One example of that is a cooking receipt just because the surrounding environment at the time of cooking isn't suitable for a Laptop or tablet.

Technically speaking you need to specify a print CSS and possibly also a "Printer friendly version"-button. The button isn't really necessary IMHO, but optional and depends on the target audience and context.

Images is also difficult, because some users would like images and others just the text content. Adding two buttons, on for print with images and one without images, would easily get cluttered.

There are many different cases in this situation, therefore test would be a way forward. Preparing for test (or if management/leadership don't approve of test) personas trying different use cases would also do.

A web page should be formatted for printing in a way that it support the target audience.

  • A new question: but it would be interesting to know if there's any research / data on how much printing goes on / and what gets printed.
    – PhillipW
    Mar 15, 2012 at 21:53
  • I also have a sneaking feeling that testing printing often gets left out of the user testing task list...
    – PhillipW
    Mar 15, 2012 at 21:57
  • @PhillipW Absolutely right. Research data would be interesting, leta see what is out there (I'll see what I can find). Testing print is easy, just set the print CSS to media="all" and comment out the other CSS links. But it's just as hard to get it right as screen CSS which might be the answer to why they work poor. Less use = less attention. Mar 16, 2012 at 4:37

There's no 'right' answer to this. Some considerations:

  • allow it to print as-is. Pros: no effort required. Cons: rarely will it print as intended.
  • Use print css to customize the print version. Pros: custom designed just for print. Cons: Users sometimes want it as seen in the browser.
  • Use a print-friendly version of the page as an in-browser page. Pros: People can use the print-friendly on screen. Cons: requires some back end development work.

I usually prefer the 3rd option whenever I can...provide a 'print friendly' version of the page. The concept is similar to print css, except that I load that css in the browser so a user can view it first. The advantage for content-rich sites is that many people prefer the print-friendly version for on-screen reading as well (as it tends to focus more on content of the page and not navigation/ads/etc.)

Plus, it has the benefit that the user sees what will come out on the printer. Sort of a forced print-preview.

  • I never liked "print friendly versions" (though occasionally they're more readable on screen...) but I love Chrome's print preview function
    – Ben Brocka
    Mar 15, 2012 at 16:30
  • Can't see much of a difference between 2nd and 3rd bullet point (given that modern browsers do a really good job in print support/preview). Mar 15, 2012 at 16:50
  • There's a big difference--#3 is readily viewable on-screen in the browser, while #2 is not.
    – DA01
    Mar 15, 2012 at 16:59
  • Also, re: print-preview. That's not always a nice UI to read within, and it seems that few of your average users even know about it/understand it enough to use.
    – DA01
    Mar 15, 2012 at 17:00
  • 1
    @DA01 I understand the technical difference. Using the print-preview in CSS sounds reasonable if the sites' content is not easy to read in the normal view. But then I'd rather work to improve the normal view than having a great print-preview that people would use to read. Mar 15, 2012 at 23:02

Use some of the approaches outlined for good responsive design and adapt accordingly, Print is just another format like Mobile, Desktop or Tablet.

I would start by removing everything, then think about what is absolutely required. Navigation, toolbars, buttons are not. Large text sizes which fit A4 paper are. Look at swapping out full colour logos for Greyscale. Why not embedded links in a large chunk of text, you can use a CSS rules such as:

a:after {
    content: " (" attr(href) ") ";

Which will place links after the text like (http://ux.stackexchange.com/) just after the HTML link.


You can't always achieve WYSIWYG printing with modern browsers since they all turn off background images and colours by default.

It's always a fine balance between brand consistency/familiarity and pragmatism; since you can't click links or interact with certain form controls in a printed document, it makes sense to hide them when printing.

CSS provides a bunch of properties to help authors define how the printed page should look, especially around page breaks. Sadly these properties are generally poorly supported by browsers. In general, the consensus seems to be that the printed page should be limited to the site's brand and the content being viewed. While this may break familiarity, it does so decisively rather than hedging its bets. Naturally this model is more appropriate for article-based content than for more temporal or transient information like a Facebook News Feed.

There's a terrific A List Apart article that covered designing print stylesheets worth reading through.


If your intention is to print an existing page, you should try this website. If you are looking for a way to develop a printer-friendly website, consider a different approach.

I am not affiliated to this website, but I found it very useful. Especially since you can remove ads and select which divs you want to show. External rendered graphs and charts are also printed.

It's worth a try.


Always baffles me how there is any question about what should print when you click print. Whatever I am looking at on a web page should be printed. Period. End of story. If you want to print the body only, then Copy and Paste it into Word first.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.