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.
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.
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.
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.
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.
The following assumes some familiarity with HTML and CSS.
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.
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.