Skip to content | Site Map
Contact Details
P 07 3278 4325
M 0420 837 445
E support@ andrewrowlings.com
Post PO Box 2004
Graceville East
QLD 4075
ABN 202 3456 3434

Focused on software development with a professional approach and a commitment to quality. 



Other Articles

Printer Friendly Web Pages

17th July 2006

Introduction

It is a good web practice to offer a Printer Friendly version of your web content when it is likely that viewers of the content will want a printed copy. There are lots of reasons why this is a good idea, for example:

There are two options that a web developer has for providing printer friendly versions of a page.

  1. Create a separate web page that users open and print. The display is customised for printing.
  2. Use CSS on the main web page to have a different print view of the page to what is displayed on screen.

Option A - Separate Web Page

Whether your web pages are html, php, asp, cfm or whatever, it doesn't matter - the technique is still the same. You create a new web page and ensure that this page only contains the content from the original page that would be wanted in a print version. No menus, no banners, no (or minimal) images and so on. You should also give serious consideration to making the page colour-free to help ensure that your users don't unintentionally waste valuable ink.

The new page is then provided via a link on the original page and the best usage in my opinion is to open this in a pop-up either via the "target='new'" attribute in the <a> html tag, or via "window.open" in javascript. Don't worry - pop-up blockers shouldn't block this since it is a direct user action that opens the pop-up.

Pros

Cons

Option B - CSS method

By setting the "media" attribute of the style tag (or with the stylesheet link tag) to "print", the stylesheet content is applied to the web page only when it is printed. For example, if you have your menu wrapped in a div, simply set "display: none" on that div's id in the print style sheet to ensure it doesn't make it to the hard copy. Prefer a serif font for printouts? - again this is very easy - "body {font-family: georgia}" will do the trick.

Just how easy this is to implement depends on the original design of the web page. Many modern web pages are being constructed in a "table-less" way. This means that divs are used to manage page layout and all content is properly included within block tags such as <p>, <h1>, <blockquote> and so on. It is relatively easy to create print stylesheets for such pages. On the other hand, web pages created from a "table-based" layout will require more work.

Pros

Cons

Conclusion

There is no universal right or wrong way to implement a printer friendly version of a web page. Don't listen to "old skool/new skool" arguments! It really comes down to how the original web page was implemented and the how much work each of the above approaches would involve.



Print this page Print this page