Consider Printing When Designing Web Pages

When designing a web site you should consider the media with which it is going to be viewed. Currently the most common is on the screen through the web browser but what is often not considered is, what does this look like when printed?

Some websites have links to printable pages but this is only necessary if you want to accommodate browsers from the dark ages. CSS2 allows 9 different media types: aural, braille, embossed, handheld, print, projection, screen, tty and tv, so the same web paged can be viewed in a style suitable for the media without the need for separate pages.

To get the best screen and print layouts for the same page, you need to add separate style sheets for screen and printing:

<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

Or if you want to import:

<style type="text/css" media="print">
@import "print.css";
</style>

Or, you can specify a style sheet for multiple media:

<style type="text/css" media="screen, print">
  @import "print.css";
</style>

You can also specify within the style sheet by wrapping a style section:

<style type="text/css">
@media print {
#menu { display: none; }
}
</style>

As the screen is interactive and a print out is not, you need to consider which parts of the page should be included when printed. Sections such as menus, adverts and links are of no use on a printed page, as the user can not click on them, so you can hide them by using the display:none css property.

Also consider that the page maybe printed in black, so change highlights using colours to bold, italics or underlined.

The font may also need to be changed. Serif fonts, such as Times Roman or Garamond, are generally easier to read when printed, where as sans serif, such as Arial or Helvetica, would be used on the screen as they are simpler. The text size should be in points as pixels can sometimes give strange results.

Keep images, especially backgrounds to a minimum, the user would not thank you for using up all of their ink on a pretty background.