AdSense Case Study: Captioning pictures with CSS
Although I promised I'd talk more about page layout for my AdSense case study, I'm going to defer the general discussion and focus in on one specific topic: creating captioned pictures using CSS. It isn't nearly as easy as you'd think, unfortunately, because of bugs with Internet Explorer. (Purists would argue that you should ignore IE and its poor implementation of Web standards, but from a pragmatic viewpoint you want your site to look well enough to IE users because they are still the dominant part of the market and a large part of your revenue stream.)
Take a look at the pages in Stage 4 of the Invisible Fence Guide. If you've been following along with the case study, you'll remember that I added pictures to each page as part of Stage 3. Immediately below each picture was a short caption, which may or may not have been obvious to you because there was no real way to distinguish the caption from the surrounding text. So one of the goals of our CSS work in Stage 4 was to make the captions look like, well, captions.
In a perfect world, this wouldn't be very hard. All you do is wrap the image and the caption with a <div> tag to which you assign a CSS class, like so:
<div class="figure"> <img src="/someimage.jpg" border="0" width="480" height="360"> <p>This is the caption</p> </div>
Then in your CSS style sheet you'd define styles like this:
.figure {
background-color: #666666;
margin: 5px;
float: none;
padding: 2px;
min-width: 484px;
}
.figure img {
margin-bottom: 0;
}
.figure p {
color: white;
text-align: center;
font-size: 80%;
margin: 0px;
}
What does this do? Well, it gives the <div> a dark grey background with a small margin and an even smaller bit of padding. The <img> inside the div gets its bottom margin set to 0 while the <p> inside the div gets its color set to white, a smaller font, and centered text. Simple stuff, the end result is that the image and the caption get put into a simple grey box and move together on the page as the page reformats itself.
The key to making it work, of course, is the min-width property, which says that the width of the <div> shouldn't go any smaller than the size of the image plus the padding. This avoids some really bad reformatting of the middle column when the user resizes the page. (It's not pretty, trust me.)
Unfortunately, Internet Explorer doesn't support min-width, one of the many bugs in its implementation of CSS. I scratched my head on this one for a while, but I found the solution after an extensive Google search: the minmax.js script by Andrew Clover. This is a hunk of JavaScript code that you insert into your page. When the page is loaded by Internet Explorer, the script goes and replaces all the min-width (and min-height) properties on the page with an IE-only equivalent that mostly works in all versions of IE. Truly a hack, but one that works well enough.
To run this script, you just copy the minmax.js file onto your web server and add the following statement at the bottom of the HTML file:
<script type="text/javascript" src="minmax.js"></script>
I only made one change to this. Although the script doesn't actually run if loaded by a non-IE browser (it checks the browser type), I thought it wasteful to load the script if it isn't actually needed. So I used a “feature” of IE called conditional comments to wrap the <script> tag so only IE sees it:
<!--[if IE]> <script type="text/javascript" src="minmax.js"></script> <![endif]-->
Kind of a messy solution, that's for sure, but I ended up with what I wanted on the big three browsers I use (Firefox, Opera and IE). Which brings me another point: always test your site with another browser, preferably 2 or 3 different browsers. You can't test the site with all browsers, of course, but try to get it looking good with more than just your usual browser.
Did I say CSS was easy? What was I thinking! 
Eric Giguere is the author of Make Easy Money with Google, a real (printed!) introductory AdSense book for non-technical people, available at all fine bookstores. Be sure to download the free sample chapter for more information about the book. Or add it directly to your Amazon shopping cart!
Extending RSS to support monetization
Steve Rubel observes that it's only a matter of time before Web-based news aggregators wrap content with text ads. Actually, I'm surprised that hasn't happened already. (Well, it has in some sense: many, many splogs these days are built by taking RSS feeds and wrapping them with ads. But that's different.)
As I've mentioned before, monetization of syndicated content poses an interesting conundrum for AdSense publishers. From all accounts, the ads inserted in feeds by programs like AdSense for feeds don't make a lot of money; the best way to make money is still by getting people to visit your site. So you offer truncated feeds in the hope that the article summaries will entice people to hop over to read the full articles. You end up making a trade-off between readership and earnings.
Perhaps what we need to do is to extend syndication formats like RSS and Atom to support monetization. It could be as simple, for example, as embedding your AdSense publisher ID in the feed. The news reader would grab the ID and use it to show ads using some kind of revenue-sharing model — say half the ads would have the news reader's ID, half would have the feed's. There is precedent for this already, of course. Registered members of the DigitalPoint forums can already participate in a revenue sharing program. This isn't against the AdSense terms and conditions as of yet, though there are some potentially prickly issues with letting someone else use your publisher ID on a site that you don't control.
Of course, the readers from the Big Three (Google, Yahoo and MSN) would potentially benefit the most because they could allow feeds to keep all the revenue made from displaying ads served from their own ad programs — because they make money from the ad clicks no matter what. This would give publishers added incentive to recommend those readers to their visitors. I can even see sites serving up different versions of their feeds to the different crawlers — like the full version to the GYM crawlers and the truncated version to other crawlers.
It should be interesting to see how this develops.
Reminder: today's the last day to sign up for my new AdSense newsletter and be entered into the November draw for a signed copy of my wonderful (ahem) book.
Eric Giguere is the author of Make Easy Money with Google, a real (printed!) introductory AdSense book for non-technical people, available at all fine bookstores. Be sure to download the free sample chapter for more information about the book. Or add it directly to your Amazon shopping cart!
Subscribe to my AdSense newsletter and win!
Tomorrow is November 30, and it's your last chance to sign up for my AdSense newsletter (“Make Easy Money with Google and AdSense” is its title) and get a chance at winning a signed copy of the book. (Or, if you'd prefer, you can have a signed copy of one of my other books… but they're very techie, unlike Make Easy Money with Google.) All you have to do is subscribe. Plus, as mentioned before, subscribers also get a free AdSense traffic tip sent to them by mail a day after they sign up. Well worth your while… One of my subscribers just sent me mail: “Thanks for this very useful tip…. at the end will benefit us.”
Sign up now, because there are only about 50 verified email addresses on the list so far — I lost a lot of addresses when I switched to the new mailing list provider, as I expected. So your chances are pretty good. (And if you did sign up but didn't confirm your subscription by responding to the email from AWeber.com, please not that I'll only be including verified names in the draw, so you need to verify your subscription before December 1 to be eligible.)
If you have the chance, check out the latest version of the Invisible Fence Guide, which now has a complete CSS-based layout. I've even thrown in some Chitika ads. I'll be writing about the whole design in detail tomorrow, though I still have some tweaks to do. This, of course, is part of an ongoing AdSense case study I'm running.
Eric Giguere is the author of Make Easy Money with Google, a real (printed!) introductory AdSense book for non-technical people, available at all fine bookstores. Be sure to download the free sample chapter for more information about the book. Or add it directly to your Amazon shopping cart!