Create a Printable Site

Posted in CMS and Wordpress and Knowledge Base and Production 3 years, 5 months ago at 11:49 am

More than likely, your visitors will print your pages if they are full of useful content. But the design of your site may increase the number of pages printed, use a lot of ink, or cutoff content on either site.

View your website in the browser’s Print Preview. What do you notice?

• Too much ink is wasted?
• Too much paper is wasted due to long menus being printed or half the page being blank?
• Are the right and left margins cutting off the text?

Remedies

One method to remedy print problems is to create a print style sheet with the <link> tag set to media="print".

1. To remove unnecessary items, such as navigation, use display:none in those stylesheet definitions.
2. To keep text from getting cut off, set the body, container, or content divisions to 100% rather than a fixed width.
   • This allows the content area to expand to the browser’s default width.
3. To reduce the use of too much ink, eliminate or swap larger banners and other images in the template with smaller, black on white images.
   • One method is to set up two images; one forthe screen and one for printing.
     • For example, if your banner file is a background, by default it will not print. If printing background files is set to ON, then you can swap the screen.css file’s background definition for a different one in the print.css background definition.

Read more about printing

CSS Design: Going to Print

Eric Meyer, A List Apart. 2002.

#58: HTML & CSS – The VERY Basics

CSS Tricks’ Chris Coyier screencast from 2009.

One reason frames are less commonly used (2008) is to make printing easier. Frames often print one page per frame, even if there is nothing useful on that frame (navigation or footer). It is annoying to print three pages when you may have just wanted the second paragraph of the content frame.