Webdesign & Entwicklung

Making websites printable

In Germany there is that cheeky term „Internetausdrucker“ - internet printer - which is particularly addressed to politicians. But shouldn't we take care of those printing people?

That's exactly what I thought about, when I was looking at my site some time ago. To be honest, I did not care if my page is looking good when printed. So I just tried it and had a look at the print preview.

It did not look very well. Many elements of the page, which are unimportant for print, would have been printed. For example the sidebar or the comments.

Hide unimportant stuff

So I decided to create a print stylesheet and started hiding all the things which are not usefull on a print. That's the sidebar, the comments and the navigation. The print view should be the raw text only.
As a foundation for my new css, I used my css for the mobile breakpoint which reduces the site to a minimal view. And I additionally hided the navigation.

To add a stylesheet for printing, you just need to add something like this within :

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

Fonts

Looking at the raw text, I immediately saw, I had to reduce the font size. So I set it to 12pt and added some paddings and margins.

Links on the page

You cannot print links. I could add the full links at the bottom of each article and everybody who is printing my text could type them in, if needed. But that is no good solution.
So what if somebody takes a look at the printed article some days after printing (or gives the text to a friend) and wants to visit a link?

Finaly QR codes have a right to exist!

In print view I add a QR code below every article. So if someone prints one of my articles, he/she/it just needs to scan the code and will be redirected to the original post.

To create the QR code, I use a JavaScript library, which just needs an URL and (in my case) a size of the code-image.

Opinions?

I am curious what you think about that topic. Did you optimize you website for printing? Tell me in the comments or send me a message on twitter.