Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

http://www.bbc.co.uk/news/uk-17365934

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

http://www.sciencemuseum.org.uk/visitmuseum/gettinghere.aspx

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

share|improve this question
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. –  Yosef Waysman Mar 15 '12 at 14:45
add comment

4 Answers

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.

share|improve this answer
    
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 '12 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 '12 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. –  Benny Skogberg Mar 16 '12 at 4:37
add comment

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.

share|improve this answer
    
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 '12 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). –  greenforest Mar 15 '12 at 16:50
    
There's a big difference--#3 is readily viewable on-screen in the browser, while #2 is not. –  DA01 Mar 15 '12 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 '12 at 17:00
    
@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. –  greenforest Mar 15 '12 at 23:02
add comment

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.

share|improve this answer
    
It's worth noting that while that trick is good, it will only work in (relatively) modern browsers, and the rule will also look strange for links that aren't absolute. The best solution I'm aware of for printing link URLs is to print a list of endnotes with link URLs. –  Kit Grose Mar 20 '12 at 2:54
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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