How to make printer friendly web pages

If your web site delivers value to your audience, chances are they are going to want to print pages out. Making sure desktop printers handle your web site well is another aspect of building a great user-experience.

This article takes a quick look at using Cascading Style Sheets to design printed web pages.

Printing web pages has been a hassle.

If the web page is just a little too wide to fit on one printed page, you get a wasted sheet with a little stripe of color on it. And, when you print the page, you get all the banner ads, logos, and navigation on your print-out. All you really wanted was the text and pictures on the page, which now happens to be a two-inch wide column down the center of the paper.

printer friendly versions

Some news and other content-heavy sites have come to our aid with the printer friendly versions of their web pages. This is usually a white page with the logo at the top and big blocks of text underneath…just fine for printing.

Drawbacks

1. The visitor might not even see the printer friendly version link in the first place.
2. You are forcing the visitor to download a completely new page in order to print nicely.
3. Web designers have to make an additional printer friendly page for each page of content. Now, with dynamic web sites, this is not that big of a deal. However, for sites that are not delivered out of a web-database, this means plenty of extra work over time.

The answer is in CSS

The answer to these problems with making printer friendly web pages has been lurking quietly on the web for a few years now. It is called Cascading Style Sheets (CSS). Web designers have been using CSS to streamline web page designs but have rarely exercised its power over the printed page.

Part of the beauty of designing printer friendly pages with CSS is that you do not have to make an additional printer friendly version of the page. Instead, when a user prints the page, a separate style sheet is called to alter the design for paper instead of the screen. The page looks like it was designed for the web in the browser, yet it prints out like it was designed for a piece of paper.

An example

The two images below are screen shots of earlier versions of this page. The first is how this page might print out without a CSS defined print stylesheet. The second image is how the page will actually print out with the print stylesheet.

Note how elements extraneous to the printed page have been removed, such as the left column navigation and form. In addition, though it may be too small to see in this example, a typeface and line-length that are more appropriate for the printed page are used.

How to make it happen

The following assumes some familiarity with HTML and CSS.

1. Print out the page in question. Highlight everything you want to keep on the print-out in green. Mark elements that you don't want to keep in red.
2. Create a new stylesheet document. Call it something like "print.css".
3. Link your new stylesheet in the head section of your web page. It will look something like this:
   <link href="print.css" type="text/css" rel="stylesheet" media="print">
4. For each element of your page that you do not want printed, assign a class or id attribute in the HTML, if this is not already done. For example, if the site navigation is in a div tag, you might apply an id such as <div id="nav">. Note that an id must be unique within a document, but a class can apply to multiple elements.
5. In print.css, put a corresonding instruction to not display the item. For example, if you don't want the navigation printed, write div#nav {display: none} into the print stylesheet.
6. Use print.css to further define how the remaining printable items will appear. You can adjust positioning, page margins, typography, colors and more.

Considerations

The above section is a very brief overview, meant to provide a little direction. With that in mind, here are some things to think about before you start designing a printer friendly web page.

• When you design the printed page, think content first. Ask what is needed for the printed page, and cut everything else out. Design it with white space, typography, and anything that can enhance the readability.
• Your HTML should be at least version 4.01 and should be valid. Ditch font tags and do not rely on tables for layout.
• Take some time to experiment with the CSS to find what works best for your readers.

Resources

Learn more about CSS and XHTML

• 
  Cascading Style Sheets 2.0 Programmer's Reference by Eric Meyer.
• 
  Eric Meyer on CSS
  Includes a whole chapter on styling for print!
• The XHTML Tutorial at W3Schools.com includes a tutorial, a quiz, and an XHTML 1.0 Reference for tags and attributes.

More articles on making printer friendly pages

• CSS Media types and printer friendly pages tutorial at wsabstract.com. Gives a quick description of the ten media types supported in CSS-2.
• CSS2 Media Types Create Print-Friendly Pages by Jennifer Kyrnin. This article provides more coding examples.
• Printer friendly web pages with CSS and media types. Yet one more example with code.

---

Send me a note about this web tip or suggest a new topic.

Contact me to discuss how I can help you produce a better user-experience for your web audience.

--
Davin Granroth