It's been a while since I last made a post but I have been doing quite a bit of research when I can into print style sheets, not something a lot of developers & designer consider when making a website (you can tell by just trying to print some random sites on the web). There are many articles out there which cover parts of this topic but I thought I'd write my own based on what I've read and generally learnt.
I'll write about two or three posts on this subject, this post is going to focus on what to think about when making a print style sheet and why you need one anyway. The next post(s) will give more practical information on how to implement different ideas and techniques.
Why have a print style sheet anyway?Quite a few people like printing out websites, as surprising as this will come to a lot of people, particularly articles of long text, why would they do that? Some times it is because reading from paper is a lot easier on your eyes than off a screen which I think is in part due to screens only being 72dpi but printed is much higher. This of course isn't the only reason, sometimes people print out tutorials so they can follow along on screen without having to switch between windows (not everyone has large or multiple monitors like most developers), photos get printed from the web, to allow them to read an article while on the train as not everyone has tablet computers yet or pretty much any other number of reasons.
Size restrictionsOne of the the main things to consider is the size restrictions of paper, I personally think it is safe to assume it'll be printed out on A4 paper and use that as a guideline of the space you have to work with. So if you have two columns of text (normally one main and a sidebar) if the sidebar is actually important and provides supporting content you might have to resize the columns or move them totally so they run one after the other to fit things in comfortably.
When making these decisions be sure to take into account the type of content on the page, for example is it an article of text, table of data, grid of photos or something else? If it was a table of data having content in two columns may not work out well as it'd squash the data table and make it harder to read but a grid of photos could benefit from having a few columns, as that basically makes a grid.
Another thing which must be done to make best use of space and of your users ink is to remove and elements of a page which aren't useful when printed out. For example the navigation of your website isn't going to help anyone when it is on paper as they can't click anything, keeping the URL to the pages on the paper is a good idea so readers can get back to the online page but most modern browser do this automatically anyway. If you wanted to go a bit further with the page URLs providing a shortened URL would make it a lot easier for them to type in, possibly even a QR code?
Other elements worth removing in general could be the header and footer sections, non-relevant images and sidebars which aren't providing any directly related information. The main thing to do is think about what on your site is going to be useful when printed out and remove the bits that aren't as what is and is not relevant can vary greatly from site to site.
What to printAnother consideration is what will the user want to print? It might not always be the whole website, for example I've been working on a climbing club website (not really print friendly yet, but will be soon) has a page of all the meets taking place through out the year. With a large list of meets it could be useful to print out information specific to one meet only (the one they are attending) and this is something I'll be implementing later this year on that site.
Of course if you decide users will probably only want to print part of the information on a website you need to think of a method to show the user only the content that will be printed so they know they won't print the whole page and exactly what will be printed. This is something I'll cover in another post (not in this 'series') once I've decided how to do it on my climbing clubs website and worked out some of the usability and practical issues.
HyperlinksObviously these are useless on paper but printing out the URLs so that the user can type them in to the browser (or as mentioned above providing short URLs or QR codes) can be done giving the user the ability to still make some use of those links. I'll be covering this in one of the next posts.
I'd also say that leaving links unstyled and just looking like the rest of the text is probably the way to go as link are useless offline in a printed form. I did read an article that stated it would be good to leave them styled so the user could see where links were and then view them on the online version but I cannot see why or how this could be useful.