Printing Your Website the Right Way	1.0/5.0 (2 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Maricon Almonte March 15, 2005

There are so many techniques and methods available to create a user friendly website. The first one is by using a server side routine or print stylesheets. The print version may strip out images and navigation that lose their meaning on the printed page and may show the page in a single column using a dissimilar font with a different size.

When there is no printable version or the printable version includes ads or other settings, you can use stylesheets. With CSS awareness plus some web development tools, you can easily create your own formatted print versions. The tool you may need involves Mozilla Firefox. If you don’t have it yet, you can install Chris Pederick’s Web Developer’s Toolbar.

Various techniques are utilized in order to expose the grid of the website, segregate the element containing the content you want, use CSS to format the page with suitable font sizes, widths, and margins, use CSS to selectively show and hide the other parts of the page as you see fit and save the CSS to create an immediate custom printable view.

To easily take an X-ray of the site, use the web developer’s toolbar. After that, use the Outline Block Level Elements or Outline Table Cells to outline the site’s grid then use View ID and Class Details from the Miscellaneous menu.

To isolate the target, set the container and its descendants to be visible, and then move to the top of the editing area and hide everything. But before you do this, you can first change its background color, format the texts, change fonts or its border properties so that you can easily identify it. Use the Boxes and Arrows to do this.

When you already achieved your desired look, save your user stylesheet. In cases where you return from Print Preview and the area is vanished, you have to reload to continue with modifications. You can use Load to import your CSS file into the editing area.

If you want to create some space, the difficulty lies on how to distinguish between one div or table and another. To remedy this, you can create a rule in the editing area to place margins around the various containers which are dependent on the layout. If you have difficulty in identifying any target on the page, you can use the View Style Information from the Information menu. Your cursor will turn into a crosshair. Stay close over the elements in your page and the status bar will tell you where in the DOM tree the element is placed.