Building search engine friendly page
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
<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!
