Web design

The Web was created to display information on the screen, not on paper. So looking good in print on the Web may take a little extra effort, but your audience will thank you in the long run.

I have never seen a paperless office, and would be quite surprised if I ever did. That was the big promise that came along with the computer, though, wasn't it? The complete elimination of paper from our lives. No more filing cabinets. No more clutter. No more dead trees. An entropy- free utopia, where electrons were constantly recycled and reused, just like in Star Trek.

But something tells me that we'll have the technology to fly between the stars before we eliminate paper.

With the advent of laser and ink-jet printers, we seem to be buried under mounds of perfectly printed paper. Even the Web seems to contribute to the amount we use, rather than lessening it. If a Web page is longer than a couple of scrolls, most people will print it out rather than sit and have a cathode ray tube zap them in the eyes.

But the World Wide Web was created to display information on the screen, not on paper. Web graphics look blocky when printed out, and straight HTML lacks much in the way of layout controls. That said, there are steps you can take to improve the appearance of printed Web pages. Looking good in print on the Web may take a little extra effort, but your audience will thank you in the long run.

Here are eight simple things you can do to improve the appearance of your Web page when it gets printed out.

Use tables or Cascading Style Sheets to restrict the width of your page to no more than about 540 pixels wide. Any wider than this, and the content will have to be reduced in size or it will run off the printed page.

Try to put the main content, the part your audience will be really interested in reading, into a frame by itself. You can then place all of the navigation, titles, and advertisements for the site into other frames. This will allow the visitor to print out the frame with the good stuff in it and leave the rest. Learn more about designing with frames at my Web site http://www. mindspring.com/moonshadow/frames/.

Avoid using background colours or background graphics with lightly coloured text. Although they can add flavour on the screen, background colours and graphics turn into noise when printed. Some browsers allow you to print documents without backgrounds, but then the light-coloured text will not show up against the white paper.

Avoid transparent colours in graphics, especially if it's on a background colour or a graphic. The transparent area of a gif image will usually print out on paper as white, regardless of the colour behind it on the screen. This is not a problem if it is on a white background to begin with, but it will look messy if the graphic is supposed to be on a dark one.

Try not to use text in graphics. The irony of printing stuff off the Web is that text in graphics, which looks smooth on the screen, will look blocky when printed out, but regular HTML text, which looks blocky on the screen, will print out smoothly in the hands of any decent laser printer. Try to stick with HTML text as much as possible.

Use Cascading Style Sheets. Make no mistake, Cascading Style Sheets are the future of Web design, and CSS allows you to create documents that print out looking as good as anything spit out of a word processor. Go to http://www.w3.org/TR/ WD-print for more about CSS printing extensions.

Define your medium. An often overlooked CSS capability is to specify the output medium for a particular style sheet. You can set up one style sheet for your Web page when it appears on the screen and another if it's going to be printed, allowing you to tailor the appearance to the medium. Check out http://htmlhelp.com/ reference/ css/style-html.html for more information on defining style sheets media.

Provide a separate, print-ready version of the document. Rather than forcing visitors to follow every link in your site, provide a linear version that they can download, print out, and read. Adobe's Acrobat can take files from most word-processing and layout programs, such as PageMaker and Quark, and create a PDF file that retains most formatting, fonts, and graphics for delivery over the Web. Find out more about Acrobat at http://www.adobe.co.uk/products/acrobat/ main.html.

If you have any suggestions, gripes or other comments about this article, please contact Jason Cranford Teague at mshadow@dircon.co.uk