CSS, printing and user expectation

9 July 2004

23 comments

A Blue Perspective: CSS, printing and user expectation

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.

Categories

, ,

Comments

  1. 1/23

    Rob Mientjes commented on 9 July 2004 @ 02:45

    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. 2/23

    Mike P. commented on 9 July 2004 @ 03:21

    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. 3/23

    Sean Foy commented on 9 July 2004 @ 04:29

    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. 4/23

    Douglas Bowman commented on 9 July 2004 @ 04:31

    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. 5/23

    Lee commented on 9 July 2004 @ 07:11

    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. 6/23

    Luke Moulton commented on 9 July 2004 @ 08:30

    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. 7/23

    Hemebond commented on 9 July 2004 @ 09:18

    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. 8/23

    Trevor Morris commented on 9 July 2004 @ 10:59

    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. 9/23

    The Man in Blue commented on 9 July 2004 @ 14:46

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

  10. 10/23

    Dave Child commented on 9 July 2004 @ 20:26

    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. 11/23

    Rob Mientjes commented on 9 July 2004 @ 20:39

    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. 12/23

    Jeff Minard commented on 9 July 2004 @ 22:30

    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. 13/23

    Jeff Minard commented on 9 July 2004 @ 22:30

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

  14. 14/23

    Rimantas commented on 11 July 2004 @ 04:22

    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. 15/23

    seth commented on 12 July 2004 @ 08:47

    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. 16/23

    Phil Thompson commented on 13 July 2004 @ 00:38

    "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. 17/23

    seth commented on 13 July 2004 @ 03:59

    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. 18/23

    Bryan commented on 16 July 2004 @ 05:01

    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. 19/23

    Chris Hunt commented on 21 July 2004 @ 02:37

    "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. 20/23

    Tim Hill commented on 21 July 2004 @ 09:57

    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. 21/23

    Karen Coombs commented on 25 July 2004 @ 02:21

    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. 22/23

    Chris Messina commented on 3 September 2004 @ 19:31

    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/23

    Peter Odding commented on 15 March 2005 @ 08:30

    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".

  24. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed