Book HomeWeb Design in a NutshellSearch this book

5.2. Printer-Friendly HTML Pages

One way to ensure that your users can get a good copy of your content to-go is to link to a separate "printer-friendly" HTML document especially for printing. In general, printer-friendly pages are stripped-down versions containing just a single column of content with minimum HTML formatting. Figure 5-1 shows pages from two web developer resource sites and their corresponding printed pages.

Figure 5-1

Figure 5-1. Two web pages and their corresponding printer-friendly versions

The following sections detail some steps you can take to design printer-friendly pages. Of course, if you anticipate that your audience will want to do a lot of printing from your site, you may choose to design your original pages according to the same printer-friendly guidelines.

5.2.1. Keep the Page Narrow

The most common problem with printing web pages is that the right edge can get cropped off. This happens when the page is fixed at a pixel width (using a table) or contains graphics such as a navigation bar that is wider than the printable area of the page.

So how wide is too wide? If you want to be absolutely sure that no content slips off the edge for anyone, keep the width of tables and graphics under 550 pixels. An even more conservative approach is to use HTML text only (with no tables fixing the page width) and only minimal graphics.

Browsers that shrink the page to fit the printable area can accommodate any page width, but you risk the contents becoming too tiny to be legible, so it's best to keep tables and images under 750 pixels wide.

5.2.2. Keep Text Visible

Another tip for keeping web pages fit to print is to use black (or dark) text on a white (or light) background. Some older browsers are known to print out dark backgrounds and the text black as well (even though it is white on the screen), resulting in a solid field of black on the paper.

While browsers are now more capable of printing colors as they are seen on the screen, in general, your printer-friendly version should be designed to look like a printed document, with dark type on a light background. It saves on toner as well!

While many home users print to color inkjet printers, people in offices are more likely to be printing on black-and-white laser printers. For this reason, printer-friendly pages shouldn't rely on color output for communication.

5.2.3. Think About Content

If you are taking the time to create a separate printer-friendly document, you should tailor the content of that document to be appropriate to the medium. Consider why the user is printing out the web page and how it is going to be used. Chances are, people just want the content of the page for later reading or filing. Following are some things to consider when assembling your page:



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.