Why your web pages print badly and how to fix them

Dec 3, 2009

I am constantly amazed at how many great-looking sites print terribly, or barely print at all. A common blind spot shared by many capable, talented web designers, seems to be inattention or indifference to how their pages print. Most designers and developers spend countless hours optimizing their designs for a wide range of platforms and browsers, but fail to make sure that things don’t fall apart when someone hits “print.”

Four Common Web Print Problems

Unstyled content. A page prints out with zero formatting: big, chunky Times New Roman letters spit out of the printer. The font is the least vexing problem. The bigger issue is that a raw, unstyled web page printout often includes a lot of stuff that users don’t need: navigation elements, social networking links, archive links, and blogroll items that are useless to someone reading on paper. With all this unstyled, useless text preceding and following an article, a three-page blog post can become a sixteen page, tree-killing mess.

For example, here’s what Paul Krugman’s NYTimes.com blog looks when viewed online in late-2009:

Screenshot of Krugman's NYTimes blog

If I want to print his entire blog — not just a single entry — how do I do it? Hmmm… I can’t.

So if I hit print on my browser (without hitting the small, designated “print” icon), I get this mess:

Screen shot of print preview of Krugman NYTimes.com blog

It’s 26 pages of unstyled content, a third of which is messy sidebar and navigation stuff I don’t need, an ugly waste of ink and paper.

Some web pages need two or three pages to print unstyled navigation and header junk before getting to the actual content on a page. The navigation links are worthless to someone reading this on the plane, let alone the five pages of sidebar clutter, ads, and footer content.

Endless comments. I notice a popular, useful article in my feed reader, go to the page, and print it out. When I go to the printer, I see a 60-page stack of paper waiting for me? Why? Because I got a two-page article, followed by 58 pages of user comments.

For example, this popular post on Copyblogger, is five pages long.

Screengrab of Copyblogger article

Or so you’d think. Print it out and it runs 57 pages:

Preview of 57 page printout

Most of us would prefer to just get the original article, not all the chatter that followed it. A user could preview the printout in his browser, and tell it to only print the pages before the comments, but this work-around is inconvenient, and something most won’t think to do until they waste half a ream of paper.

One page only. This common printing problem with web sites occurs most commonly for Firefox users. When you print a five-page story, the first page prints, and then anything that would have appeared after that page just vanishes. So instead of getting the whole story, you get the first page worth of content, then maybe a page with the footer on it. If you’ve printed out several articles from a site, then go to your printer to grab the articles, it’s maddening to discover all you have is the first page of each.

Here’s an example from the blog of author Dan Baum:

Screen shot of article from Dan Baum's blog

This article is nearly 2000 words long. If I print it in Safari, I get every page of it, plus all the comments, nine pages total.:

Safari Print Preview of Dan Baum post

But if I print it in Firefox, I get the first page, and the rest vanishes. Poof!

Firefox Print Preview of Dan Baum post

Few users would know to try another browser to make the page print correctly. Since Firefox users make up at least one in four people on the Internet, this kind of problem is unacceptable.

Prints too skinny. A final problem is when a web page or blog prints with the correct style, but in doing so, is formatted too small for the printed page, leaving close to half the page blank. The result, often, is small, hard-to-read text and more pages than would be necessary. Usually the culprit here is a design with lots of sidebar clutter that squeeze all of the content into a skinny middle column that runs long when the page is printed.

The Solutions

First, a general rule: every page should print well

Many sites feature a print icon that triggers some kind of printable version of a web page. And users often look for that icon, so you should offer it. That said, every page should print well, with our without someone hitting a print icon. In other words, you shouldn’t need to go to a “printer-friendly version” of a page to get a reliable printout. If someone hits print on their browser, the output should printer well. Many blogging tools and content management systems offer options for printer-friendly pages and “print templates.” These are great, but they aren’t the only places that you should focus on printer-friendly design.

A print style sheet

The first and most fundamental thing anyone should do to make site content more print-friendly is to set up a proper print style sheet. There are plenty of tutorials and guides to print style sheets (see below), but here are the three key fundamentals:

1. Set up a separate print style sheet., i.e. “print.css” that overrides the default screen styling when a page is sent to the printer. Your main CSS file should be set to media=”all”. What your print style sheet will do is override elements from your primary stylesheet when pages go to print. All you need is this:

<link rel=“style sheet.” href=“print.css” type=“text/css” media=“print” />

Be sure to put it AFTER the main CSS link in your header, not the other way around.

2. Take stuff away. So what’s IN this print style sheet.? Basically, the idea is that the print style sheet. should remove unnecessary elements that aren’t useful for print readers, and format the content to better fit a 8.5” by 11” page.

Removing elements is easy if you’ve done clean, accessible markup. Identify DIV’s that you won’t need on a print edition of your page and use the DISPLAY property to render them invisible. For example:

