Today I was watching CNN’s Green Warriors program when they did a feature on an interesting piece of software called GreenPrint. The idea behind the software is that it can help reduce the waste caused by typical office or home printing, by automatically identifying pages with little or no text on them and flagging them not to be printed. The software conserves both ink and paper by allowing the user to select exactly what makes it to the printer. However what really caught my attention and had me thinking was the online demo of the software.
Printing from the Web
In the online demo, the GreenPrint software shows how a user can save toner by turning off the images on the page before it goes to the printer. This is undoubtedly a great feature for saving ink and paper, but it had me thinking about the responsibilities of web designers in this situation. With CSS based layouts came print style sheets, but how often do designers actually develop them? Unfortunately in my case it is far less than I would like, especially when you think about the ability to control the amount of waste generated from printing a website.
The Eco-friendliness of Print Style Sheets
Unfortunately print style sheets just tend to be overlooked in the scope of fast moving, tight deadline projects. The resulting unstyled print is wasteful and certainly not the best experience for the reader. With this in mind I think it is imperative that websites with a larger tendency to be printed such as blogs, online magazines, and digital newspapers carry an optimized print style sheet. Print designers have been considering the impact their projects have on the environment for years, direct marketers are qualifying their mailing lists, and catalogs are adopting better opt-out lists, why shouldn’t web designers think about the printed waste they are generating as well?
Tips for Getting Started
The following tips can help you get started reducing the printed waste of your websites.
Drop the navigation
Navigation serves little to no purpose on the printed page. On a typical site printing the unstyled list that forms the navigation can easily waste a whole page of paper or more.
Remove presentation based elements
These visual elements often just don’t fit the context of the printed sheet and end up wasting valuable space as a result. If it doesn’t help tell the story then it shouldn’t print.
Optimize your logo
While you may not want to remove your site’s logo from the printout, its size should be appropriate. You may even want to use the print style sheet to show a logo that has been optimized to print on a white sheet of paper.
Consider Advertising
Do your advertisements really need to print? Unless you have some sort of contractual obligation I would argue no.
Alternative Footers
The modern footer contains tons of information such as alternate navigation structures, search boxes, bios, or widgets. None of these elements need to print, instead consider printing just a simple copyright notice.
Considering the context of printed web content can help save both paper and ink. By determining which pieces of information benefit the user in the printed environment, we can eliminate any unnecessary information which benefits both the user experience and the environment. If you have any other tips to make printing website more eco-friendly please share them in the comments below.
November 24th, 2008 at 3:51 am
Nice article. I must say though that I have been doing this for the last few years on sites that I have built. A couple of techniques I have recently thought of to also add improvement to Print style sheets are:
1. Links in paragraphs of text. They stand out as the browser default links. Blue underline, for example. So my fix would be to set in the print css all links to colour black with an underline of none so that links will now look part of the paragraph of text.
2. Links that say “Find out more” or “Read more” These links are whats known as a call to action. Telling the user to click in order to find out further information. Totally redundant for a Print Style sheet so what I tend to have is either a default class in my print CSS thats called “doNotPrint” and I apply that to these kind of links that I don’t want to print or target the specific link in the css style sheet, which will/could increase the number of declarations in the print css but reduce the number of classes used in your mark up.
Hope that makes sense. :)
November 24th, 2008 at 4:19 am
Good idea’s, I’ve never used a print only stylesheet before but it seems like a good idea and really isn’t that much extra effort.
Might see what i can do in some free time
Good article!
November 24th, 2008 at 3:28 pm
Steve,
I just came up with pretty much the same idea as you today while working on a print style sheet for a client. I also added a class “noprint” to items within the content managed portion of the site that I didn’t want to print. Great tip, and thanks for sharing it…
November 26th, 2008 at 8:26 am
My best implementation so far has been:
1) using background images as primary decor - these don’t normally print
2) where images are actually in the xhtml code I use a span element with “noPrint” assigned as a class and additional text included as “printOnly” class if the image has is relevant to the printed page.
3) Also where text is likely to be printed out by the user (in a schedule, for example) I give them a “print page” link that evokes the print only style sheet. It only prints the company logo, copyright and contact information, and exactly the text they requested. The reason this works is the snippits of data on this website are .php includes files. Printing only what is requested is a breeze this way!