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.
