CSS Tip:
Design Print-Friendly Pages

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Web designers who struggle with browser display issues often forget another common way people view Web pages; many print a page for later reference. Use Cascading Style Sheets to set print parameters for your pages and increase the usability and accessibility for all your visitors.

Restyle The Page For Print

Creating pages for print is a two-step process: first you need to create a print style sheet that modifies your page display to remove non-essential elements and then use the LINK element to make the print style sheet accessible.

Consider what parts of your page layout aren't needed when the page is printed. For instance:

1. Navigation system: The reader can't go anywhere from the printed page, so the navigation menu just takes up space.
2. Background images: These can make the printed page text hard to read. They also use unnecessary amounts of toner to print.
3. Background colors: If your page is light text on a dark background, do your visitors a favor and create a print style sheet that has dark text on a white background. Hey, it may even look so good that you want to use it all the time!
4. Non-essential images: Often, you can remove the majority of images because most people print pages for text content, not pictures.

There are exceptions for images. Some should stay with the page's print version or you risk confusing or irritating your visitors:

• Your site logo—it reinforces your brand.
• Product photos—visitors may use them for comparison shopping.
• Other important photos—for instance, if your site shows different hairstyles or a map to your business, most visitors are going to expect that those important images will be in the print version!

So what's left on the printed page?

• Non-navigation text content.
• Section headers
• Important images
• Page URL (so the visitor can find you again online)

CSS makes it easy to remove the elements you don't need.

Creating A Print Style sheet

Your print style sheet needs to be saved in a separate file from your regular style sheet. That's because you use two different LINK elements to link the two style sheets to the Web page.

Let's use this example page (click here to view example) with a calendar of events for the fictional business "Zorra's Garden Retreat" to decide how to create a sample print style sheet.

A calendar of events is a great place to start if you're considering making print versions of just a few pages. Any business, religious group, or community organization that holds special events or meetings will find that eventually someone wants a hard copy of that calendar.

Here's a small screenshot of Zorra's Garden Retreat's calendar.

With just a quick glance, we see several elements that can be removed or need to be changed for the print version:

1. Change the background and text color to black text on a white background.
2. Remove the side navigation system.
3. Modify the footer.
4. Add a page referrer so the visitor can find the page again online.

View the site's external style sheet here. Note that it uses style classes to control the navigation display, font color, background, etc. We'll modify these for the print stylesheet. Fortunately, that's pretty easy to do. Since we don't want the navigation to display at all, we change all the style properties associated with navigation to display:none. Then, we just need to modify a few more elements to get the print effect we want.

Here's a comparison between the two style sheets with a short notation of changes:

Save this revised style sheet as "PrintStyles.css" and we're ready to link it to the document.

Linking The Print Style Sheet

If you've used external style sheets or external JavaScript files before, you're familiar with the LINK element.

Link an external style sheet like this:

<link rel="stylesheet" type="text/css" href="styles.css">

When you add a print style sheet, you have to add the "media" attribute. This tells the browser that the styles contained in that .css file should only be used when the document is printed.

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

Decide How To Link!

The easiest way to create printable pages is just to add two LINK tags to each page; that's what we just did. One links the basic layout external style sheet and the other contains the printable style sheet. It's a seamless process: your visitor clicks uses the PRINT option in her browser and the printer coughs up the printable version.

To see how this works, view the original file in your browser again. Then select the Print Preview option in your browser. You should see the page using the print style sheet layout.

Here's how it looks in Firefox:

It's easy and everyone is happy, right? Maybe not.

Perhaps your visitor really wanted an exact copy of the page—for whatever reason. She may be confused and frustrated when she can't print one. It's always possible to take a screen shot and then print that, but many inexperienced users don't know how.

So consider adding a "Printable Version" link in a prominent place. That's a standard hyperlink that links to a page that uses only the "print.css" style sheet. Note: don't use the "media" attribute in the LINK tag because you want the visitor to see a preview of what he's about to print.

That would mean that the link on your standard layout page would look something like this:

<a href="calendarPrint.htm" title="Printable version of Zorra's Garden Retreat calendar of events">Printable Version</a>

Then, the calendarPrint.htm page would have only one LINK tag:

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

This gives your visitor more control, but it's also a lot more trouble if you're coding everything by hand. That's why you may want to consider adding printable version of just a few of your most important or content-rich pages:

• Event calendar
• Frequently Asked Questions
• Shipping and return policies
• Important articles and news items.

Advantages Of Print-friendly Pages

If your site has a lot of content that visitors may want to print for later reference, printable pages may be worth the extra effort it takes to create them. There are plenty of good reasons for print-friendly pages:

1. Increased usability: Visitors can take it with them to show colleagues or for later reference.
2. Increased accessibility: Screen readers have a much easier time accessing the mostly-text printable page. Alternate text pages are particularly helpful if you have lots of JavaScript or other multimedia functions.
3. Decreased download time: Millions of users still rely on slow dial-up connections—particularly home users. They often click immediately to the "printable" version of news stories and articles because they can get the relevant information more quickly. They're also more likely to print information because it takes longer to dial-up a connection and review the page online.

One disadvantage to you as a webmaster though, is that they're a little more complex, so it's easier to make HTML errors that create browser display problems. Always check your HTML code with NetMechanic's HTML Toolbox after every change. You'll avoid simple errors that can hide content or break your page entirely.

It's also important to check the new pages in as many browsers and browser versions as possible—particularly when you're relying on CSS to style page content. Browsers just don't always display CSS rules like you expect, so use NetMechanic's Browser Photo tool to quickly check for unwelcome surprises.

Browser Photo displays your page in 24 different browsers, browser versions, and operating system combinations. You'll quickly find out if your "printable" page has display problems.