|
Design Tip:
Build Print-friendly Pages
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
At some point all Internet users want to print a page they're viewing. Unfortunately, that often means printing a lot of stuff they don't want: banner ads, sidebar items, etc. Make your visitors happy by including a print-friendly option for some pages in your Web site.
Careful With Page Layout
The best Web pages have a layout that's friendly to online readers: columns, bulleted items, and text interspersed with graphic images. But online layout rarely translates into a great printed format. In print, visitors want information presented in a readable, compact format without the graphics and banner ads.
To provide that, consider building two versions of some pages on your Web site: one to read online and one to print. Although many Web hosts limit the amount of disk space allowed for your site, text-only pages will be relatively small. The text-only version of this page is less than half the size of the online format.
Here are the most important considerations:
- Width: The text-only page should print in a legible format on a standard sheet of paper. Keep in mind that pages designed for an 800 pixel computer screen may be cropped or scaled to fit the printed page. To be safe, limit your line or table width to about 500 pixels.
- Left-justify text: This increases readability.
- Site navigation: Avoid dead-end pages! Give visitors a way to navigate back to the previous page.
- Color: Use black text on a white background for a good contrast on the printed page.
- Citation information: Researchers may need to formally cite your work in their documents. Simplify that by including the title, author, date, and URL on your print-friendly page.
|
CSS2 recommendations include specifications for paged media, but browser support is spotty. The new CSS elements allow you to define where page breaks occur and have some control over the width of the printed page. Once it is fully supported by the major browsers, your job will be a lot easier!
When you've finished formatting and testing the text page layout, you're ready to link it to the main page.
The LINK Tag Works In IE
Use the LINK tag to automatically send the printable version of your page when visitors print it. This process is invisible to visitors. They won't see your print-friendly page online - but will be pleasantly surprised when they get it off their printer.
Include this code inside the HEAD section of your page:
<LINK REL=alternate MEDIA=print
HREF="http://www.netmechanic.com/"> |
Be sure to include the correct name and path for your print-friendly page in the HREF attribute.
Note: this works only in Internet Explorer version 4.0 and up.
A Two-step Process Works For Everyone
Another option is to include a link on your Web page that takes visitors to a print-friendly version of the content. Once there, they can print it. This adds an extra step not required by the LINK tag, but it works for all browsers.
Consider including this text link on pages that you think visitors may want to print. Naturally, you don't need two copies of every page in your site. Good candidates include: order confirmation pages, installation instructions, and product specifications.
Check out a Printer Friendly version of this newsletter story.
The link for this is just a simple HREF:
<a href="design_print_no8.htm">Printer Friendly</a> |
This is just one example of a design issue that works differently across browsers. Other design techniques can actually break your pages in different browsers. HTML Toolbox will alert you to browser-specific HTML code on your page. Browser Photo will show you how Web pages display in 14 different browsers, browser versions, operating systems, and screen resolutions.
|
