Printing out webpages

Did you know that all University webpages print out in a print-friendly format automatically? From time to time we are asked if we can add ‘print-friendly’ pages to the website. But this functionality has always been on the website, using a technique that is over a decade old.

In modern web design, the visual look and feel of a webpage (determined by cascading style sheets or CSS) is kept separate from the structure and the content (built using HTML). This provides a great deal of flexibility, allowing us to present the same document in different formats without the need to maintain multiple separate webpages.

When you view a webpage in your web browser on a desktop computer (and, increasingly, a mobile phone), you will typically be presented with the webpage with a CSS style designed for screen media. This allows us to show off a bit and use the freedom of the screen to the full to create the rich, interactive webpages we are all familiar with.

A style sheet designed for print media can remove many of the elements of a webpage that just don’t make sense on a printout. So most colour is removed and all text is displayed as black on white, saving on ink. Navigation menus are removed because the clickable printout still hasn’t been invented yet. And in place of hyperlinks in the main content area, we display the URLs of all links so that you don’t have to refer back to the webpage to work out what the link is to.

What you have left is a clean, streamlined document that can be printed off perfectly — almost as though it was never a webpage in the first place. And we didn’t need to create a ‘print friendly’ version — it was generated automatically.

We are planning on publicising this feature more in the future, as it seems that many are still unaware of it, even though it has been a standard web technique for some time now.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s