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