When most people think web pages they think “on screen.” I’ll admit, I’m the exact same way. I rarely think of taking a web page off screen and onto paper. On a recent project 26AM completed for a California State Government agency, we learned that portability not only to mobile devices but to paper is an important criteria.
It’s been a long time since I printed a web page (partially because I’m cheap and don’t like changing ink jet cartridges). However, printing a page doesn’t have to be a pain if the designer took a little extra time and made a “print.css” stylesheet. Print.css when applied correctly can make a web page easy to read and ink efficient.
Let’s take for instance the 26AM blog which you’re reading right now. We’ve created a print.css file that does the following:
- Changes the background to white
- Uses Arial, Helvetica, Sans-Serif fonts
- Removes all menus, the search bar, sidebar, header images
- Adds print friendly titles and headers
- Adds copyright information and the date/time stamp.
The first step is instructing the browser to use Print.css when a person chooses to print the document. We added the following line to our HEAD tag.
<link rel="stylesheet" href="http://www.26am.com/wp-content/themes/26AM/print.css" type="text/css" media="print" />
Of course for your purposes, you’ll want to set the HREF to your newly created print.css file. The second step is filling in the Print.css file. Ours looks like this:
/* 26AM Print Styles */ @media print { body { font-family: arial; font-size: 11pt; } #header { display: none; } a, a:visited, a:active { color: #09C; } #printheader { display: block; background: #29ABE2; padding: 10px; margin: 1em 0 1em; } #printfooter { font-size: 10pt; color: #666; border-top: 1px solid gray; margin: 2em 0 0; padding: 1em 0; } .breadcrumb { font-size: 9pt; margin: 0 0 1em; } img.authoravatar { display: none; } a.stbutton, h2.pagetitle, p.postmetadata, .respond, #respond, #sidebar, #footer { display: none; } }
You’ll see that the majority of what we’ve done is hide things. You’ll also see that we are revealing things as well. We’ve hidden all the unnecessary information that we mentioned above, but then we revealed the printer friendly formatted information such as date and time stamp. Hope this has helped. If you’re working on a project for a client or for yourself, having a printer friendly version of the website can really show your attention to detail and care for the end user. Leave us a note and let us know if this has helped you.