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:


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.

Now playing:
Thin Lizzy - Dancing in the Moonlight (It's Caught Me in Its Spotlight)
(from Wild One: The Very Best of Thin Lizzy (1 of 2))

Loading similar posts...   Loading links to posts on similar topics...

No Responses

Feel free to add a comment...

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response