Building Printer Friendly Pages

Your site looks like it's working perfectly. You've tested it
with several different browsers under various resolutions. The
HTML complies with the standards and your CSS is impeccable.

Even if all of the above statements are accurate, everything
still might not be the way it should. We often design for
screens and blissfully forget that we need to take other devices
into account as well. It's surprising to notice that while
printers are very widely used, a large part of designers seem
to completely ignore them.

Why should I do this?
=====================

The more text your site contains, the more reason you have to
think about printers. Many people prefer to print out long pages
instead of reading them from their screen. They can't take their
19" screen to the park, to their bed or to the beach. However,
if they print your content on paper, they can read it whenever
they want to, wherever they want to.

By giving your users the possibility to easily print your pages,
you're making your site more usable. At the same time, you're
encouraging people to spread the word about you and your site.
What's more convenient, "Hey, read this great article" or "Hey,
go to your computer, fire up your browser and go to this address
to read a great article"?

How do I do this?
=================

Ensuring that your site is printer friendly can be done in many
ways. Personally, I prefer to use CSS for the job. While it is
not supported by some older browsers, CSS is a good choice
because it eliminates the need to create separate "printer
friendly" versions of your pages. The same page can have one
layout for browsers and another one for printers!

Unless you're already familiar with CSS, you might benefit from
taking a quick look at HTML Help's CSS Tutorial
( http://www.htmlhelp.com/reference/css/ ) before we begin. It's
especially important that you familiarize yourself with class
selectors, as many of the examples below will use them.

That being said, let's open up Notepad and start creating our
new external stylesheet file.

Modify the layout...
====================

The first step is to eliminate everything that is useless in a
printed version of the page. Banner ads, navigation menus and
all unnecessary graphics should be removed. You can do this by
adding a new class to the stylesheet:

.remove { display: none }

Next, you'll need to think about page width. If your pages are
too wide, they won't fit on the paper. Width problems are often
caused by a layout that contains fixed-width tables. The solution
is to either use relative widths, or to make sure that the fixed
width is not too large. In order for your pages to print
correctly, they should have a maximum width of approximately 600
pixels.

As CSS overrides the HTML definitions, it's easy to change the
size of your tables. For example, defining a relative width of
100% can be done with the following class:

.setwidth { width: 100% }

...and don't forget the details!
================================

Your next concern is the font. The one you use for screen
display might not be the best one for paper. Sans-serif fonts,
such as Arial, are often considered to be the most suitable
fonts for the Web. On the other hand, Times New Roman is
generally the best solution for printed content.

In addition to the font style, you'll also need to consider its
size. The font has to be large enough so that it can be read
easily. However, if it's too large, it'll take up unnecessary
space. The optimal size in my opinion is somewhere around
12-14 points.

Consider setting the background color to white and the text
color to black with CSS. Some printers do print background
images and colors, which is usually just a waste of ink. Even
worse, if the text color and background color are close to each
other, the printout may be impossible to read.

Instead of using a class selector for these modifications, it's
usually more comfortable to simply change the way in which the
text inside the BODY tag is displayed. Setting the font to black
12-point Times New Roman and the background to white can be
achieved with the following CSS statement:

BODY { background-color: white; font-family: "Times New Roman",
Times, serif; font-size: 12pt; color: black }

The final touch
===============

After you've created a stylesheet that is to your liking, link
it to your HTML files. To do that, simply place the following
line between the and tags:


TYPE="text/css" MEDIA=print>

All that you'll need to do now is to use your new classes in the
appropriate places and you're set to go. Happy printing!