Guide to a Print Friendly Website

Ever run across a good article on a website, but you were about to punch the timecard, or head away from the computer? What do you usually do, you can drag it to your overlowing bookmark bar where you will undoubtably forget about it for a few weeks. Maybe you post it to your del.icio.us account instead, or some other bookmarking site, where again you usually forget about it. I find it’s helpful to just hit command+p (ctrl+p for the PC user) and normally get just an awfully layed out print of the page, and normally it has some content cut off, well that was useless and not very green to waste the paper and ink right?

After a week of finding articles and not being able to get a decent print I aimed to fix it for our site, and then write about how others could do the same. If your a designer and your getting a lot of traffic it stands to reason that someone may at some point print out your article for later reading.

Step one: You can do this a few ways, the simplest may be making a copy of your style.css (in some cases the name may differ of course) and name that file print.css. Then fire up your favorite text or CSS editor and get to work on hiding your elements that have no need to print. (navigation, headers, backgrounds, etc. can usually get tossed out for this stylesheet) using a simple display: none; is normally quite effective.

Step two: Start to choose the selectors you want to hide for the print view, normally I set up, jot them down or directly edit the file. You’ll end up cutting out the dead weight before you finish your edits. A very simple demo below is an example of how to hide everything but the article for this site.

Put this line into your page head so that the browser will know to grab this stylesheet for printing. The main difference between this and main stylesheet is the media portion.