Don’t lose your identity - Create an effective print style sheet

Making a Web site flexible is an art. Not only does your site have to look good cross browser on screen but also scale down gracefully for a mobile phone or print.

Looking at the example above, (I am not picking on Duke, I just choose them at random) most higher ed sites end up this way. Not accounting for the print style the spacing is all off, unnecessary items get printed and paper is wasted, usually the user get confused. There is a simple way to prevent this, setup a print style sheet.

How to make a separate print style

In HTML:

<link href="../print.css" rel="stylesheet" type="text/css" media="print" />

or in CSS:

@media print { ... }

What is important to keep on a printed page

  • Wordmark/Name
  • Department name
  • Page heading
  • Central content
  • Footer/URL
  • Department contact information

What is not as important to keep

  • Navigation
  • Images (other than content specific)
  • Colors
  • Keeping the same pixel perfect layout

Some basics about print style

Make the content 100% - Since you don’t know what size paper or how your users will be printing you pages it’s best to change everything to 100% width. This will us the maximum area possible and not leave blank sections on the paper.

Use a print friendly wordmark - Most university Web sites have their wordmark in the top left of every page. Sometimes the web version may not be appropriate for print so using an image replacement technique will yield the best results for the end user.

Get rid of anything unnecessary - display:none is your friend, use it for anything that isn’t directly related to the content of the page. Navigation, background images, promotion images

Include the URL and date - This one is not necessary but could be helpful especially for news items or anything that changes frequently. Although it is enabled by default having the URL, date and any other important information on the page may be helpful.

Compare the above example to the one at the top of this article. UNL has a completely different feel when printing. They take everything in account and tailor everything to the print medium. 100% width, friendly wordmark, removing the menu and focusing on the content.

Additional Resources

Although it is just starting I stumbled across a site dedicated to the print versions of Web pages. https://printfancy.com/ - “showcases and honors websites and companies that take the extra step to maintain their brand across all areas”

  • Print Different - Eric Meyer
  • CSS Design: Going to Print
  • Printing the Web: Solutions and Techniques

4 Responses to “Don’t lose your identity - Create an effective print style sheet”

  1. Says:

    Thanks for the mention and I definitely appreciate the “how to”. Although University of Nebraska-Lincoln has room for improvement, it’s the first educational institution I’ve stumbled across that actually prints fancy.

    Thanks.

  2. Says:

    Great post! We implemented a print style sheet and it has really helped in convincing people to stop using PDFs as much as they used to… Now that its easy to just print and go.

    One of the most useful CSS-for-print tricks that I know is using the :after css selector to append the URLs of any links, since there’s no way for users to actually click on a piece of paper. We use the following CSS:

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

Trackbacks/Pingbacks

  1. What are people sharing from your site? | HighEdWebTech --> says:

    [...] myself needing some information. If you haven’t yet set up a print style sheet, check out this post by Associate Director over at [...]

  2. links for 2009-11-05 « innovations in higher education --> says:

    [...] Don’t lose your identity – Create an effective print style sheet (tags: design webdesign printfriendly printstylesheet css) [...]