Print style sheet optimisation

Do you optimise for print?

Print style sheet optimisation

Printing websites seems to be something we do less and less but that doesn't mean it should be forgotten. There are still people who print websites and I am keen to provide the best experience for all my visitors no matter their intentions.

This evening I spent a total of 10 minutes making tweaks to my print style sheets using my recent article on the Bristol Device Lab as a test page. Before discussing the changes I made I want to note that I already had a few key print rules in place:

  • Typography was set to black to not waste coloured ink
  • All URLs were underlined
  • All URLs were spelled out in brackets following linked text

This was all achieved with 3 lines of CSS:

* { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }

a, a:visited { text-decoration: underline; }

a[href]:after { content: " (" attr(href) ")"; }

Tip:

When using a[href]:after { content: " (" attr(href) ")"; } I suggest you only target links within your primary article container as other areas of your website (ie linked logos) can become messy.

Original print preview

My original print preview for articles
My original print preview for articles

All the unneeded areas of the printed article are in yellow, this includes the menu, side menu, footer, social links and a giant photo of me. In total 75% of the 3 pages is being wasted and this means we can easily reduce both the amount of wasted ink and paper.

It is important to consider what a user who is printing your page is going to need, what is still useful when they are away from the screen? In the case of my website related articles seem to lose there value when they can't be clicked.

New print preview

Here is the new version which takes up 2 pages instead of 3 with far less wasted space. To achieve this I simply had to hide 6 containers and set my primary container to a width of 100%.

The optimised print preview for articles
The optimised print preview for articles

I suggest you create a print image strategy as most users will not want to waste ink on photos of the author but perhaps some of your article images are critical to understanding the content.

I am sure there are other areas of my website which could still be improved when it comes to printing but this seems like a good start and who can argue over 10 minutes?