The Importance of a Print Stylesheet

I’m an avid recipe-hunter. When I get bored with our usual dinner routine, I hit the web for a new recipe I can try. And when I find one? I print it out. Yes, I’m a digital, save-the-trees type, but me in the kitchen with the iPad isn’t the best idea (think sticky fingers, hot liquids, raw meats, overly-vigorous mixing… [I’m not the neatest cook in the world]). I need my recipes on paper. So, I can’t tell you how grateful I am when the website owner has considered the print experience…. and how frustrated I am when they haven’t. 

What is a print stylesheet?

For those unaware, a quick lesson: the way a web designer or developer controls how a website looks is by writing code called a stylesheet — basically a document with a series of style rules that your browser understands and interprets. By default, web developers create a screen stylesheet, which controls how your website looks on a screen. And many will stop there. However, you can also create a print stylesheet that controls the style of your page when it is printed. (There are other media types that you can create stylesheets for: braille, projection, speech, and tv are some of them, but these aren’t as commonly used for a typical website.) 

Why have a print stylesheet?

Have you ever wanted to simply print out some information from a website and had any of the following situations happen?

• It printed out a haphazard hodgepodge of stuff you didn’t need (ads, long comment threads, large images, navigation links…); or
• It used up extra sheets that only had a tiny strip printed on it because the screen’s content extended across multiple sheets of paper; or
• You used up three gallons of ink printing a single page that had a black background and bright colorful images everywhere… 

Get my drift? Usually, when someone wants to print something for reference, they’re only interested in the content, the meat and potatoes, and they don’t need all the extra stuff that only serves to waste paper and guzzle precious printer toner. 

How do I get a print stylesheet?

It’s relatively easy for someone who knows HTML and CSS to set up a print stylesheet. If that’s not you, your web developer can handle it, either by creating and linking to a separate print stylesheet or using media queries in the existing stylesheet to modify rules for print. It is not the purpose of this article to get into the technical details, but there is no shortage of instruction out there if you’re interested in finding out!  

So the big question is, does YOUR website need a print stylesheet?

It depends on your site’s purpose and design. There are cases when it could actually be frustrating for users who want to print an exact screen shot of your website, only to find that when they print, it looks different than what they saw on their screen. So, you’ll have to consider your audience and the type of information you have on your site to determine what your printed web page should look like. Ultimately, you can’t predict every situation. However, I recommend that it be a considered aspect of user experience. You won’t necessarily have to change up your print view drastically, but a few simple tweaks to standardize print output, optimize page space, and minimize ink usage can really make a difference to your end user.

(By the way, you can see an example of a print stylesheet in action by printing from this very website! Go ahead: File > Print and check out your Print Preview.)