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

By Nick DeNardis - Mon, Nov 2, 2009-->

-->

General, Usability, Web development

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

Tweet
Share StumbleUpon It! Del.icio.us reddit

Like this post? Be sure you've subscribed to the .eduGuru RSS feed or email to get all the latest news and articles.


backgrounds, best practices, css, paper, print, style

Read Related Posts on .eduGuru:

  1. Speaking for the Trees…
  2. Need a Link Building Strategy? Create Content!
  3. Case Study: Email Still Beats out Print and Social Media for Engagement

This post was written by:

Nick DeNardis

Nick DeNardis - who has written 26 posts on .eduGuru

Nick is the Associate Director of Web Communications at Wayne State University by day. By night he hosts the video blog EDU Checkup where he reviews higher education web sites live. Nick is an active member of the higher education web community and is an officer of Refresh Detroit, a group of web professionals whose goal is to promote web standards, usability, and accessibility.

Nick DeNardis Nick's Facebook Nick's LinkedIn Bio Nick's Twitter Account Nick's Flickr Photos Nick's YouTube Profile Nick's Digg Profile Nick's Delicious Bookmarks Nick's StumbleUpon Nick's SlideShare Presentations Nick's Last.FM Music


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

  1. Avatar image
    Prince Fancy aka Antoine Butler 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.

    Reply

  2. Avatar image
    Jim 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) "] “; }

    Reply

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 Nick DeNardis 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) [...]

Leave a Reply

Spam protection by WP Captcha-Free