Make your site easy to print
Posted in Design on: Monday, October 18, 2004 by Paul Boag
If like me you get frustrated by the fact that most web sites never print properly then you will be pleased to hear that you can format your web site totally differently when you send it to print!
A printable web site is vital
Lets face it, computers suck when it comes to reading large amounts of text. Although many improvements such as Cleartype have been made I doubt that the screen will ever replace good old paper for readability. The reality is that when most users are faced with a lot of content they want to read on a web site they tend to print it out and read it that way.
The problem is that few web sites print very well. It is common to see the right hand sides of web sites completely cut off when printed there by making the content unreadable.
Fortunately web standards based design can solve this problem by allowing you to completely change the appearance of your site when printed simply by using a separate cascading style sheet. This is because web standards separates design from the content of your site.
What to print and what to leave off
So what exactly should your site look like when you print it? Well there are two factors to consider:
- The limitations of printers
- The requirements of your users
The limitations of printers
Browsers tend to be fairly restrictive by default in what they print. This is largely in order to save their users ink on printing large areas of background colour which aren’t really necessary. As a result background images and colours are not printed by default and so should be avoided in print versions.
Secondly printers tend to have a narrower printable area than the average web site which is why sites are often cut off. Unfortunately each make of printer has a slightly different printable areas so I would recommend that any print version of a site is scalable to fit the available area.
The requirements of your users
At the end of the day the user is looking to be able to easily read the content he has printed. He is not interested in navigational elements which are redundant when printed. Take for example this page you are viewing now. If you were to print this you wouldn’t need any of the navigation or fancy graphics. All you would need is:
- The branding – which site the print out came from
- The title of the article
- The content of the article
Everything else is redundant.
In order to aid readability (which is what a print out is all about) you should increase font size and use black text on a white background. This is not the place for lots of fancy graphics. Rather a print out should be entirely about ease of legibility.
Conclusions
In the past separate, easy to print version has been the domain of sites with expensive content management systems that could produce a separate printable version of a page. However web standards provides us with the opportunity to offer this type of functionality without multiple templates or maintaining separate versions of the same page.
Why not print this article to see these principles in action.
