Building Printer Friendly Pages
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 <HEAD> and </HEAD> tags: <LINK REL=StyleSheet HREF="http://www.mysite.com/mystyle.css"
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!
Author Details
Lauri Harpf runs the A
Promotion Guide website, where he offers free information about search engines,
directories and other promotion methods. His site can be found at http://www.apromotionguide.com/