Are your Printer Friendly links anything but?

1/19/2009 2:42:09 PM

As electronics manufacturers scramble to put web browsers on anything with a screen--PDAs, cell-phones, gaming systems, and now, thanks to Sony, digital cameras--web developers must become aware of how their websites appear on different platforms and deliver the appropriate layout.

However, it seems that many web developers and large companies that are moving to support handheld devices are largely ignoring advancements for the original alternative web layout, the printer-friendly page.

Currently, most developers accomplish printer-friendly pages with two different methods:
1. Rendering a printer-friendly layout that is technically a separate page
2. Defining an alternate stylesheet specifically for printing

The first choice is the original way, and is still the most prevalent on the web. These sites will have a “Print” link or button, which will open a separate page, usually with images and background images removed and a black-on-white font scheme. USAToday and The New York Times are both examples of this style of printer friendly (except for The New York Times’ homepage, which does use a printer-friendly stylesheet, even though it basically changes nothing).

The main problem with this approach is that it creates additional steps for the user and additional work for your programmers, which in turn lowers the usability of something that is supposed to be “friendly”. Adding in the extra click, along with more server-processing and loading time, to do something that should be as simple as Ctrl+P (and handled by the end user’s browser) is not acceptable anymore.

The second choice is the most user-friendly way to accomplish printer-friendly links, because to the user, there isn’t anything going on other than printing as usual. They go to File->Print, or type Ctrl+P, and the result is already formatted for printing.

The correct way to add a printer-friendly stylesheet is to define it as so:

<link href="yourStyleSheet.css" type="text/css" rel="stylesheet" media="print" />

The attribute “media” is what tells the browser in what context to use the stylesheet. The devices available for the “media” attribute is a growing list, but some of the current ones include “print”, “screen”, “handheld” and “aural”.

Obviously, “print” is for printing and “handheld” is for PDA-sized devices and mobile phones. For regular use, “screen” is what you’re looking for, and is also the default.

So you’ve decided to handle printer-friendly stylesheets correctly with stylesheets, but what makes a printer-friendly page user-friendly? Opinions will differ, but I personally think that a printer-friendly page should contain nothing but the unique content on that page.

In a standard web layout, you typically have a Header, Left or Right Column ( or both ), Content Area and Footer. So, right away you can start with the following:

#header, #left_column, #right_column, #footer { display:none; }

Now, whether or not to hide the Footer is a matter of preference. Some people want their Copyright or Address to be included. However, if all you have in the footer is bottom navigation, I would recommend hiding it during printing.

After that, get rid of all background colors and turn your text black.

* { background:none; color:#000; }

From there, you just have to remove the leftover stuff that you don’t need to print. At the bottom of this blog post, there are Social Media buttons to share this post with. These don’t matter for printing purposes, so I can hide them in the printer-friendly stylesheet. I also hide the Submit a Comment section for the same reason.

Although you will probably need to make some site-specific adjustments, this will get you about 90% of what you need in a printer-friendly page.

Note: Watch out for inline style declarations. You know, style=”color:blahblah”. These are a terrible habit anyway, so you might as well get rid of them. Stylesheets cascade, so the bottom-most declaration is the one that will stand, meaning once you define a style rule in the “style” attribute, you can’t overwrite it with a stylesheet. This is important if you’ve got an H1 title defined inline as pink text, and then print it out on a white background.

Posted by: Steve Dugas | Submit comment | Tell a friend

Categories: StyleSheets

Share and enjoy:

0 Comments

Submit a Comment

Name	Name is required before you submit.
E-mail	E-mail is not in the correct format.E-mail is required before you submit.
Web Site	Website is required before you submit. (optional)
Comment	Comment is required before you submit.
	HTML tags are not allowed.

Categories:

All
Color Palettes
E-Commerce
Homepage
Interior Page Design
Navigation
StyleSheets