Printer CSS - call to action

Ned Batchelder is a tech blogger I like to read, although he tends to deal with languages and situations I don't. Nevertheless he comes up with some great insights that have applicability to what I do and some great topics that extend what I know.

In a recent post, he brought to his readers' attention that good websites should have a proper printer CSS stylesheet, so that their content not only gets rendered well on the screen, but also on paper. Paper being paper, there's no point in rendering lists of links like sidebars and navigation areas. People, when they print, just want the content.

Now, my old website had a print CSS file, but I'd neglected to provide one for this new blog. Not any more though, I've added one — so it's too late for you to see what it was like printing a page from this site.

It wasn't too difficult. Unlike Ned who started with a blank slate and put stuff in, I essentially started off with the screen CSS and started chopping stuff out. As Ned recommends, mark the content you don't want to print with a display:none style. That got rid of the sidebars and the navigation bar, and I deleted all of the rules for the elements in them. It's a little rude to have backgrounds when printing, so I just got rid of all the cd:background styles. I had to change the font colors, obviously (some of the screen ones are very close to white, since they're output on a dark background). I then got rid of the floats, pretty much, and formatted the margins and padding to give a nice printed look. I made all links the same color as the text that surrounds them — since they're not clickable, it doesn't make sense to draw attention to them.

I then added the print CSS link tag to Graffiti's main layout.view file:

$macros.Style("print.css","print")  

This command retrieves the CSS file for the current theme folder.

Take a quick peek by going to my main page and selecting Print Preview in your browser. Now go to your blog and do the same. Remember, a good print experience is just as important as the screen experience: it tells your readers you take pride in what you do and say.

  Loading links to posts on similar topics...