Using Style Sheets to Create Better Printer-Friendly Pages


Forget what I said last month about printer-friendly pages. I didn’t know what I was talking about.

Well, maybe I’m being a little harsh. Let’s just say that this month’s me is more educated and knowledgeable than last month’s me. It’s an ongoing process of improvement. I can’t wait to see how smart I am next month.

Using Cascading Style Sheets: A Smarter Approach

After writing that article on multiple approaches to creating printer-friendly pages, I discovered a method that appears to offer almost all of their combined advantages with none of their drawbacks. It’s my recommendation that this is the approach you should use on your own Web sites with few exceptions.

Without getting too technical–geeks can contact me directly for details–Web designers can utilize something called cascading style sheets (CSS) which affect the way a page displays. These style sheets dictate the fonts, colors, margins, links, and just about everything else that impacts the layout of a page.

One Web Page: Multiple Layouts

You can also use multiple style sheets within a single Web page: one can control the screen layout and another the print layout. This allows you to create one Web page that’s optimized for both the screen and the printed page. Utilizing this method–no matter how many pixels wide your Web site may be–it can still print within the confines of an 8.5” by 11” sheet of paper.

Style sheets can also control which parts of the page will display. For example, using CSS you can hide the navigation, images or banner ads when someone prints the page. Alternatively, you could hide something on the screen that would show on the printed page, such as some marketing copy or a copyright notice.

You can also specify different fonts for the print version. Most people agree that sans-serif fonts such as Geneva, Helvetica and Arial work best on the screen. However, on the printed page, serif fonts such as Times New Roman and Georgia are easier on the eye.

For Example

Below are two images; one shows a screen shot of our recent press release for the Healthy Children Project; the second shows the same page when printed. Before using dual style sheets, this page might have been cropped when printed; now it wraps perfectly on the page. In addition, the navigation has been hidden to allow for a cleaner printout. Finally, the body copy has been specified as Times New Roman, while the original version used Geneva.

Image of Web page on screen Image of Web page when printed
Web Page on Screen Web Page on Paper

Because you only need to create one version of the page (rather than a second “printer-friendly” version) this is a more cost-effective approach. Updates are easier and cheaper since there’s only one page to change. Often, even the most conscientious Web developer may forget to update the secondary “printer-friendly” version, leading to inconsistency on the site.

One caveat: a Web page needs to be set up with CSS to take full advantage of this approach. The time it takes to retrofit pages with CSS can vary based on how the pages were set up and the size of the site. Still, the future cost-savings should counter-balance any initial outlay.

If you’d like to talk to flyte about using CSS to provide better printer-friendly pages please contact us.

–Rich Brooks

President, flyte new media