All Sites Should have Print Stylesheets!

Since I’m in the mood to complian about other sites, let’s talk about print stylesheets! I can’t believe how many sites just don’t have them. It’s not exactly difficult to do. Start a new CSS file, hide a few things, make some small adjustments, hook it up using @media rules and you’re golden. Right? I guess not because an unbelievable number of sites just don’t have them, even sites that should know better.

Then there’s the sites that insist on creating a completely separate version of the page and hiding it in a “print” link in some obscure location. Could we make this any more difficult? Come on. I don’t want to have to go looking for your print link, and I certainly don’t want to go faffing around with user stylesheets to make your site print properly. And then there are the sites that are using tables for layout so I can’t even do that! Do I really need to copy and paste a whole article into a word processor just to get it to print nicely?? That’s ridiculous.

Enough ranting, here’s a step-by-step process for writing print stylesheets:

1. Clean up the crap. Get rid of any sidebars, large footers, interactive parts or anything else that gets in the way. You basically want your main header for branding and the content. Maybe some contact information in the footer.
2. Adjust font size and spacing. I think absolute sizes are okay here. 10 or 12 pt is good for body text. Make sure line-height is nice and readable.
3. Check for any extra spaces or wide margins. I don’t like to waste paper and printer ink, and I don’t want my website visitors to either. Refine your print stylesheet so that your pages take up less paper (without compromising readability, of course!).
4. Add in the link href’s. This is just a personal preference, but it is kind of useless to see a link printed on paper without knowing where it goes. Use attribute selectors to display the link href after the link text, like so:

   #maincontent a:link:after {content: "("attr(href)")"; padding-left: 5px;} 

   (works only in smart browsers)

5. Test in all major browsers (hint: Print preview is your friend!)

That’s it. Five steps to a nicer print stylesheet. No go make one for your site (and I will take another look at mine too!).

Posted in Design, Usability Post a comment

Comments RSS