Guide to a Print Friendly Website

Ever run across a good arti­cle on a web­site, but you were about to punch the time­card, or head away from the com­puter? What do you usu­ally do, you can drag it to your over­low­ing book­mark bar where you will undoubtably for­get about it for a few weeks. Maybe you post it to your del.icio.us account instead, or some other book­mark­ing site, where again you usu­ally for­get about it. I find it's help­ful to just hit command+p (ctrl+p for the PC user) and nor­mally get just an awfully layed out print of the page, and nor­mally it has some con­tent cut off, well that was use­less and not very green to waste the paper and ink right?

After a week of find­ing arti­cles and not being able to get a decent print I aimed to fix it for our site, and then write about how oth­ers could do the same. If your a designer and your get­ting a lot of traf­fic it stands to rea­son that some­one may at some point print out your arti­cle for later reading.

Step one: You can do this a few ways, the sim­plest may be mak­ing a copy of your style.css (in some cases the name may dif­fer of course) and name that file print.css. Then fire up your favorite text or CSS edi­tor and get to work on hid­ing your ele­ments that have no need to print. (nav­i­ga­tion, head­ers, back­grounds, etc. can usu­ally get tossed out for this stylesheet) using a sim­ple dis­play: none; is nor­mally quite effective.

Step two: Start to choose the selec­tors you want to hide for the print view, nor­mally I set up, jot them down or directly edit the file. You'll end up cut­ting out the dead weight before you fin­ish your edits. A very sim­ple demo below is an exam­ple of how to hide every­thing but the arti­cle for this site.

Put this line into your page head so that the browser will know to grab this stylesheet for print­ing. The main dif­fer­ence between this and main stylesheet is the media portion.