#sidebar, #navigation, #toolbar {display:none}

Another trick is to apply a “noprint” class to specific elements in your markup that are clearly for screen use only, and adjust the display element. For example, lets say you have a video in a blog post. Obviously the video won’t be of any use in the printed version of this post, so you can apply the “noprint” class to that embed code.

<object class=”noprint” width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/-Sgj78QG9Bg&hl=en_US&fs=1&”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/-Sgj78QG9Bg&hl=en_US&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>

And then add “noprint” as an element not to display:

#sidebar, #navigation, #toolbar, .noprint {display:none}

3. Let the content fill the page. So now you’ve stripped away the elements a printed page reader doesn’t need or want to see, let’s reformat the content to play nice with their printer.

Let’s say your page content is wrapped in a #content DIV. On the live site, you might have it defined to a certain width, something like this:

#content {display:block; width:620px; padding:1em;}

What you’d want to do is take away the styling that locks the content into a certain width or shape. Unleash that text — that means lose widths, margins, padding, and flow it all as inline text. The browser will take it from there and print it to fit the page. So with the above #content div, you’d change it to something like this:

#content {display:inline; width:100%; padding: 0}

For more on using and applying print style sheets, check out the following:

Fix the one-page printing glitch.

One reason this can happen is that a designer uses tables or iframes to create their layouts, which can lead to printing problems. But as most designers have moved on to modern, more accessible design, this is less common. Still, if you’re trapped in 1999 web design techniques of laying out web pages with tables and frames and graphic “shims,” this may be the problem. Knock it off, read a good book on modern web design, and this problem will often disappear.

Still, as noted above, some CSS-driven web pages get cut off when the print (most often in Firefox) because a containing DIV can’t “break” across pages. It’s complicated but the problem is rooted in nested “block” DIV’s. Newer browsers seem to be handling this problem better, but this issue still affects a segment of visitors, so don’t ignore it. What happens is that the browser gets confused when it renders the page for multiple pages and instead of breaking the text over a number of pages, prints it as if the text would continue to flow from the bottom of a single page, which means that it doesn’t print at all. It wants to print to an 8.5” x 12-foot sheet of paper, but since it can’t, it just prints the first eleven inches of content.

The fix for this is surprisingly simple. If your containing DIV is truncating when printing make sure that its CSS declares it to be “display:inline.” If you need a DIV around it to define a block element, fine, but the immediate “container” should be rendered as “inline” for the print CSS.

Check out Ben Nadel’s excellent article for a more detailed explanation of this problem and how to fix it.

Default to printing without comments, but consider offering a “print with comments” option

Some readers might like to read all the comments that accompany and article, but most won’t specially if there are dozens of pages of comments. So as a matter of rules, stick to printing without comments as a default. Some sites offer two options: a link to “print with comments” and one to “print without comments.” You can offer that option as a choice for users. But again, make the default print style simple, useful, and readable for users on the move.

 

Follow those three fundamental solutions and you’ll eliminate 90% of the problems users might encounter printing your web pages.

A few final tips:

Set up a mini-logo or mini-masthead. Many sites use a miniaturized version of their logo or banner for the print edition to anchor the page. You can set it up with a “.print-only” class that shows up in print-styled version of the article, but not the screen-viewed pages. Or some CMS plug-ins allow you to select and provide a print-version logo. Either way, consider an economically-sized version of your logo for the printed to maintain your brand, but in a quiet, printer-friendly manner. This printed page from Salon is a good example:

Screen capture of a Salon printed page

Make text a readable size. Since you’re printing to a page, feel free to bump up your base font to a more readable size. Often, what works on-screen appears a bit small for many readers on the page. For the print.css, you can define your base font in points, not pixels, and go for something larger, like 12pt.

Set text to black. Web designers often set base fonts to a dark gray rather than a pure black. Don’t ask me why. We just do. That’s fine, but when gray goes to print on many printers, it tends to look fuzzy and often hard to read. When you set up a print style sheet, reset those colors to a pure black, and your printed pages will be cleaner and more reader-friendly.

Don’t use ads… but if you must, be discrete. I understand some publishers feel the pressure to generate revenue, even in print pages, but if you do so, try not to create huge, messy printout that users don’t want. The New York Times has a good example of small, unobtrusive advertising in their printouts:

Screenshot of NYTimes print preview wigth small ad

Finally: remember, users are printing content, not sites. Most readers just want your content, not all the extra sidebar stuff, background graphics, navigation links, and promotional elements. They just want your essential content to go seamlessly from the screen to their printer in a easy-to-read format.

With that in mind, take the time to set up your web sites right so that when users hit “print,” they get what they want.

Pin It on Pinterest

Share This

Like this article? Sign up for more!

Join our mailing list to receive articles on design, strategy, and building websites and email campaigns that get results.

Thanks! You've subscribed to Flying Dog articles.