Page style:

A Blue Perspective: CSS, printing and user expectation

CSS, printing and user expectation
9 July 2004

While recently working on a large web site that contained a lot of written articles, I had cause to think about the use of print stylesheets. Eric Meyer told us about the joys of print stylesheets using the media="print" attribute, so I thought I'd have a look at implementing a separate print version using this method.

Traditionally, table-based web sites don't print too well, and when they do you end up with the flotsam necessary on a web site but often undesirable when you just want a quick printout. Thus arose the "print friendly" page. Most news portals sport one nowadays: CNN, news.com, even the Standards-spiffy Wired; if not because of a definite need for a different version of the page, then because it has become a convention on such sites. In his article, Eric points to print stylesheets as a valuable solution that renders paper amicable pages unnecessary, but I've come to think that those pages aren't as unnecessary as they seem, and that print stylesheets have some problems of their own.

Common practice with the usage of print stylesheets is to remove anything except the content – menus, ads, buttons and backgrounds. But what if you want to print those? What if the whole reason for printing out the page was to capture that ad? ... that I love the layout so much I want to frame it? A print stylesheet presumes to know exactly what it is that you want to print, yet the web page presents us with a host of ancillary information that we might also want to capture. The only way I can circumvent the print stylesheet is to hack it out – mess with the source and remove the stylesheet link.

