Designing & CSS for Print

It's difficult enough designing for various browsers with different levels of standards compliance, but many webmasters often overlook the need for print versions of their standard pages. How can you design for pages that need to be printed and what options are there for coding for printing?

Designing for Print
CSS Options for Print

Designing For Print

There are two options when creating a web site with documents that may need to be printed. You can either design all the web pages to be suited to print as well as the web, or you can maintain two copies of the same document, one with the branding and features that may be useful on the web, and one which has many features stripped down.

When designing your web pages for printing you may want to consider the following points:

Frames cause problems - Try not to use frames, although browsers are becoming more advanced with the options for printing pages there are still problems with viewable areas on the page.
Use appropriate colours - Try to use black on white for your web pages that print. The user may not have a colour printer, and it simply is easier to read black on white. Other colours may not show up on the paper: For instance if you have a coloured background with coloured text the browser may not print the coloured background, but may still print the text coloured making it unreadable.
Try to use a wider screen for print versions - When you have tables that have a fixed width, or a small variable width then when printed a document may span over several pages wasting paper.
Minimise the navigation and site features - As with normal design remove any items that have no function, when a document is being printed it is normally the content that the user wants to look at: They don't want their page filled with useless site features that have no relevance when printed. This particularly applies to seperate print versions of pages, you may just want to include a simple link back to the web-optimised version.
Include the URL of the document or main web site at the bottom of the page. If they have printed the information the user is obviously interested. The site may be updated and the user may want a reference from the paper back to the site. There have been many occasions when I have printed out a document, looked at it a few days later and wished I could remember which site it was from.
You may also want to include a copyright statement on the page that is printed
If you have an article that is broken down over many pages then include the full article in the print version. It is likely that if people are printing then they will want to read the entire article, it may be annoying if the end half is missing.

CSS Options for Print

Although HTML has no real supported features to enable optimisation when printed CSS does. It allows you to specify a specific style sheet to apply to the document when it is being printed. This is done within the <LINK> or <STYLE> tag depending on which method you are using to integrate CSS into your site.

The above code is placed in the <HEAD> section of the document. It specifies a style sheet to be applied to the document when printing. It has no effect on the online-presentation of the page. Now if you are using the <STYLE> tag on each page to do your CSS then the code that you want is very similar.

<STYLE MEDIA="print" TYPE="text/css">
P {color:black;}
</STYLE>

It is the MEDIA attribute here also that specifies that the styles are for the print medium. Hopfully you can take note of the points above and provide your users with a print version of your pages.

~Wildfire: > Articles > Designing & CSS for Print (Optimising your Pages When they are Printed)
~Look at: \| Articles \| FAQs \| Resources \| Reference \|	\| Feedback \| Search Wildfire

Top of Page
~Look at: \| Articles \| FAQs \| Resources \| Reference \|	\| Give Feedback \| Search Wildfire