After our team has designed a number of web standards CSS/XHTML based web sites for clients now, a common question has come up again and again, “Why does the printed version of my web page look so different from the version I see on the screen?”

Often times, when a CSS/XHTML based web page is printed, it looks like it missing much of the information that formats it so well for the screen. While this may seem like a bug or a mistake at first, it is actually a feature. Images within web pages fall under two types - images and background images. Background images differ from regular images in that they are decorative graphics placed in the background of html elements. These background elements are meant to add texture or depth to the screen version of the web page. They are not intended to be used as part of the page content. When the page is printed, these images are removed from the print version of the page to create a cleaner looking, less ink intensive document. If the web page is designed without much thought to how the printed version will look, using the background images as crucial to the overall design of the page, the results can be quite jolting.

To better illustrate these differences I have two examples. Here is Microsoft’s Vista experience page.

This is how it looks on the screen.

Here is the print version of the same web page.

The two version look radically different, enough that they would cause the user who printed the page to wonder if something was wrong with their printer or computer.

Here is a different example from the Apple web site.

This is the Apple Mac Pro product page for the screen.

This is the print version of the same page.

Here, the necessary images were not used as background images and were retained in the print version. Also, the background and font colors were reversed to provide a better experience for the printed document. If the print version of the document was exactly the same as the screen version, the printer would take longer to print and use much more ink.

In addition to removing background images, a web page that takes advantage of cascading style sheets just for printers could remove unnecessary elements for the printed version like navigation, breadcrumbs, and hyperlink formatting. If this is done elegantly, the printed version of a web page can have the appearance of a clean, well formatted page of content intended for easy reading. If the clean, stripped down printed look is not desired by the client and instead they wish to have a look similar to that of a brochure, then a downloadable pdf of the same content would be recommended.