by TJ Singleton 

How many times have your printed a website only to realize that the content portion of the page doesn’t fit? Or 80% of the page being taken up by ads, headers, and other ink intensive items you wish weren’t there? In this article we will be discussing how to prevent these headaches from your visitors. We spend hours agonizing over how our sites look on the screen, why wouldn’t we spend a few moments getting it to look stellar on paper too?

Setting it Apart
First step to the path of print happiness is that of learning to access the print style. There are two ways that I suggest to do this. Either way will let you specify elements to specify style specific to the printed page.

1. You can use a separate style sheet with media set to print. With this the only CSS your printer will see is that of the style sheet specified. One nice thing about this way is you are starting from a clean slate. You don’t have to worry about your existing styles, but you may have to set some again depending on your layout.

2. You can use the @media syntax. Instead of another style sheet, this allows you to add the print styles right into your current. Remember that the printer will still see the rest of your style sheet and you will have to redefine the old styles as needed.

De-Design, Re-Design
Now that we know how to access print styles lets consider how to design for print. Some common design techniques for the screen does not necessarily translate well into print, therefore the following design rules often need modified to visually look better in print.

Stick with the basics. Use black text on a white background. Not only is it easy to read it is going to save your visitors ink. I would style links in the default blue and underline as it will be recognizable as a link.

To foster easy reading, use a good size font, 12pt is the smallest I'd go in most cases. While the best way to size fonts on the screen is either percents or em's, but pts is great for print. Along the same lines, we know sans-serif fonts are your pick for on screen work, but for print the using serif fonts is a better choice.

I know your probably concerned about breaking the hard fast rules of web design, but don't worry. Remember, this isn't web design. We are designing for print and need to follow the design rules for such.

You also should remove all elements that aren't necessary. Get rid of that navigation, it will do your visitor no good on the printed page. I'd keep copyright information, it's your work after all. If the image is not necessary, ditch it too. We will look at ways to do all this next.

You may want to remove the ads or keep them. If they are pay-per-click, they won't do you any good. On the other hand, it they are paying for the exposure you may want to keep them.

You will probably want to set reasonable margins as well. One inch per side is a good start. But style to taste.

These are just a few common areas that need to be addressed when moving to a print style. Just keep in mind that you are designing for print and not the screen. Taking some time studying print designs may lead to other web design rules that need to be overruled.

The Magic
Ok, we know how to access those print style but how shall we style it? Meet the printer's new best friend.

What this little piece of CSS magic does is remove the element from the design. For instance if we wanted to remove the navigational sidebar off a site, all it would take is a simple…

… and Wah-La! No sidebar. Pretty neat huh? We have another trick up our sleeve. How about swapping out that ink intensive image with a logo more suited for print? Here are two ways to accomplish such an image replacement.

If you have the logo defined in the background all you have to do is replace the url with your new printer-friendly logo.

I know this seems very simple, but guess what. It is! That's the beauty of it. In the case that you didn't define logo in the style sheet, but with an image tag in the html don't display the image and set a background image for the div.

Now, floats cause all sorts of problems in design. This is true in print design as well. But, this is pretty easy to fix. Just remove the float. Without that little piece of code Mozilla browsers will only print one page of a float.

Some Day
Some day browsers will use the CSS2 spec and we will have access to the @page rules. Unfortunately, I'm not sure if any current browser supports it fully or sufficiently. Until then you can check out the spec at the W3 site (http://www.w3.org/TR/CSS2/page.html).

Until then, go on friend! Time is of the essence. I may be visiting your page soon and wish to print out a page. Remember it is easy!