Posts Tagged ‘stylesheet’

The importance of a print stylesheet

February 25th, 2009 by Bobby Whitman

Recently, we’ve had multiple requests for “print” links and printable versions of web sites. So, I started wondering, with widespread access including mobile, does anyone still print from web?

I posed the following question over twitter the other day: Does anyone actually print websites? If so, what types of sites and how often?

Some of the responses:

@Selicker: I print maps, instructions, and recipes

@noahwesley: I’ll rarely print a blog post/article to read later if I’m going to be bored and w/o laptop.

@fricto: My wife @owlpoo prints blog posts about cooking and knitting for the recipes/patterns quite a bit.

@beccarkt: yes! For competitive audits for clients and for articles, etc. Probably a couple times a week

So, YES. People still do print from web. They print stuff like, recipes, instructions, maps, long articles, and reports. Frequency seemed to vary-some as often as every few days, others very rarely-but the fact remains, web users still hit Control+P.

But even if not many users are printing from web anymore (which I have concluded is NOT the case), it is still really important to define a stylesheet for print.

It’s not that difficult to do, CSS makes it so easy for us to implement a print-only stylesheet. Sure it takes some more dev time to define layout styles that hide the fluff, ensure high contrast, and size things appropriately. But, that extra time makes your content and site much more accessible and usable.

Here are some dynamIt tips to writing that print stylsheet:

  • If you do not already know this here is how to specify the media type for a style sheet:
    <link type=”text/css” rel=”stylesheet” href=”print.css” media=”print” />
  • Remove things that don’t need to be seen when printed: navigation, features that do not pertain to the page’s primary content, ads (maybe?). The easiest way to do this is use display: none;
  • Make sure that your text-to-background contrast is high. This is essential for readability.
  • Do not bother making background images or colors print. People do not print from web for the design, they want content. (See above).
  • If you are building from a fixed-pixel width design, keep your printable content around 700 pixels wide or less.
  • Don’t forget to test it out by printing (and yes this means printing from IE6, IE7, FF2, FF3, Opera, Safari).