Post

When working at a university setting, many of the relatively minor aspects of web design come to the forefront due to legal accessibility requirements. One of the most prominent such requirement is for effective printing.

Many websites such as uxmag and A List Apart use print stylesheets that produce a bare-bones version which, though easy to read, can be confusing. One particularly good example of this confusion is found when printing the uxmag home page.

How confusing is that going to be to an average user? While the message suggests that not printing the home page was just a recommendation, it becomes obvious after a few minutes of scanning that it is impossible to print the home page content without resorting to a more primitive “Print Screen” or other obscure method.

Also, some research done by others at my workplace has suggested that a typical user expects to print out a replica of what they saw on screen, and such drastic transformations as those found on the previously mentioned websites are very disconcerting and often make the user think that they have printed out the wrong page.

What is the solution?

Until printing background images and colors becomes more common (or at least a more easily accessible setting instead of the currently obscure checkboxes placed eight levels deep into preference panes), the best way to preserve a website’s appearance during printing is to include hidden, print-only images and restructure the printed page to fit a paper’s restrictions. You can also modify other things to make the printed page easier to read; bumping up the font size or changing the body text to a serif typeface can have huge impacts on readability.

The advantages of this approach over the more drastic revisions is that it:

Maintains the website’s brand by allowing for the inclusion of logos, etc.

Preserves the website’s appearance and ensures that the printed product is recognizable.

Instantly doubles your perceived attractiveness by the opposite sex.

Let’s get started

First things first, since most browsers don’t print out background images or colors, make sure to force them off in your print stylesheet. I’m not usually a fan of “! important” rules that override the user’s defaults, but preparing a print stylesheet for no backgrounds and then printing with backgrounds can make a huge mess.

Another thing I do is create a “print” class which I can apply to any elements that I want to be hidden on screen but visible when printed. So just add a “display: none” rule in your screen media stylesheet and bring them back with a “display: block” or “display: inline” where necessary in the print stylesheet.

The next thing to do is decide what elements you need to preserve and what elements don’t make much sense to be printed. For example, you can usually forgo search and login boxes, and extraneous content modules. They’re not going to be used on a piece of paper and usually aren’t major contributors to a website’s distinct appearance. Knock these of with an opposite to the previously mentioned “print” class. Something like “screen” or “print_off” is usually understandable. Just add a “display: none” rule in your print stylesheet to get this working.

The addition of global and site-wide logos is next. I usually have these titles in headline elements to which I can then add the hidden “img” tag. Again, try to preserve the website’s brand as well as you can with these replacement images. For example, the UB Engineering Newsletter has a very unique header which helps show the mini-site’s relationship to the main Engineering website.

On Screen Header

Print Header

Next are the structural changes. While IE7’s printing capabilities have increased significantly, the still popular IE6 sucks major printed ass. One especially frustrating limitation is on the page width which, at the default margin settings, cannot exceed a slim 605 pixels at a penalty of having anything past that limit cut off entirely.

While this is annoying, it is usually not too hard to bring two-column layouts in line by simply shrinking each column until it fits. The real trouble comes with three-column layouts where shrinking each column would render them all almost unreadable and would break the layout on pages that include large images or other wide, fixed-width elements. A cool trick I’ve found is to drop the third column in after the first in the print stylesheet. By clearing the rightmost column and floating it to the left, you can actually condense a three-column layout into two and finally fit everything on the page.

Finally, it is important that your website’s structure not be lost. Like many, I use the faux columns to get the appearance of equal height floated columns. However, this means that your columns will have no distinct separators when printed. Adding a 1 pixel light grey border to your columns can make the page more readable and can also be used to call out items that were featured on screen.

Those are all the tips I have for now. Hopefully they will help make your site print more effectively. If you have any tips or suggestions, please leave a comment and I’ll be sure to add them to the article.

