Neal Grosskopf Dot Com A NG Designs Site

Recent Articles:

• Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
• Tracking Internal Website Campaigns With Google Analytics and PHP
• Everything You Need to Know About jQuery's .data() Method
• Google vs. China: How It Will Affect Web Workers
• Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

Mar 08

Have you ever printed a website only to find out the page prints exactly how it appears on your screen? While this is nice if your intentions were to print a screenshot of the webpage, it's impractical and wasteful to print the entire page as is.

Why is not Using Print Stylesheets Wasteful?

The first reason it is wasteful is you are probably printing areas of your website template that are not actually part of your content area. Examples of these areas might be you header, navigation, footer, search box etc. With all these extra non-useful areas of your template printing every time a visitor prints your website, over time it all adds up as extremely wasteful. It's wasteful because it requires the end user's printer to print more than needed. It's also wasteful because it often adds an extra page or two to your total pages required to print. If every print job on your site is adding an extra sheet or two of paper, over the course of a year you are probably wasting a lot of paper and killing a lot of trees, especially if you have a highly trafficked website.

My theory is if somebody wants to print a literal screenshot of your website they should create a screenshot using either print screen or the utility of their choice. Firefox offers an excellent screenshot addon called Screengrab! which is very flexible in what you want to grab. Windows 7 will also come with a screenshot utility which PC users can use. (And yes, Mac users we know you already have this, you can lower your hand now).

So we've already identified that by not using print stylesheets you could be wasting an extra sheet of paper for every print job or ink that never needed to be used, what can you do to help?

Using CSS Print Stylesheets to 'Go Green'

I hate the marketing buzzword 'green' probably more than anybody I know. It's too often just a gimmick a company is using in order for them to save money. Few companies care about the environment, but all companies care about making money (that is the purpose of a company after all), and if they can save money and inadvertently help the environment, they're all of a sudden 'going green'.

First let's remove some useless DIVs from our template to save on ink and paper:

#header, #nav, #footer { display: none; }

Reduce Your Line-Height

We can also shorten the length of our print job by reducing the line-height we use. I often use a line-height of 2.25em x 12px which is basically double spaced for my screen stylesheet. We could reduce this to 1em to cut down on the amount of paper needed to print our website:

#content { line-height: 1em; }

Hide Advertisements & Other Useless Graphics

Another thing you might consider if it's an option is to hide any images or advertisements via CSS. User won't care to see ads on their print outs and you probably didn't promise your advertiser that the ad needed to carry through on print outs either. Also if you can get away with hiding images in the content area, I'd recommend doing this as well.

img, #ads { display: none; }

Go Grayscale With Black Font Colors

I also like to remove color from all my font when printing. This may not be a green practice but it will probably save people money over a long period of time by removing the need to use color ink to print with. You won't be able to get around this when it comes to color images but you could turn all your font styling to black.

#content * { color: #000000; }

Maximize Your Print Area

Another thing to consider is your main #content DIV. Usually this will be set to some sort of dimension in pixels by default. I've found that fixed width pixels doesn't translate well into print so let's set our #content DIV to a width of 100%.

#content { width: 100%; }

Putting it all Together

@media print { #header, #nav, #footer, #ads, img { display: none; } #content { line-height: 1em; width: 100%; } #content * { color: #000000; } }

Conclusion

I think print stylesheets should be used on every website, whether you care go green or not. It will help your end users save money on printing costs and will also give you users a more useful printout.

Feel free to add any ideas you have on improving print stylesheets in regards to going green in my comments below...