Subscribe:   Posts   |   Email   |   Facebook   |   Twitter

Internet Marketing and Web Development in Higher Education and other tidbits…

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

02 Nov 2009

written by Nick DeNardis

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.

print edu Dont lose your identity   Create an effective print style sheet

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.

print edu good Dont lose your identity   Create an effective print style sheet

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. http://printfancy.com/ – “showcases and honors websites and companies that take the extra step to maintain their brand across all areas”

The content of this post is licensed: ©2009 All Rights Reserved


About the author

Nick DeNardis

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

This post was written by - who has written 31 posts on .eduGuru


  • http://printFancy.com Prince Fancy aka Antoine Butler

    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.

  • http://steinhardt.nyu.edu/ Jim

    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) "] “; }

Proud Member of BlogHighEd University Web Developers eduStyle

© .eduGuru - Internet Marketing and Web Development in Higher Education and other tidbits…. Powered by Wordpress. | Advertiser policy