AdSense Case Study: Basic CSS

First, let me thank Jeremy Schoemaker (aka Shoemoney) for mentioning that he just bought 5 copies of my book to distribute to friends and family. What a great idea, I hope others use my book as a stocking stuffer. Plus he could get several copies of a real book for the price of just one of those AdSense e-books you see advertised all over the place, so I'm sure he thought it was a great deal.

Anyhow, we're back to the AdSense case study that I've been working on with you over the past few weeks. We're now on Stage 4 of developing the Invisible Fence Guide, and our topic today is beautifying the site using CSS. I'm assuming you've already read my previous posting on this, Understanding CSS.

Now that you've got your content up and the site is organized, you want to work on making the pages look better. Note that “better” means different things to different people, but in general I'm talking about making a professional looking site that is both readable and leaves some room for the advertisements.

So before we get into specifics, let's talk about layout in general. If you've been reading at all about AdSense I'm sure you're familiar with this diagram:

This the famous AdSense “heatmap” released by Google in answer to AdSense publishers' questions about where they should place their ads. Ads in the darker-colored areas generally do better than ads in the lighter-colored areas. As you can see, the traditional spot for ads on the righthand side of the page (as you see on Google's own search results pages) is not a particularly good spot to place the ads, which may surprise some people.

That said, site readability is also important. Do you really want the ads to interfere with someone's viewing of your content? What's optimal according to the heatmap — and remember that the heatmap is a generalization — may not be optimal for your site, for a variety of reasons. So don't follow the heatmap blindly, experiment and see what works best for you and meets your overall goals (which are often more than just plain monetization) for the site.

So what about the layout? As it happens, most sites that use AdSense follow a fairly standard three-column format, with a navigational menu on one side, the content in the middle, and ads on the other side. Whether your show ads on the left or the right doesn't really matter to the layout, of course, either way you're talking about three columns.

Here's where things get tricky. You can use CSS to do three-column layouts, but there are all kinds of tricks and gotchas to it because of various issues with CSS support in all browsers. Doing a three-column layout with tables is trivial, of course, because you just define a table with (duh!) three columns. My personal site, which is so old and crusty I really haven't had the heart to redo it from scratch, uses tables extensively for its layout. That was before I found the “CSS religion”, so to speak. There's just something so elegant about using CSS and having a nice, simple HTML file that I really think you should stick it out and try to do the three-column layout with CSS, not with tables.

Luckily, you're not alone in your quest for three-column CSS layouts. I suggest you visit these sites to learn about the problems and to find templates to help you build your site:

• Creating Liquid Layouts with Negative Margins
• CSS Layouts
• Graywolf's CSS Template library

Some of you may find this all a bit overwhelming, but there are many tutorials available to explain this problem and the various fixes. Ultimately, the solution lies in better CSS support across all browsers. Things are much better in that respect than they were before.

We'll continue our discussion of layout shortly. In the meantime, take the time to visit those pages I mentioned above and learn about three-column layouts with CSS.

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. For more information, subscribe to his AdSense newsletter and get a free bonus AdSense traffic tip just for subscribing. Or add the book directly to your Amazon shopping cart for easy ordering!

Comments