RSS FeedMake your website printer-friendly
February 14th, 2008 by Verne
The accessibility of your website is an important consideration to make. It could be as simple as determining what screen resolution your website is compatible with. The ongoing cross-browser compatibility struggle can also be seen as an accessibility issue, as can the extent that your website complies with screen reader standards for the blind. Essentially, the accessibility of your website is measured by the number of methods, mediums, and audiences that your site’s content can be easily transferred to.
Accessibility also includes, among many other things, the extent to which your site is printer-friendly. In other words, the ability for your audience to print your content and take it with them so that they may have access to it while away from the computer. As with all aspects of accessibility, making your site printer-friendly is ideal, but not manditory. Sometimes it’s just not necessary - like an artist’s online portfolio. Other times, like with real estate listings on an agent’s website, it just makes sense.
When we were working on the recently-launched MichelleLuDo.com website, we thought about the nature of the audience that Michelle, a friendly and driven real estate sales agent, would be interacting with through her new website. What we discovered was that her clients were more traditional individuals and were likely to prefer print over web when it came to digesting information. Moreover, when you consider the steps an individual on a real estate agent’s website intuitively takes - browse a listing, find something interesting, copy the information down, visit the location - ensuring the website’s content was printer-friendly became a priority.
How to make a website printer-friendly
Making a website printer-friendly is actually quite simple. All it takes is two stylesheets - one to tell the browser how to display your website on the screen, and one to tell the printer how to print it out. You define which is which using the media attribute in the <link> tag that resides in your <head>. For example, here’s how MichelleLuDo.com’s stylesheet links generally look:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel=”stylesheet” href=”style-print.css” type=”text/css” media=”print” />
As you can see, we loaded 2 stylesheets and defined one as media="screen" and the other as media="print".
Once you’ve got the two stylesheets setup, it’s time to format them to your liking. Your print stylesheet should start by being identitcal to your screen stylesheet. Then begin hiding all the elements that you don’t want to show up in your print out using either display: none; or position: absolute; left: -9999px;. In most cases it’s best to use the latter method to hide elements as screen readers sometimes ignore display: none;. However, in this case, it shouldn’t make a difference.
Best practices for printer-friendly websites
Here are 5 best practices to follow when deciding how the print version of your website should appear:
- Strip all or most images.
- Remove background colors.
- Minimize and adjust text colors - use colors that will be easy to read on paper.
- Remove unecessary or irrelevant elements (such as links).
- Add necessary information such as the webpage’s URL or contact information.
Tip: Trading Places
Here’s a simple tip that will help you swap web content that is irrelevant or unfriendly for print with useful and printer friendlier content.
For example, here is the header image on MichelleLuDo.com:
In the printed version of the site we wanted to make sure that her name was still visible and that branding stayed in tact. However, printing this image would not be too friendly on the printer’s ink or on the overall aesthetics of the print out (since all other background colors will have been stripped). What we want to do is replace the header image above with this printer friendly header image in the printed version of the website:
So here’s how we do it:
HTML
<div id="header-image">
<span class=”normal”><a href=”/” title=”Michelle Lu-Do”><img src=”id.jpg” alt=”Michelle Lu-Do”></a></span>
<span class=”pf”><img src=”id_pf.jpg” alt=”Michelle Lu-Do”></span>
</div>
Screen Stylesheet
#header-image { padding-top: 40px; float: left; display: block; width: 530px; height: 41px; }
#header-image .normal { }
#header-image .pf { display: none; }
Note that the <span class="pf"> that wraps our printer-friendly header image (id_pf.jpg) is hidden using display: none;, while the <span class="normal"> that wraps our web-ready header image is displayed.
Print Stylesheet
#header-image { padding-top: 40px; float: left; display: block; width: 530px; height: 41px; }
#header-image .normal { display: none; }
#header-image .pf { }
Notice now that .normal and .pf have traded properties and now the ‘normal’ web-ready header image is hidden while the printer-friendly header image is displayed for the printer. Just like that, our printer-friendly image has traded places with the web-friendly image. You can use this hepful tip with any content on the page.
The final product
Here’s a live page from MichelleLuDo.com:
And here’s how the page prints out:
And there you have it, an accessible printer-friendly website.
Eric Hundin
February 14th, 2008 at 2:00 pmI found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you.
Eric Hundin
Michel
February 14th, 2008 at 4:39 pmAre screen readers looking into print stylesheets?
Verne
February 14th, 2008 at 4:50 pmThanks Eric, glad to have you here as a reader! I look forward to seeing you around in the comments!
Michel - No, I don’t think screen readers actually follow the stylesheet that you mark for print. In most other cases though, it’s good practice to simply use absolute positioning to “hide” your content. But as mentioned, it shouldn’t matter how you hide your content in your print stylesheet as screen readers won’t be using it to read your site (they’ll read the one marked as “screen”).
Great Articles Elsewhere: February 08 to February 15 – CSSnewbie
February 15th, 2008 at 3:01 am[…] Vdot Media - Make your website printer-friendly […]
Danny
February 15th, 2008 at 10:18 amYou have no idea how many times I have tried to implement this to the company website here at work. Despite my explanation and reason for doing this, I get the same ol’ tired response: “But it doesn’t look like what I see on screen. Is it different? I don’t like it!”
I tell them, “Users don’t need to print a navigation system, empty fill in fields and sidebars. When the user prints our website, they will only have what they want and that is the content/story itself.”…. Nope! They don’t go for that! Anyone out there hiring?!?! :)
Verne
February 15th, 2008 at 11:48 amAs you’ve experienced, Danny, sometimes even best practices need a little bit of explanation before being fully accepted. We’re the experts, so it lies in our hands to educate our clients why standards and accessibility matters to them.
Next time you speak to someone in your company about this, you can start by telling them how much printer toner you’re saving the company and their customers. :)
roScripts - Webmaster resources and websites
February 15th, 2008 at 12:15 pmVdot Media - Make your website printer-friendly…
Making your website printer friendly is an important aspect of making it accessible Here are some tips and best practices to follow to make your website printer friendly…
» Vdot Media - Make your website printer-friendly Webcreatives
March 1st, 2008 at 3:08 am[…] Vdot Media - Make your website printer-friendly […]
Dead Teddybears.com » Blog Archive » Make your website printer-friendly
April 11th, 2008 at 6:34 am[…] Read Full Entry Read More […]