Make your site easy to print | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Monday, 18th October, 2004

Make your site easy to print

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!

Design:
The estimated time to read this article is 3 minutes


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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.