Nice article, enjoyed it!
I had one question/suggestion: If print-only elements are hidden in the screen stylesheet, do you think this will affect things such as screen-readers, or when a user views the page with no style?
My own opinion: I haven’t tried it, but I think it would be ok with images defined in the CSS code, but hidden text would cause confusion. (e.g. something like ‘This is the print version of example.org’ and being set to hidden on the screen stylesheet)

I have to say that I don’t agree with the article at all. In past experience, we have found that the user does not want to print what they see on the screen, but print the content. Why waste the ink to print images, useless navigation and things like that.

I am interested in the research that you were talking about. Is there a page where I can read the results of the research?

In most cases you don’t need to create a new ‘print’ class for stuff you want to suppress on paper – you probably already have a navbar class or adverts class which can be set to not display in the print stylesheet. In many cases an additional ‘print’ wrapper isn’t necessary and imposes additional work on the HTML which could be a major burden, depending on how your site is structured.

I agree with the poster Jamie in that most people actually want to strip all of that stuff out and keep the content….and as someone who has to manage a University computer lab, I wish that sites were always written so that you could just print the text. I generally make repeat offenders copy and paste into Word and then clean out what they don’t want.

On one hand I completely agree that you have to maintain branding on a printed document (I work at a design firm, so this is doubly important).

On the other, i’m completely against the idea of print/screen specific classes, it’s completely redundant when you have media specific style sheets.

As far as extra print only images go, we sometimes need to use a hidden print logo (that also acts as a non-css logo) when the design doesnt contain a print friendly logo, but avoid any others.

One final note, I believe there are some issues with floats and printing in firefox, and them not continuing on to a second page, this may muck up your columns, although i’m not sure if it’s still an issue.

Thanks for all the great feedback everyone. I understand that this approach is somewhat controversial, but I believe that it is in the users’ best interests.

sean:
You’re right, I actually didn’t make a print stylesheet for this website. Luckily, it degrades pretty well and is functional at least.

jeff and Kevin Burke:
That was a joke people. Sorry I may have offended you, but seriously…joke.

Hyperreality:
Good point, most text-to-speech applications (correctly, I believe) do not read elements with “display: none”, which causes some problems with a few image replacement techniques but actually works in our favor here.

Jamie Likely:
I’ll see if I can get a hold of the results. I wasn’t involved in the research at all, but everyone seemed convinced (and I agree, obviously), that the user would have a more fluid experience if there was at least an attempt to maintain the website’s visual style while printing.

Sean McManus:
Good point, although I don’t typically create a wrapper “print” division, it’s quite a bit cleaner to just add it as a class on the existing element.

John:
I understand. A happy medium might be to include a “Print this article” link where applicable and send the user to what would be printed similar to what was described in this article.

That way, the user could have a look at what they were going to print first and you could even have a regular print stylesheet to catch those who printed right from the menu.

David Singleton:
Adding the print classes are certainly not a requirement. You can instead list each element you want to show or hide directly. I just found that it does provide some semantic value and also makes it easier to quickly apply the rule and keeps the css clean.

I already use the “print” class, but had not thought of using it with specially prepared images. Nice one.

A word of caution – I have found floats are treated rather badly on printing. Floated images are likely to appear split across two pages, for example. I suggest doing as much as possible with a static layout. Then there’s the Firefox issue that David Singleton mentioned.

Another thing to avoid is justified text. This usually comes out as plain ugly. Oddly, given IE’s generally poor rendering engine, that browser’s proprietary “text-justify: newspaper;” does a tolerable job of justification. (!?)

An additional benefit to using a different logo for the print version is that you can use a larger graphic and then scale it down in the CSS. The image in the final printed document then looks better, as the printed image ends up being higher resolution.

How can remove Header and footer message through coding, usually it can be handled by print property which depends system to system, but i want set header as null or customized message for all systems.

About

The Blog

Hi there, I'm Tom Fadial (call me Thame) and this is erraticwisdom, a blog where I write about everything from philosophy, to web development and interface design.

The widgets in this sidebar will help you get to know me better, what I'm doing, seeing, listening to and playing. In the main well is the content, use the module at the bottom of the page to navigate through all articles.