How to create Print-Friendly Pages
At some time or other we have all wanted to print a web page we are viewing. This usually means printing a lot of stuff we don't need or want, like banner ads, sidebar links, graphics, and much more. What is one to do..!
Web pages are laid out to look good and be friendly to online readers. They use tables, columns, backgrounds, and images mixed in with the textual content. This online layout seldom looks good in a printed format. In a print version we want the information in a neatly organized readable format, without all the window dressing.
So when designing our site lets make our visitors happy and give them an option. On some of the more important pages lets offer them a "printer-friendly" page, as well as the online version of the page.
"Printer-friendly" Page Design Layout:
The "printer-friendly" page should print on a standard 8-1/2 x 11 sheet of paper. To accomplish this limit your line width to 500 pixels or less.
Background and Text:
The use of black text on a white background allows for good contrast on the printed page. It is also a good idea to align the text to the left for easier readability.
It is a good idea to have the "printer-friendly" page open in a new window, with a "close window" link on the page.
If there is a chance the info maybe used in a newsletter or other publication it is a good idea to include an author byline at the bottom of the page. This should include the authors name, and the URL of the site or "printer-friendly" page.
Linking to the "printer-friendly" page
In Internet Explorer 4.0 and higher you can use the link tag to send the "printer-friendly" version of the page directly to the printer when your visitor clicks on print.
Place this code in the HEAD section of your page, between the <head> and </head> tags.
<link rel=alternate media=print href="http://www.your_domain.com/directory/page.txt">
Note: this works ONLY in Internet Explorer version 4.0 and up.
There is another way that works for all browsers, it is a simple hyper link to the "printer-friendly" page. This is where you may want the page open in a new window, with a "close window" link on the page.
Hyper link example(will open in new window):
<a href="http://www.your_domain.com/directory/page.txt" target="_blank"> Printer Friendly Page</a>
Note: if you do not want the page to open in a new window remove the target="_blank" attribute from the hyper link.
Close Window Button code:
<input type="button" value="Close Window"
Remember, you can have some of the best content (info) around, but if your site is not fast loading, user-friendly, and easy to navigate... the company won't stay long and probably will not come back...!
Larry (Momp) is the Owner and Web Master of Momp's Web Design and MWD News newsletter. In addition to the fee-based web design service, it is his goal to provide free design info, web tools, content, and services to help you build and promote your site. Momp's Web Design: http://www.mompswebdesign.com