Back to Previous Page
Design Tip: Build Print-friendly Pages
April 2001 NetMechanic Webmaster Tips Newsletter
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.