Printer Friendly Web Pages

By Steven on January 30, 2010

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

While I personally do print a great deal of web pages I do find myself from time to time running across an article that I want to to keep and a bookmark is something I do not want to use. Print is something that you can file away to ensure that the information is available to you at any point in time.

The one thing that drives me nuts is those sites that do not provide printer friendly versions of content or if they do it contains logos and other unnecessary images.

Ink is something that I do not want to waste just to have the printed media branded for the sake of branding.

Everyone has their own idea when it comes to this topic and while I tend to lean to 100% text when it comes to printer friendly pages there are exceptions to this rule. Just use common sense in this area and you will do fine. Take the following as good example of 100% text:

How To Implement Printer Friendly Pages

There are a number of ways you can do this and I will touch on two.

Cascading Style Sheets (CSS)
Third Party Sources

Cascading Style Sheets (CSS)

A print style sheet works basically in the same manner as the screen type with a slight difference which is to exclude the content that you do not want to be printed and setting the appropriate media type. Once you have your stylesheet in place all the remains is to reference this stylesheet in your web pages, for example:

<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” />

In this case the print.css may be represented by:


/* Remove unwanted elements */
#header, #nav, #sidebar
{
display: none;
}

/* Ensure the content spans the full width */
#container, #body, #content
{
width: 100%; margin: 0; float: none;
}

/* Improve color of links */
a:link, a:visited
{
color: #781351
}

As you see by employing CSS it is not difficult to give your readers a medium to print content without them have to spend their hard earned case on ink.

Third Party Sources

If you are like I am and do not want to reinvent the wheel there are a number of third party resources you can use to accomplish the same goal as CSS all without the additional overhead of doing the actual work. One of my absolute favorites is Instapaper which handles a number of mediums that include computer, paper, mobile devices, and the Kindle. While I am a heavy user of Instapaper there are others you may also find useful.

Conclusion

Printer friendly web pages in many cases is a must and if you have not implemented such a solution to enhance your readers experience then what are you waiting for? It is not a difficult nor a time consuming process and the payoff is worth its weight in gold.

What have you found works best for you? Do you employ CSS or is there a service that does the job for you? Please take a moment a share any resource that you are aware of so others may evaluate it to determine its merit.