|
Many web sites look good on a computer screen but are an absolute
mess when users try to print them out. What can you do to make sure
your site looks good both on a computer screen and on paper?
Printers?
First of all, it is of course vital that a web site not only looks
good in your resolution and browser of choice, but in all most
commonly used browsers and resolutions. Because a lot of people like
to print web pages, it's equally important that your web pages print
out well.
Basic precautions
No frames. Sites with frames are an absolute disaster to print.
An inexperienced surfer who uses the print button to print out a
page of a site that uses frames, doesn't get one page, like he
expects, but several pages that don't look anything like what the
surfer sees on his computer screen. Because the average user has no
idea what frames are, he is at a loss to know what's gone
wrong.
No Flash. Recent browsers succeed in printing Flash pages,
but naturally they can only show one image of the Flash-animation.
This is especially enervating when a site uses Flash for full text
pages.
Use standard colours. Although research has shown that black
letters on a white background are the easiest to read, a lot of
sites use all sorts of strange text and background colours that
don't give very legible print results, especially when the text
colour is lighter than the background colour.
Fluid page layout. Sites that work with a fixed page width
often don't fit on regular size printer paper. This is already the
case for pages that are 800 pixels wide. To avoid this problem, it
is best to work with a fluid layout that adapts to the size of the
screen.
What about a print button?
Some sites are aware their pages don't print out very well and
provide users with a print button that refers to a printer-friendly
page. If you provide printer-friendly versions of your web pages,
always make sure they are pleasing to look at and contain the name
of your site or company, the title of the page and the url. Don't
overestimate the effect of such a print button however; many users
remain faithful to the print options of their browser at all times
and will not use a site's own print button.
Style sheets?
Style sheets provide a seldom used but excellent solution for this
print problem. The best way to do this is to provide not only a link
to your regular style sheet but also one to a second style sheet
that is only used when the page is printed. To do this, you need to
use the attribute media='print' in your reference to this style
sheet. In the style sheet itself you can use a tag (for example:
".screen { display:none; }") to make sure certain parts of
your page aren't printed. If you don't want certain elements, like
for example the navigation, to be printed on every page, you can put
class="screen" next to them. You can refine the system
even further by adapting certain classes in your 'printer style
sheet' to the standards of the print medium. If you for example use
green letters on your web site, you can define them as black in the
printer style sheet, enhancing the legibility of the printed pages.
Els Aerts & Karl Gilis
A more in depth version of this article
has appeared in Tips & Advies Online Ondernemen, year 5, number
21 (Belgium and the Netherlands).
|