I get FOUC (flash of unstyled content) on this page (am going through citrix metaframe) winxp prof IE 6. Actually FOUC is a bit of a misdescription, if i go to the printerfriendly version first and then come back I see the page in all its glory. :-)

Saying that I would use alternate instead of device-driven stylesheets was actually incorrect.

What I do is to combine the two. The printer-friendly version is just another version, written with the printer in mind, but this doesn’t exclude that I’m putting a similar control that allows to switch between any of the (possibly more than one) other style sheets.

In fact, I also use the media print stylesheet to do some final cleaning before the page is printed.

I might be accused of tricking the visitor into believing that the switcher is printed as well, but I don’t think that he will be disappointed by its absence…

After all, the objective is to allow the user to choose between a layout designed for the printer and the ‘default’ layout of the page, and that is something the style switcher does fine.

However, you have a point with the broken “back” functionality. I hadn’t thought yet of the possibility that the visitor might try to use the back button to perform the switch. He might be a bit surprised by the behaviour.

I could of course add a line of text at the top of the printer-friendly page to tell users what exactly will be printed and how to return to the other layout, if I find that this behaviour gets really disturbing, but for the time being I’ll rather put my money on their learning ability and hope this will not become necessary.

In the case of my database-driven website, anyway, the advantage of not having to regenerate sometimes rather complex contexts very much overweighs the disadvantage.

With slight style changes such as different header image or font size, user is still in control, because he knows where he clicked to activate the styleswitch and he can easily switch back. Printer friendly version should not have switch back link, otherwise it loses it’s purpose—displaying the main content only. If user come to printer friendly page from which he cannot get off, that’s simply not usable solution.

By using alternate instead of device-selected stylesheets I’ll let the visitor choose which version he wants to print, without having to send a new request to the server and without the need for server-side scripts.

I recently had to pull a print stylesheet because the client was printing clean printable pages and complaining that all the “swishy” layout had disappeared.

The tactics employed need to depend on the target viewer, but in a corporate situation it seems to me that most people will expect a ’screen-dump’-style printout.

The key (and what makes this method so cunning…) is not only to give people the choice of print formats, but to present the option as a usability feature. Every client loves usability, whether they know it or not.

I’ll use this one.

No heart feelings : )

“Well, we all have our ways to serve every visitor we can get… ”

Exactly, and if you like it this way, you’re free to use it. If don’t, at least let other people decide for themselves.

And what seems to be logical to you, doesn’t have to make sense for someone else. That’s interesting part after all when talking about usability—there’s no just one absolute solution to a problem and it all might depend on the situation.

One page, two stylesheets

That does not sound quite like

This article only explains how to make a printer friendly version of the web page.

As I see it it sounds like this: how to serve the same non cacheable page with all extra markup which won’t be used at all for the second time.
That’s twice the bandwidth - for you and for your visitor.
And really - what is an advantage compared to good old media=”print”? Result is the same at the price of doubled traffic and waiting time.
Well, we all have our ways to serve every visitor we can get… Just trying to server every we can easily hurt the wast majority.
Over and out.

“One visitor may want to print ad from the page. One thousand ohters want only content. I choose 1000.”

I must say i choose every visitor i can get. Can’t help myself…

If you are going to server something different for the print request - serve different HTML (and CSS), not CSS only. Why? Because serving print CSS on separate request defeats print CSS as such.

Scenario A: you have HTML code with two css
files linked : one fomr media=”screen”, another for media=”print”. If someone decides to print it is available ant instance, no extra requests to server. Even more, CSS are cached so…

Scenario B: you serve same HTML, but request another CSS from server. What you get - you double bandwidth consumption for the HTML itself - adding ?q=print will force rerequest the same page again. Some browsers and proxy servers won’t cache such requests. You end up always downloading same html code again and again, and this will be the code with some content which is never printed - hidden in print CSS. What’s the point?

My suggestion - do not complicate simple things.
Proper print CSS linked via media=”print” is all you need.

Thank you for the resource. Here’s what it would look like with just plain old SSI (Apache server):

<!--#if expr="$QUERY_STRING = 'q=printme'" -->
<link rel="stylesheet" type="text/css" href="print.css" />
<!--#else -->
<link rel="stylesheet" type="text/css" href="default.css" />
<!--#endif -->

And of course your should rename your file’s extension to .shtml instead .html to make SSI work. Read more about SSI techniques.

See an example here:
Northwestern Observer article
Northwestern Observer article (printable)

It uses an SSI check of the URL parameters. If there is “printable” as a parameter, it includes a print stylesheet, which in turn hides every element in the source marked with class=print-hide (or specifically called out in the print stylesheet, like the nav).

<?php if (isset($_GET['q']) && $_GET['q'] == ‘printme’) { ?>
<link rel=”stylesheet” type=”text/css” href=”print.css” />
<?php } else { ?>
<link rel=”stylesheet” type=”text/css” href=”default.css” />
<?php } ?>

And for the tip in the article, I will likely use it on my upcoming weblog :)

And by-the-way, i’m a little-bit late, but Happy Birthday, old buddy!