Printability test

What does it do?

Tests whether or not pages are designed to be printed, and shows how the homepage appears when printed.

Example results

Example of printability test results

Why is it important?

One of the more common ‘exit strategies’ for someone using a website is to print the desired content the have found before leaving. Many webpages don’t print well, or at all, potentially costing a website a prospect or sale.

How is it measured?

Sitebeam looks for code which says how to handle this webpage when it is being printed (specifically, CSS styles for print). The score is based on the proportion of pages which do this, with a perfect score of 10 meaning all pages have print styles defined.

Technical explanation

Sitebeam looks for any applied CSS styles for the media type “print”. Those styles must:

  • Be defined.
  • Actually be used by at least one part of the current page.

The assumption is that if this is the case, there has been intent to make the page printable. It is of course not possible to check (through automated means) whether or not the page actually looks respectable as a result.

Implementing printable pages

You can implement print styles in many ways, including attaching a specific stylesheet:

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

Or use the @import at-rule inside a stylesheet:

@import url("print.css") print;

Or use the @media at-rule inside your stylesheet:

@media print {
  ... styles go here ...

It isn’t enough to just define styles however. Sitebeam must detect that the styles which have been defined for print are actually being used. An empty stylesheet, or one that doesn’t affect the page will not affect this score.

Potential problems

My print preview doesn’t look right

The print preview is a simulation based on an emulated browser, that operates similarly to (but not identically) to Internet Explorer 8 when printing. Different browsers, paper sizes and print settings will result in different looking webpages – this preview is meant to represent what most users are likely to see.

My pages print fine, but Sitebeam disagrees

Your browser may be compensating for the absence of a page optimised properly for printing; other users may not share your experience. Alternatively, these pages may be using a very old approach to printable webpages, which is no longer recommended or necessary since the widespread adoption of CSS (i.e. since around 2001). They won’t necessarily print consistently or at all modern or future browsers.

My pages don’t print well, but Sitebeam disagrees

Sitebeam can’t evaluate how well designed a page is for printing like a human being can (e.g. the header looks ugly). It can only detect that some attempt has been made to make the page work when it is being printed. You can see what the homepage looks like in Sitebeam by looking at the print preview.

I have separate print versions of my pages

These are a vestige of an older time when separate print versions of pages were necessary. Modern webpages do not require separate print versions – it is possible to make a webpage print correctly (even will a different design) when printed automatically. That is what Sitebeam is testing for.

How to improve this score

Define a print stylesheet (or stylesheets) for your website, and apply them to your pages. The amount of work required is usually quite small, assuming the website is already making good use of stylesheets. Typically, you might want to:

  • Remove superfluous page elements, such as search panels and navigation.
  • Where appropriate, display an alternative page header and footer.
  • Limit the width of the page to fit the printed page.
  • Remove any backgrounds, using black text on white.
  • Make headings appropriate sizes and colours.
  • Conceal links (e.g. remove their underline and colours).

How to use this test effectively

If this test is reporting a low score, a web designer should take a look at what would be involved in adding print styles to the existing website. Often these are very straightforward (see “How to improve this score”) – changing one or two files can sometimes be enough for websites with hundreds of pages. Good scores that are less than perfect (e.g. 8/10) usually indicate a few pages are not fully printable. In some cases this may be acceptable, otherwise someone should drill down into the test for details and tackle these pages in turn.

Further reading

Was this article helpful? Contact our support team if you have a question.