Design Vitality

It’s happened to us all: We come across a site with very helpful information and we print it. What do we get? A broken layout, ads and cut-off sentences. How do we remedy this? We use these 15 tools and CSS stylesheets to create printer friendly websites of course!

1. What is a printer-friendly page?
   About.com covers what exactly a printer-friendly page is used for and gives you pointers on creating one.
2. CSS Media Types and Printer Friendly Pages
   This site shows you what each CSS type represents when called, and how to use the print declaration to create printer friendly pages.
3. How to Make Printer Friendly Pages
   Envisionic gives tips on creating printer friendly pages using CSS. The user just hits “print” without needing to load a new page.
4. Printer Friendly Pages
   An in-depth explanation on how to create printer friendly pages using CSS. Includes examples and what fonts are recommended for use.
5. Printer Friendly Version Using PHP
   Using PHP it is possible to show your users what a printout of your page will look like before printing it. CSS handles the printer friendly styles and PHP is used to create a style switcher.
6. Articles: Print To Preview
   The only real drawback of using CSS to create printer friendly pages is that the style of the page can look completely different when printed. This may confuse Average Joe user. A List Apart proposes a solution that uses JavaScript to show the user what the page will look like when printed.
7. ALA’s New Print Styles
   A follow up to the previous article, this ALA post takes another look at styling for print.
8. CSS Tip: Design Printer Friendly Pages
   This article covers why certain items should be left out of the printed version of your page. Things like navigation server no purpose when printed, so give them the chop!
9. Going To Print
   Eric Meyer’s article from A List Apart gives you an example print stylesheet that can be modified for your own needs. He also covers things like why it is better to use points rather than pixels.
10. Printing The Web
    Less of a copy and paste article and more of a list of reasons why print styles are important. Very informative.
11. Print Stylesheets
    This article discusses amazing tools in CSS 2 for printing. The only problem is that some of these tools have not been widely adopted yet.
12. How to create an unobtrusive “Print This” button in JavaScript
    456 Berea Street has a very nice and compact script you can copy and paste on to your page. If users have JavaScript turned off, the link is not rendered. Very nice!
13. Printer Friendly Web Pages Made Easy
    This extremely thorough article outlines the exact process to follow when create printer friendly pages. It even shows you how to specify where a page should break when being printed.
14. Printer Friendly HTML
    Printer Friendly HTML is a neat little script that you add to your pages. You specify what parts you want printed and it configures your printer friendly page for you. If you don’t specify something for print, it just gets ignored.
15. CSS Cookbook: How to make a printer friendly page with a stylesheet
    Another very thorough article on creating a print stylesheet. This one starts with a regular website design and walks you through the process of create a print stylesheet from the existing design.