If you believe in your business, it might be wise to consider offering visitors with the ability to print pages of your website. But how do you do this? Do you need to create those little printer icons on your pages so that people can go to a special version and print? Is there an easier way?
You’ve probably seen a “Printable Version” link on a few websites. Sometimes they are just a little printer icon, sometimes more. They usually hide out on the top right of the content. If you click it the normal operation is for a new page to load.
This new page is simplified, the backgrounds are gone because they won’t print anyway. Maybe the sidebar will be removed, the header will be gone or simplified.
All this makes the page easier to print. The extra stuff is gone, it’s usually mostly black text so that it won’t chew up your color cartridges.
Why is this separate “printable” page the wrong way?
First, using these could have negative impact on your SEO. The new page is usually a different URL, and yet contains the exact same content. So this means duplicate content. For every single page on your website.
Naturally, there are ways to tell the SE’s, like Google, to ignore these pages. You can use your robots.txt file. Another way is to use “noindex” and “nofollow” meta tags. But keep reading and find out why none of these are necessary.
Second reason why these are the “wrong way” to create a printable version, it’s not really a user friendly way to do things. If someone wants to print your page, wouldn’t it make sense for them to just hit “print”. Why do they have to click a link first?
What is the right way to create a printable webpage?
The right way is to use a separate CSS file. You can actually declare how your CSS files should be used. Specify them for the screen, for print, etc.
Let’s take a quick look at what you might use to declare the CSS:
<link rel=”stylesheet” href=”style.css” media=”screen” />
<link rel=”stylesheet” href=”print.css” media=”print” />
As you can see the first instance is the style sheet declaration for the screen view. The second line is what will be used by your browser if it’s told to print the same page.
In this print style sheet, you or your trusted developer, can change the presentation of the page to be optimized for print. Changing the header, hiding the sidebar, removing all backgrounds, etc.
This is another example of why using CSS to it’s fullest potential can benefit your website. It alleviates potential SEO issues, separates presentation from content, and makes your site more usable.
