All the News That’ll Fit: Designing Web Pages for Printing

When you’re designing websites, pay special attention to those sections that visitors might want to print out instead.

Remember the “paperless office”?

There was a time not so long ago when it was commonly believed that networked computers, email, databases and electronic signatures would make paper documents obsolete. No more would documents need to be printed out – you could just get them online, and they would always be the current version. Contracts would be signed electronically! File rooms would be repurposed for something more useful, like Foosball! Forests would regrow and landfills would empty!

You’ve probably noticed that none of this happened. Sales of printers, ink, toner and paper show no signs of slowing, and file cabinets are just as full as ever. Why? Because the very technology that was supposed to make printing obsolete actually made printing stuff easier.

Take, for instance, desktop publishing. You no longer have to work with a professional printer to typeset your full-color brochure; you can print it right at your desk. Heading off to a meeting? It’s way faster to print the agenda than drag your laptop to the conference room, connect to the network, log into your email and search for the message containing the agenda. And taking notes on paper is still often easier than with a computer.

So people still like to print things, and that includes web pages. Unfortunately, web designers don’t always design with printing in mind. Here are some things to think about for making web pages printer-friendly:

Would Anyone Want to Print Your Web Page?

Some things just aren’t meant to be printed. Videos, animations, and interactive Flash applications lose most of their value when printed. For everything else, though, you need to ask yourself: would someone want to print this page? (Better yet, ask your users.) Hint: If the page contains information that would be useful offline, such as turn-by-turn directions, phone numbers and shopping lists, someone will probably want to print it.

Which Parts to Print?

Have you ever tried to print out someone’s blog article, only to find that the printout included the half-page blog plus 135 pages of comments? Chances are good you didn’t want to print all of that. Users typically want only the text content and perhaps static images, such as illustrations or photos. They probably don’t want advertisements, navigation widgets, the page footer and long lists of hyperlinks.

Happily, your web designer can create a CSS file specifically for printing (using the media=”print” attribute of the <link rel=”stylesheet”> tag). Then, by creating a no-print class in the CSS with the command {display:none;}, the designer can designate elements within the HTML as being non-printing elements. Just like that, the clutter is gone from the printed version.

Give Users Options

Taking this a step further, you can apply some JavaScript to give users options on which parts of a page to print. Maybe some users do want to print all 135 pages of comments. Provide a “Print” button or control on the page, and pop up a dialog box upon clicking: “Do you want to print the comments?” Or consider a shopping list: some users might find photos of the items useful, and others might not. Give them the option, and everyone’s happy.

Create a Separate Printer-Friendly Page Version

Some web developers program the on-page “Print” button to open a printer-friendly version of the page in a separate browser window. This approach might be easier than trying to plan one page that will work for both screen and print, especially if the print layout is dramatically different from the screen layout.

Test the Design

Just as with testing the screen version of the website, testing should be done with the printed web pages as well. Different browsers render web pages differently for printing. This can be controlled by CSS to some degree, but don’t assume that correct formatting when printing from Chrome also means correct formatting if printing from Firefox or Safari. Also, test on different printers. Not all users have color printers, and what looks great on a color printer might be unreadable in grayscale.

We may never see the advent of the truly paperless office. As long people want to print things like web pages, and as long as it’s easy to do so, we might as well do what we can to make them look good in print. We’ll just have to find someplace else for that Foosball table.