How to Create a Printer Friendly Web Page
Printing a Web page has been considered a "hit or miss" process, mostly due to common pitfalls on the part of Web designers. With some simple rules using cascading style sheets (CSS), your entire site can be print-ready without necessarily changing the content. This article presumes that you are already familiar with fundamentals of HTML and CSS coding, as well as the process of managing remote files on a Web host.
Other People Are Reading
Things You'll Need
- Hosted website with HTML and CSS content under your control
- HTML editor software--optionally with CSS-editing features
Instructions
-
-
1
Determine the general areas of your layout: heading, side, footer and body. A heading includes your logo and may also have navigation links. Sides contain navigation links and possibly advertising or special features. Footers may contain more detailed navigation, copyright and legal information. Body content is what's left---the "core" of the page. When a visitor prints a page, the part she wants on paper is the body content.
-
2
Identify the general areas from Step 1 with tag attributes, if you haven't done so in your original design. Use the "id=" attribute and make sure that each name is only assigned once on each page. This makes them more accessible in the style sheet.
-
-
3
Start a new, plain-text file and save it as "printer.css" in the same location as your "default" style sheet. Leave it blank for now. This style sheet will not replace your original style rules except when a visitor prints a page from your site.
-
4
Open one of your existing HTML pages in the editor and save a new copy with a different name. (e.g., a page named "biography.html" might be saved as "biography-print.html"). Inside the <link> tag, change the name of the style sheet to "printer.css" so that it loads the file you've just created. If there is a "media=" attribute, remove it. For the moment, use only the "printer.css" style sheet for that page.
-
5
Upload the new copy of that page, along with "printer.css" to your host. Open a browser and type the full URL---including the whole file name---for the copied, print-only page. It may look very unusual, but that will change.
-
6
Create new rules for your page in the "printer.css" style sheet. As you add new rules, update the "printer.css" on your host and reload the page in your browser. To start, create a rule for the header, side(s) and footer using "display: none" to hide them.
When you're done, try printing the page and verify the results on paper. Keep reviewing printed versions of the page and make adjustments as necessary before moving on. -
7
Apply your original style sheet alongside the new one using two <link> tags--one for your original style rules and another for "printer.css" styles. Insert the [media="print"] attribute into the tag for "printer.css" and [media="screen"] into the tag for your original style sheet. Then update your site. Once applied across your entire site, your pages will have the same onscreen appearance as before, and printed pages will appear according to your print-only rules.
-
1
Tips & Warnings
Keep in mind that as a Web page onscreen, your pages are interactive, just as they were intended. As a printed sheet of paper, however, the page is no longer interactive. It can not be searched, except by the human eye.
This guide may not be useful on sites using CMS since many CMS packages already include features for print optimization. In such cases, consult your CMS platform documentation for tips on "printer-friendly" formatting.
