Print Your Website In 5 Easy Steps

Have you ever tried printing a website, only to have it come out a jumbled mess, with weird missing images and hard-to-read text?

Don’t be surprised. In an informal study, we recently found that over 70% of business-to-business websites printed poorly because they didn’t have a print style sheet. Though they looked nice on the screen, they looked horrible coming off the printer.

Just like “normal” style sheets define how a website looks on the screen, you can use print style sheets to define how your website looks when it’s printed, and make sure it looks good.

Why isn’t my site printing right?

Generally speaking, without a print style sheet, web pages won’t print correctly:

• No background images. Almost all browsers don’t print background images (most non-content specific images) as the default setting and few users know about the setting or how to change it. (If you’re using Internet Explorer, you can turn adjust this setting in the Advanced Preferences pane, while Firefox users need to use Page Setup.)
• Narrow pages. Printers print at about 650px wide (630px for A4 paper), far narrower than most modern websites. The browser will either compact things to fit (IE7 does this), or print a wide website on multiple pages, giving you a bunch of extra pages with no real content.

How should my site look when it’s printed?

Many people think that their site should look exactly the same printed as it does on the screen. But printed material is different than a website, and people use and read it differently.

Instead, we optimize the page for display on paper, not on a screen:

• Remove interactive elements that don’t make sense in a non-interactive medium. Navigation, calls-to-action, etc., aren’t useful when they can’t be clicked and there’s nowhere to go.
• Remove design elements that aren’t related to content, take up space, don’t look good when printed in black and white, and waste ink and toner.
• Optimize the width of the page for printing (about 650px wide).
• Replace sans-serif fonts (easier to read online) with serif fonts (easier to read on paper).

Problems

Print style sheets aren’t without problems, however.

The main problem is that most users expect to pages to print out exactly as they look within the browser, and when they don’t, it’s confusing. Unfortunately, there’s no real solution to this beyond instructing users how to turn on printed background images, an obscure setting that varies by browser, or educating them as to why to expect printed pages to look different (paper is a fundamentally different medium than the web, and there’s no reason for interactive elements and calls-to-action, beautiful web designs are often lost when printed out in black and white and end up wasting ink and toner).

A secondary problem is that a site’s branding is often lost. We take care of this by being sure to include the logo on the printed page, as well as other branding elements optimized for printing.

Do it!

Given how few marketing websites use a print style sheet, you’d think it would be hard to do. It’s not!

1. After the site is designed and built, create a new style sheet using the same syntax as your normal style sheet. Although this will be the print style sheet, it’s much easier to do this in the browser, so comment out your “real” style sheet and associate it in the same way.
2. At this point, your page will appear completely unstyled. Generally speaking, I only want to print out the logo, the main content (whatever the page is about) and the copyright information at the bottom of the page. I specify every other element and give it a “display: none” attribute. Usually this includes the primary and secondary navigation, subnav, any call-to-action elements, side columns, what not. Of course, this is easy if your page’s code is designed well. If it’s a mess, well, it may not be easy.
3. I usually copy over the styles for my main body content from the web style sheet, and adjust them for print. This enables me to preserve some source formatting. It may be better, however, to just use a standard set of styles for printing. Although sans-serif fonts are easier to read than serif fonts online, for example, it’s the opposite in print. Switch ‘em.
4. Often, there are little issues that need to ironed out after the first pass. Sometimes, you’ll want to float images or tables.
5. If your page gets mysteriously cut off after the first page, you may have floated the main content div. Don’t do this.

Some tips and notes

• I like to include a high-res logo, either the main one, reduced in size, or if that’s a background image, a different one normally not displayed.
• It’s a good idea to include the URL in the footer. Although most browsers will print this by default, not all do.
• Another option is to include a note at the bottom of the page, in the footer, explaining what the story with the different formatting is, and offering a link for more info.
• There are a number of ways you can take your printed web pages to the next level if you have interest and budget. Before engaging in these, I’d recommend conducting research to see how people interact with your site. If you find that many users are printing it out, it may make sense to engage in a more advanced project, paying closer attention to the design of each page. For at least one client, we’ve designed fairly robust printed webpages, including a cover sheet, page footers, specified page breaks and print-specific formatting throughout the document.

Additional reading

As usual, Smashing Magazine has an excellent survey of articles on the subject.