The second problem that I see with print stylesheets is that they defy user expectations. When I print something that's on my monitor, I expect to go to the printer and see what was on my monitor. I don't expect to see a page of text in Times New Roman with a logo at the top. At no stage in the normal course of printing are you presented with what will actually get printed out. (Unless you print preview, which I doubt many people are in the habit of doing. I know I'm not.)

This isn't to say that having a different style for the print version is bad, just that implementing it using media="print" isn't the best solution. Users should be aware of what they're printing. Whether this is through an entirely separate page (made easy by changing the stylesheet) or through some JavaScript and some stylesheet switching, it doesn't matter – by having an explicit "print friendly" option, you give the user a better experience. And that's always a good thing.

Comments

1/23. 9 July 2004 @ 02:45, Rob Mientjes wrote:

Nice point. I'm thinking of building a stylesheet switcher in all of my sites just so people can have a printer-friendly version of the site. That looks ideally to me.

2/23. 9 July 2004 @ 03:21, Mike P. wrote:

We just weirded out one of our clients (who use their site about as much as their clients) by doing the 'print style sheet' magic trick.

It took some convincing to leave it as is, but there's a good chance that we'll be building a separate print version for their next redesign.

Holy crap, where's the post button ;-] ?

3/23. 9 July 2004 @ 04:29, Sean Foy wrote:

This sounds more like a shortcoming of the browser than a problem with CSS. Your point about asserting too much control is well-taken, but if we use CSS to convey presentational hints rather than absolute rules then I don't think there is much of a problem.

It really does make sense to alter some property values on the basis of the media. Generally speaking, it may be that a sans-serif font is easier to read in print while a serif font is easier to read on screen. Perhaps the color scheme should vary because of the difference between additive color on a monitor and subtractive color in ink.

Sometimes we want a very literal paper rendition of what we're seeing on the screen. In that case, the browser ought to let us select an alternate stylesheet or a user stylesheet that overrides the print media rules designed for the more common case.

Just as a user with color-defiicient vision might employ a user stylesheet to override designer's suggestions, so should the cascade mechanism allow users to choose between a faithful translation and an adapation that reflects the different design forces at work in the new medium.

4/23. 9 July 2004 @ 04:31, Douglas Bowman wrote:

Good points Cameron.

On most news sites, users expect to see a print button. We kept it on Wired News -- but we changed how it works. Instead of merely executing your browser's print function, we present you on screen with how the story page will look (after clicking our print button) when printed out. We did this simply by temporarily displaying the page with the default screen media style sheet removed -- and with the print style sheet set to media="screen, print".

I think Aaron (the engineer responsible for wrangling Vignette for the redesign) actually did a few things on the server side too. But the gist is that we made a psuedo-print preview available by showing you on screen (roughly) what the page looks like with the print style sheet applied.

Maybe a few things could be done to improve the user experience (and expectations) now that we know more. But we were treading new ground at the time. No one else was treating print style sheets in this way.

5/23. 9 July 2004 @ 07:11, Lee wrote:

It's a good point, personally I like print style sheets because I know that I'm never going to want the navbar printed out, and if I do, Print Screen will serve the purpose fine, but I do see your point and a 'printable version' button does allow the user to know what they're getting, I may change my site yet!

6/23. 9 July 2004 @ 08:30, Luke Moulton wrote:

We try to implement a print stylesheet on every site we build (budget and time permitting) and more often than not, the client is pleasantly surprised when they go to print a page and find that it's preformatted.

Primarily, why do people print pages? 90% of the time it's so they can read them or keep a hardcopy of usefull article. This being the case, it's appropriate that pages be refomatted for print.

I can see your point though Cameron, perhaps users should know what to expect when they hit the print button.

7/23. 9 July 2004 @ 09:18, Hemebond wrote:

I love print stylesheet. I really hate it when I have to hack something together to get a reasonable print. I've actually installed the Firefox 'Nuke Anything' extension for this very reason.

The only reason for print views, is for articles that are split over more than one page. Even then, some display trickery could get around this.

BTW, why does your site default to 0.8em? I have specified 13px for my font-size, which means your site is unreadable without sizing the text up.

8/23. 9 July 2004 @ 10:59, Trevor Morris wrote:

I was just about to comment about a link to a printer-friendly page, until you covered it right at the end. A link to a "printer-friendly" page is a good idea as the user is therefore presented with a print preview.

My comment is, if you want to capture the screen as I see it, that is to "print the screen", I'd do just that... press the print screen button. Open up a graphics package or in Windows XP, view the image and press print.

Is this too technical for some people?

9/23. 9 July 2004 @ 14:46, The Man in Blue wrote:

From watching my parents use a computer ... yeah, it's too technical :o]

10/23. 9 July 2004 @ 20:26, Dave Child wrote:

Whenever I see a site with a seperate page for a print-friendly version these days it makes me think that a huge opportunity has been wasted. They are easy to add in, and well worth the effort.

Personally, I usually advise the user to preview a page. It's also pretty easy to implement a style sheet switcher to allow the user to actually feel like they're clicking through to a separate page...

11/23. 9 July 2004 @ 20:39, Rob Mientjes wrote:

Dave Child: "It's also pretty easy to implement a style sheet switcher to allow the user to actually feel like they're clicking through to a separate page..."

Exactly my point. The user must feel like 'ooh, so this is what I'm going to get' and that's the real issue. Users are the most important part of a website after all.

12/23. 9 July 2004 @ 22:30, Jeff Minard wrote:

I see the point, and I agree - you <strong>might</strong> want that ad, or that layout <strong>could be</strong> particularily compelling, but <em>back in reality land</em>, that's not what I think most people want when the print a page.

However, I do support the idea of swicthing the print sheet "on" with the "print page" button. A simple and nice way of showing what they will get.

http://widget.eleganthack.com/node/view/420

Of course, that's fun too ^.^

13/23. 9 July 2004 @ 22:30, Jeff Minard wrote:

Doh, perhaps I should read next time: "All HTML tags will be escaped."..... my bad

14/23. 11 July 2004 @ 04:22, Rimantas wrote:

Well, it is not so simple. At one hand users printing "regular" page are never aware what they will get - usually it is something broken, split horizontally or croped off.

Also, I have herd _very_ positive feedback on
media="print" version from users. They were just happy to get what they needed on paper.
All that without any fiddlint around, switching something, previewing something etc. I need this info - I print this info - I get this info, and only that, no navigation etc. which are mostly useless on paper.

15/23. 12 July 2004 @ 08:47, seth wrote:

Thanks, Cameron. Nice timing.

I've been working on a "printer-friendly" technique lately - http://www.sethgreen.net/Display_URLs_When_Printing/

I often have a hard time realizing that what I find useful isn't necessarily useful to everyone else.

While, I think most people will want just the content (sans design),. I also think it is a good idea to provide a "preview" page.

16/23. 13 July 2004 @ 00:38, Phil Thompson wrote:

"I also think it is a good idea to provide a "preview" page."
Is this not what print preview is for? Whereas I agree that maybe people will be confused when they get a print out that looks nothing like what they see on the screen, this confusion will be shortlived as more and more websites utilise the print stylesheet.

Honestly how often is it neccessary for anyone to print out anything other than the content. And if it is necessary we have the print screen button for that very need.

17/23. 13 July 2004 @ 03:59, seth wrote:

Yes, Phil, that is what print preview is for. IMO, that is like saying "why provide a font-size switcher? Isn't that what View -> Text Size (in IE) is for?" Sure, but consider the millions of people who probably don't even realize that feature exists.

It may not be as relevant on sites that are commonly visited by internet-savvy individuals but becomes more important on sites that are accessed by a more "general" audience.

Perhaps sites will begin to employ multiple print stylesheets to offer different things to different users. Some may want just the content, others may want to show someone a particular advertisement, or even have a hard-copy of a site's design.

In this scenario there may be a "print version" link which takes you to a specialized page that has it's own print-stylesheet switcher allowing a user to choose their print-style.

18/23. 16 July 2004 @ 05:01, Bryan wrote:

I actually just wrote an article recently on displaying High Quality logos with the print stylesheet. Feel free to take a look

<a href="http://www.juicedthoughts.com/archives/creating_great_looking_logos_for_your_print_stylesheet.cfm" target="_blank">High Quality Logos with your Print StyleSheet</a>

19/23. 21 July 2004 @ 02:37, Chris Hunt wrote:

"What if the whole reason for printing out the page was to capture that ad? ... that I love the layout so much I want to frame it?"

Is this really likely to be true for any but a tiny minority of users? The only people that seem _likely_ to want to do such a thing are web designers, and they should know how to work round any stylesheet issues.

It can be dangerous to assume that the way designers may want to interact with a site is the same way that joe public will want to. My guess is that 95% of people are only interested in the content that they print, and would welcome the removal of extraneous navbars etc. Let's make life easy for _them_ and rein in our desire to make it easier for _us_.

Mind you, I would be cautious about doing too much in a print stylesheet. Things like logos and choice of font are important elements in branding a site. Changing such things too radically in a print version could dissipate any build-up of brand identity.

20/23. 21 July 2004 @ 09:57, Tim Hill wrote:

I agree with Chris Hunt, I don't think that the average user to a website will be wanting to capture the layout, they are more likely to just want to view the content.
I guess it would depend on your target audience though...
Regarding print friendly buttons, I notice some people just click print from file menu, rather than click the print page link on a page. So maybe the print link on the page, could keep the formatting while just hitting print from the browser would perserve just the text?

21/23. 25 July 2004 @ 02:21, Karen Coombs wrote:

What I like about your posts is that they make me think about things in a different way. I agree that a users expectation when they print the page is that they will get what is on the screen. Furthermore, I still go to many sites that when you print the page various pieces of the page are cut off (typically, the right margin). So I expect this. I think that this expectation is a result of the fact that is how things on the web worked originally so it is what people are used to. Ego they expect it. That doesn't mean it is desirable and what users want. Truthfully, I think they want the content. Although sometimes this is not the case (you are a web designer who wants to print a site layout to show someone). I am not sure what the solution is to this. However, the idea of presenting users with what they will be getting when they print (auto-print preview) sounds good to me.

22/23. 3 September 2004 @ 19:31, Chris Messina wrote:

I think that this raises a very good point--and one that I've pondered in passing. I think Doug Bowman and the Wired folks have it right--but perhaps it's the labeling that we could improve... Instead of "Print this page" or "Print version", perhaps it would make more sense to imply the act of processing, as in: "Prepare for printing".

By clicking on the "prepare" link, you give the user an idea that some kind of processing will happen to the page to make it "print-ready", which could be as simple as turning off the screen styles with a script.

I think that the more inconsistency there is with what users get by pressing the print button, the more folks will be reluctant to print (which I suppose is a positive thing, in some ways!), which may mean that less people spend time reading/sharing your content. Thus if you provide a nicer intermediate, like "Prepare for printing", you're helping creating an expectation that something PRIOR to printing is going to ensue, at which point the user can happily press the print button on their browser and know what to expect!

23/23. 15 March 2005 @ 08:30, Peter Odding wrote:

Hehe, seems I'm a little late, however, I haven't come accross my point so I'll still give it a try.

First off all, I definitely agree that visitors should know what's going on. I make it a habit to include a small explanation of the print style, e.g. "This web site is optimized for printing. Choose File -> Print Preview to see what this page will look like when printed".

However, you're argument is that some people will expect/want the page to look the same on both screen and print.

But this is not realistic in the current popular browsers.

The screen/paper ratio is completely different, and I don't know a single soul that sets their Preferences to "Print backgrounds".

So in effect, pages almost never look the same when printed.

I opt for a Print Screen instruction. It's the only safe solution.

BTW. I personally like media="print" alot! I use it on all my sites, with of course the mention "This page is optimised for printing".

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.