Website Printability

What does it do?

Tests whether or not pages are designed to be printed.

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?

WebScan 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

WebScan 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. WebScan 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 pages print fine, but WebScan 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 WebScan disagrees

WebScan 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, which is nearly always enough.

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 WebScan 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).