How to prevent ads from printing
Right now I'm following my own advice and setting up yet another site, this time a questions and answers site. I've been spending some of my spare time playing around with the look and management of site, so there's no real content on it yet. But it's a good opener for discussing a topic that's sometimes neglected by website owners: printing.
When you're building a content site, you spend a lot of time worrying about the layout of the content. As an AdSense publisher, you try to find the right balance between placing ads so that they're noticed while not getting in the way of the visitor who is trying to read the content. So you spend a lot of time staring at the screen and trying to see how the pages will look in different browsers (I always try Firefox, Opera and Internet Explorer) and at different screen resolutions. (See Graywolf's website design and layout series for more on this.)
But what about the people who like to print pages for later reading? Have you considered them? This is a constant problem I run into — I'll print a page I like only to discover that because they used wide, fixed-width tables to layout the content that the right side of the sentences are cropped off, making them very hard to read. Truly annoying.
AdSense sites have another problem, though, that can further hinder the printability of a page: the ads themselves! Let's face it, printing a page full of AdSense ads is pretty useless in most cases. You're not going to make any money from them when they're printed, so why even bother displaying them when the page is printed?
Luckily, it's almost trivial to hide ads when a page is being printed. All you need is a little CSS (cascading style sheet) magic. Let's look at how it's done on cluelessabout.com.
Most sites use external style sheets to control the look of their pages. So in the <head> part of the my pages you see this kind of statement:
<link rel="stylesheet" type="text/css" href="screen.css">
This tells the browser to use the stylesheet screen.css. By default, it gets loaded for all page loads. But there's a way to specify that styles should only be loaded for certain media types, or ways of viewing the page. A media type is just a name like “screen” or “print” that the software used to load a page identifies with. This means you can define CSS styles that are only used when printing, simply by adding a media property to the link tag:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Rather than create a whole new stylesheet, though, we're just going to define what's called an inline style:
<style type="text/css" media="print">
.noprint { display: none; }
</style>
What this does is define a CSS class (because it starts with a period) called “noprint” that does nothing except turn the CSS property called “display” off. A tag with its display property turned off is effectively invisible.
So here's how we use this. Take your AdSense code and wrap it with a <div> tag:
<div> .... put your AdSense code here </div>
Now set the class attribute of the tag to “noprint”:
<div class="noprint"> .... put your AdSense code here </div>
If you already had a <div> wrapping the ad code and it already had a class defined, just add the “noprint” class:
<div class="myotherclass noprint"> .... put your AdSense code here </div>
And that's it! When the AdSense code is displayed on a screen, nothing changes because the “noprint” class is only defined for the “print” media type. When printed, though, the “noprint” class does exist and it turns off the display of the <div> tag and everything it contains, which means that the ads are invisible… and if you design your pages properly the other content should fill in the space otherwise taken by the ads, which makes for a better printing experience.
Try it with the cluessabout.com about page: view it normally, then use your browser's “print preview” function. You should see the ads disappear and the text of the page move over to the left. Very easy to do, though not everyone (including me!) remembers to do it. But anyone who tried to print your pages will thank you for doing it…
Eric Giguere is the AdSense expert who wrote Make Easy Money with Google and the new e-book Uncommon AdSense.
 |
Enjoyed this post? Get free updates by mail or by RSS! |