Print style sheets: 4 good examples and how they could be great

Posted July 19th, 2012 by Stewart Foss

I noticed on Twitter a tweet from Adrian Roselli:

I’m glad he brought it up. Honestly, in developing the list of nominees, we don’t evaluate the print style sheets. Maybe we should. Having either  no print style sheet or a bad one can be a real source of frustration for our users. As Adrian points out on his blog, print styles have been around for over a decade, so there really isn’t much of an excuse for not getting this right. In my presentation on responsive design at the Higher Ed Experts Responsive Web Design Summit, I pointed out that print style sheets are likely the first experience that most of us have had with the principles that make up responsive design. I remember my discovery of print styles almost 10 years ago, I spent hours trying to get things to print out just right.

So we thought it would be a worthwhile exercise to look a few of the print styles from the list of nominees for this year’s awards and dig into what is working and what could use some work.

Princeton – Your Path to Princeton

Your Path to Princeton is nominated for Best Prospective Student or Admission Site. With all of the sites we looked at, we looked for a good example of a page that you might actually want to print for our evaluation. In this case we chose the Learning at Princeton page. The first thing we notice on the print page is that the entire navigation is included. I can’t really think of any case where you would want this to happen. The side effect of this is that the content of the page gets pushed down half a page (that’s gonna kill some trees). Once you get to the content though, it is great. They include the font styles, so the headings maintain their color and font and the paragraphs have nice spacing. Our suggestion:

#section-header, #region-sidebar-first { display: none; }

University of Nebraska-Lincoln

The University of Nebraska-Lincoln is nominated for the Best Overall Website. For UNL we looked at their About the University page. It is pretty good. It includes a nice letterhead and the font and color styles from the web version of the page. The links revert to default font colors, which is ok but considering they are not clickable once printed, not exactly necessary. I’d suggest either switching the link colors to match the paragraph font colors or  using a little CSS to append the link urls, so that they make sense to include in the printed page. Our suggestion:

a:link, a:visited, a:active, a:hover { color: #000; text-decoration: none; }
a:link:after, a:visited:after { content:” [link: " attr(href) "] “; }

 The Open Medical Device Research Library

OMDRL is nominated for both Best Research Site and Best Responsive Site, and was actually one highlighted on Print Shame. We looked at their About page. I think Print Shame was a little hard on this one, I think it is a pretty good example of a print style sheet. Maybe they were expecting more because the site is responsive, I don’t know. The only real complaint I have with this one is the large white space at the top of the print page. It takes up roughly 1/4 of the page and offers nothing. This is where you might expect to find a nice header that many of the other sites include. The thing is, they have included the logo. The reason it doesn’t show up that most browsers disable background images when printing. One quick code change and this is a nearly perfect print style. Our suggestion:

#logo { content:url(/images/logo_omdrl.png?1322691341); }

University of Notre Dame

The University of Notre Dame is nominated for Best Overall Website, Best Use of Photography and Best Responsive Site. For this site we looked at the Leadership page in the About section. This is the 1/5 from the list that Print Shame compiled that did have an adequate style sheet and I honestly think this comes as near to perfect as can be expected from a print style sheet. The design includes a nice letterhead, styles that match the web version and they have appended link urls to all of the links in the page. The only really picky thing that we could find is that some of the links are relative and to a non-technical person this might not be clearly a link. So maybe better idenitifying the links would help. Our suggestion:

a:link:after, a:visited:after { content:” [link: " attr(href) "] “; }

Last thoughts

I’m glad that Adrian raised the issue of print style sheets. They take a little extra time, but can save our users from some real frustration. Have you spent some extra time to develop a nice print style sheet? Have you identified any best practices when developing print styles? We’d love hear your thoughts and see some more good examples in the comments.


Bookmark and Share

About the Author

Stewart Foss

View Stewart Foss's profile

Other posts by Stewart Foss