Earning money from ads is not a “smack the ads on the blog” proposition. It takes time. It takes research. Hopefully, after reading this article, you’ll have a bit more information to help you milk the most out of your own Web sites.

If you’re familiar with AdSense, I suggest you skip down to the next section. For everyone else, let’s start with an intro.

##An intro to AdSense

As you can probably tell, I’m using Google AdSense for the ads in this blog. AdSense is great. Google mostly pays you by the click (and, on some image ads, by impression). Since the gross of your income is generated through clicks, AdSense ads should be tuned to generate the maximum amount of clicks with the impressions your site gets (this is called clickthrough rate).

###The recipe for a perfect ad

How can you tell which ads fare the best? You cannot, because you don’t get to pick which ads are displayed. However, what you can control is the ad format, color palette and placement in your site. Thus, key to generating the most clicks is to use the most appropriate palette, ad format and placement.

Notice how I didn’t say best, but most appropriate. Which colors, format and location depend exclusively upon the circumstances of your site. Can you fit a 200×180 ad in a certain spot? What palette should I use: contrasting (stands out) or blending (blends with your site)? Where on the page should I place the ads?

Fortunately, AdSense does publish some information about it. They tell you right away that:

• The integrated rectangle, 336×280 in size, is the ad that fares best.
• The best position to place the ad is smack mixed with the content.
• Palettes heavily depend on the palette of your site.
• Ads above the fold (on the first screenful of the page) fare dramatically better.

###Analyzing which ad fared best

Another thing you get with AdSense is personalized criteria. They are a bit like tags — you apply them on your ads, and AdSense performance reports can be grouped by them. In practice, this means that you can create a blue on white and a red on yellow ad, tag the first with blueonwhite, the second with redonyellow, and after a couple of days, see which one fared best.

The entire tuning process can be summarized in this image:

Now that you’re familiar with AdSense, let’s explore how to optimize ads for results.

##My criteria system for the past 2 months: fair, but not excellent

Two months ago, I decided I would deploy ads on this site using a set of criteria I thought would be optimal. I’d tag my ads using criteria based on these four ad attributes:

1. ad format
2. color scheme / palette
3. type of page
4. position in page

Dumb move on my part. As it turns out, this criteria system just didn’t give me enough information. It just gave me aggregates.

For example, I could tell which color scheme or ad format gave me great clickthrough, but I couldn’t consistently tell if this clickthrough was due to the position of the ad, the type of page where the ads were displayed, or the format. In other words, each criteria aggregated a number of unrelated ad impressions.

Alas, it did yield me valuable information. The ad that gave me the most income (82%) was definitely the one embedded in article content — the first ad you see when you visit an article. I actually expected this, because this ad is entirely above the fold.

Knowing that this ad was a red/black on white 336×280 large rectangle, it was a good starting point. With so many variables to track, it was rather fortunate to find that a single one determined my income so strongly. Having pinned down the most performant ad position, I used this knowledge as a starting point for my next experiment.

##Experiment X: make six variants, keep the best

To perform an accurate experiment, you need to keep constant as many variables as you can. Once I knew for a fact what the best-performing ad position was, it was time to start paring down three other variables: alignment, format and palette.

###Guaranteeing unbiased data

I didn’t want results to be skewed, so, in the name of science, I decided to forsake a few bucks. So, using the AdSense Deluxe plugin bundled in my Turbocharged blogging system, I turned ads off for the entire blog. Since my theme embeds ads through the AdSense Deluxe plugin, I did not have to touch a single line of code.

###Generating and tagging the ads

Then, using the AdSense ad creation tool and a bit of CSS (stylesheets) magic, I generated six versions of the base ad. This graph summarizes how I generated the new versions:

The criteria system I used was derived from my old one:

1. Type: always article above content. Combines the fact that these ads appear only on articles (not on static pages, or archive sections), and they are located above the content.
2. Format:
   1. 336×280
   2. 300×250
3. Palette:
   1. R3.0 standard red/black on white
   2. R3.0 with green titles
   3. R3.0 with green borders
4. Code: each ad would have a tag named after the same AdSense Deluxe code, so I can track performance per-ad, on each variant.

After generating the six versions, I saved each one of them in a new AdSense Deluxe slot each.

###Rotating the ads

The whole point of the experiment is to give each ad equal exposure. So I wanted each ad to be rotated fairly, in a equally random fashion. Accomplishing rotation wasn’t difficult, but it did require some coding. My template includes the ad by calling a function:

<?php theme_ad("article_abovecontent"); ?>

I just changed it to:

<?php theme_ad("article_abovecontent_".rand(1,6)); ?>

to have PHP rotate between the different blocks

###Scheduling the next doctor’s appointment

You know how doctors say take two of these, come back and see me in the morning? Well, after doing all of this legwork I scheduled a checkup on my Palm T|X in 8 days. I’m fully on the wait stage now.
Why 8 days? Well:

• I want to have 7 full days of data.
• The amount of clicks I get daily (25~50 clicks) lends itself to fair statistical accuracy after 7 days of data collection.
• Okay, strike the last reason — just say I’m impatient.

What I’ll be looking for in the analysis is simple. I want to identify the winning ad, using the code criteria I defined. That way, I can restart the testing process with variants of that same ad.

##Conclusions

Tuning AdSense is a laborious and repetitive process, but it has its rewards. While laborious, it can be done, as long as you follow a methodical, scientific process.

The right approach to doing AdSense tuning is that you’re investing in a steady source of income; it’s not like earning two glasses of water instead of one — it’s like changing an 1-inch water pipe for a 2-incher. If you have a popular blog, it certainly pays off.

Come back in 8 days and read me again — I’ll be writing about the results of this experiment.

Fruits of hard labor, long planning and reasoning have brought this change to you.

This site is now using a fully original WordPress theme I like to call Magazine. The name? Oh, yeah, the whole site revolves around sections, and you’re encouraged to browse the site in that way. It’s more a magazine than a blog.

##Why the change?

The idea behind the monumental change is to encourage stickiness (people reading a large amount of articles). If you find an article on a topic you dig, chances are, you’ll want to read more on that topic. The site is geared to enable that. You can also subscribe to feeds per-category, so you don’t need to read junk you’re not interested into.

##Details, details, details… that’s where the devil is

Quick lowdown on the changes (because I have to run):

- Obviously, the visual layout is completely different. It responds gracefully to the new concept (magazine-like layouts)
- Excerpts are everywhere on the archive pages. With a glance, you can identify what you want to read the most.
- Navigational aids are everywhere. Everything is much more heavily hyperlinked than before.
- The palette and the design! You no longer need to watch me while reading this site ;-).
- Everywhere is the concept of “popular articles”, so you can get a quick look at what’s hot on this site, and ask for more with a single click.
- Less clutter. Less popular elements were removed entirely from the design, and only the essentials are left.
- Sociability! All posts are social-bookmarking enabled, Digg-enabled. They’re also e-mailable after a single click and a destination e-mail address.
- Readability: the typefaces are bigger, and more elegant (you may not enjoy it fully if you don’t have the Gill Sans font installed). All fonts are scalable (except for header fonts).

##IE6 is dead. Long live… uhh, Firefox?

This theme was designed entirely using Firefox, and screened for consistency on Konqueror.

Since it uses advanced layout techniques which work only on compliant browsers, some pages may not lay out correctly with Microsoft Internet Explorer 6 or older. You will be able to read them, but you won’t appreciate the entire design.

If you’re using IE6, switch to a standards-compliant browser. Because no features incompatible with IE7 were exercisedm hopefully IE7 will render this theme properly.

##Final musings

It’s a brand-new theme, built from the ground up, and designed to make you crave this site. Is it working already? I sincerely hope you like it.

Love is in the air… Love is in the-e air…

Esta foto preliminar ilustra el progreso hecho en tres días de esfuerzo. Por supuesto, este ejemplo no es funcional porque aún no he programado. Sin embargo, lo que ven es un preliminar verdadero — no es un dibujo sino una página HTML en el navegador. Por cierto, hice los dibujos originales usando Inkscape, un fabuloso programa de dibujo vectorial para Linux.

Mencioné que todos los pasos de este proceso se ejecutan únicamente con software libre?

##The front page

Así se ve la página frontal en este momento. Haz clic en la imagen para verla en mayor tamaño.

###Lo que se ve

Noten que:

- el nuevo logo tiene un look Web 2.0
- se usan pocas tipografías: Verdana y Gill Sans. Gill Sans le da un extra “Web 2.0″; como pocas personas tienen esa tipografía instalada, las tipografías se cargan automáticamente vía estilos
- el artículo más reciente está prominentemente dispuesto y es fácil de distinguir
- la página muestra automáticamente contenidos populares de la sección correspondiente al artículo más reciente
- el tema presenta enlaces a los artículos recientes y relacionados en listas fáciles de identificar
- la barra lateral (a la que le falta un cuadro de publicidad) es limpia y fácil de leer
- el contenido más importante está en el primer pantallazo del navegador
- la navegación (búsqueda, migas de pan y páginas) están en la cabecera y son accesibles

Del segundo pantallazo hacia abajo aparecen más artículos bajo el título “Más noticias y artículos”. Este área contiene una lista de artículos recientes y populares de cada sección, y las secciones listadas están ordenadas en el tradicional orden inverso cronológico.

###Lo que no se ve — o la importancia de los estándares Web

- todos los estilos de enlaces funcionan correctamente — los enlaces apuntados o enfocados se iluminan, y los enlaces visitados se distinguen visualmente de los no visitados
- el texto se puede redimensionar con los controles del navegador — la única parte que sufre problemas es la barra superior de navegación: se oculta parcialmente con tipografías muy grandes
- el sitio es completamente funcional con las hojas de estilo apagadas
- la diagramación es correcta y fluida en cualquier resolución — hasta 640×480 — y ya estoy trabajando en estilos para PDAs y computadoras de bolsillo
- los estilos de impresión están implementados, y estos automáticamente ocultan partes innecesarias para ofrecer impresiones rápidas y baratas
- el contenido es el rey, y recibe una posición ventajosa en la fuente HTML
- no se usa JavaScript — un par de extras basados en JS aparecerán más tarde, pero no serán requeridos
- sin Flash, y a pesar de eso, hip y elegante
- el sitio se ve correctamente en Firefox y Konqueror (y eso a pesar de que Konqueror agranda las tipografías un poco); esto significa que también se verá bien on Safari en computadores Apple
-aún no he probado el sitio en IE7; sin embargo, sospecho que se verá correctamente, porque he evitado usos problemáticos de CSS en IE7; IE6 simplemente no recibirá ninguna consideración

Estas cosas no son caprichos míos. Tampoco son coincidencias afortunadas. Supe, desde el principio, que el nuevo sitio tendría que acogerse a estas características. Mi expectativa es que tendré visitantes discapacitados y usuarios móviles. Y, finalmente, la forma en la que el contenido se presenta responde fielmente a los requerimientos que establecí en el artículo anterior sobre la revista.

Sin exagerar, puedo decir que esto significa una cosa: es posible construir sitios Web efectivos con tecnologías sencillas y observando las normas públicas de la Web. Por eso pregunto: ¿por qué la gente insiste en complicarse la vida y falta a los estándares? Sospecho seriamente que es porque la mayor parte de “diseñadores Web” es gente poco seria y vaga que prefiere seguir construyendo sitios Web con código “espagueti” sin “desperdiciar” tiempo en conocer las herramientas de su propio oficio.

##Conclusiones

Sé que no soy un genio del diseño, pero creo que sí “la muevo”. ¿Qué piensas tú?

These mockups illustrate the progress made in three days’ work. None of them are functional because no code has been written. However, I’ve already translated the graphical mockups into HTML — you can clearly guess that from the top strip. I made the original mockups using Inkscape, a remarkable SVG vector drawing program for Linux.

Did I mention every step on this series is executed using only Free Software?

##The front page

Here’s how the front page looks like, right now. Click the thumbnail to see it in larger size.

###Layout explanation

Notice that:

- the logo is now Web 2.0ish
- the font selection is quite spartan: Verdana and Gill Sans; Gill Sans lends the site an extra “Web 2.oomph”; since few people have Gill Sans, on browsers that support TrueType autoloading (none right now) it’s loaded via stylesheets
- the most recent article is featured prominently and easily distinguishable
- popular content from the recent article’s section is automatically featured as well
- leads to related articles are presented in easy-to-scan lists
- the sidebar (which lacks one ad) tries to be clear and easy to scan
- important content is completely above the fold (the visible area before scrolling down)
- the navigation (search, breadcrumb trail and pages) are on the top page, easily accessible

Mostly below the fold is a “More news and articles” tile. This tile contains a list of recent and popular articles from each section, ordered in reverse chronological fashion according to which section saw the last post.

###Things you can’t tell from the mockup — or, the importance of Web standards

- all link styles are working correctly — tabbing or hovering into a link will light it up, and visited links are visually distinguished from new links
- the text is (almost) fully scalable using your browser’ controls — however, the top navigation suffers from hidden content at very large font sizes
- the site is fully functional with style sheets off
- the site lays out properly and fluidly at any resolution — up to 640×480 — and PDA and handheld computers are in the works
- print styles are already implemented, and they strip unnecessary output for fast and cheap printing
- content is king and receives an advantageous position in the HTML source
- no JavaScript is necessary or even used on the site; I will add some, though, because it’ll help ease things for capable readers
- no Flash, yet still elegant and hip!
- the site lays out properly on both Firefox and Konqueror (though Konq enlarges the fonts a bit); this means that the site will lay out properly on Mac Safari as well
- I haven’t tested the mockup on IE7; however, I’m nearly certain it’ll work well, because I’ve avoided IE7 gotchas; IE6 is out for me anyway

These points aren’t just capricious whims of mine. They aren’t a serendipitous coincidence either. I knew, from the start, that the site would need these features. I expect disabled visitors and people with mobile computers to access the site. And, finally, the site has been laid out that way to slavishly serve the goals mentioned on yesterday’s issue.

At the very least, this means people can build effective Web sites without resorting to complicated technologies or straying from Web standards. So why don’t they? I seriously think it’s because most Web designers out there are lazy bums who’d rather keep churning out spaghetti code without actually learning their toolset.

##The wrapup

I’m no design wizard, but I think I get by. What do you think?

To appease your thirst, let me point out what I’ve been doing lately.

For those of you who haven’t been following this series: I’d like to explain something first. As part of my Web property reengineering, this site will be converted into a magazine (update: the conversion is done). That’s right, a Web magazine, with sections. I write about various subjects; a magazine with sections is the perfect venue to cater to my readers.

If you want to discover why, then just keep reading.

##Why automation?

If you’re running a single Web site or blog, it makes little sense to automate tasks, since 99% of your maintenance tasks will be ad-hoc. But that’s not my case.

I run three Web sites, two of them WordPress-based. In my scenario, WordPress upgrades and enhancements come in pairs. My sites demand an assortment of more than 100 plugins and themes, so those need to be upgraded as well.

I also sell a customized WordPress package, called Turbocharged. Remember the 100 plugins and themes? Well, every so often I do a new release of Turbocharged, which is almost exactly what powers my Web sites.

As you may have guessed, releasing such a huge package is is a time-consuming process! Combined with upgrading my own sites to the latest edition of Turbocharged, it often takes the better part of a day. And doing it manually is not an option, especially since my Web assets are expected to grow in the future.

Ideally, I’d like upgrades and enhancements to:

- be a 10-second process I can run on my Web server: saving a day, even if it’s just to squander it in drinks and clubbing with my buddies, is worthwhile. Less time spent in operations, more time for creativity and long-term progress.
- take advantage of my already-existing Subversion repositories: that way, I can make quick fixes on my Web server, and have the changes transparently imported into my development computer, and the other way around. Turbocharged customers also benefit from this, because I run a bleeding edge Turbocharged copy on each of my sites.
- be error-proof: if something fails, I want to know why it failed. If a file changes, I’d like to know when, in what way and why. I simply can’t take any downtime.

Can this be done? The answer is yes. I know it because I just invested six hours to make it happen.

And you can do it too. Be forewarned: this guide requires learning about new software.

##I hate big projects

The last time I got involved in a big project was in college, so I was naturally out of touch with project planning and management. Furthermore, all the paraphernalia that my team used to plan that big project is:

1. Way stressful for me.
2. Just not needed, since I’m a one-man show. Sure, I may have Subversion, a Palm T|X, Evolution and friends on my side, but I’m still a one-man show, which rules out heavy project management methodologies.

But neither Tomboy nor KWrite could cut a cake so big. Ordinary outliners forced me to think top-down (and I’m a naturally anarchic person), which is like trying to feed me a sandwich made out of crap. Imendio Planner is decidedly too heavyweight and data entry in Planner is also quite cumbersome. I was chock-full of text files with random notes, and no way to organize them. The feelings of dread and preemptive stress were taking their toll on me.

##Could mind mapping help me plan and undertake this huge project?

What I needed was a tool that would let me map my ideas, so I could concentrate on making them happen. A mind mapping tool.

I went out for a short forage into the Wild Wild Web, and after a couple of Google searches, I found three:

- Labyrinth (too inmature and in need of manual “compilation” and installation)
- FreeMind (threw up exceptions like a comatose drunk person)
- KDissert

And KDissert had to cut it, because it was the only one I could install using smart. I quickly installed it and discovered, much to my chagrin, that KDissert was definitely not a mind-mapping tool, but a graphical outliner. I mumbled What the heck, I’ll try it for a couple of minutes, see if it’s useful, and started using it.

##The bliss of KDissert

Oh, my God (and I’m an atheist), KDissert was bliss. I started pouring out ideas and sub-ideas, quickly connecting them. You see, the key to a good software tool is its ease of use, and KDissert really shines in that:

- To create a new idea (a square): just double-click on the canvas.
- To fill the idea with text: hit ENTER, then type, then hit ENTER again.
- To connect the idea to another one: click the Link pages tool, and drag from the parent idea into the child one. You don’t even need to click — convenient hotkeys let you switch instantly among the four tools (select, pan, connect, reorganize).

Let me emphasize, one more time, that KDissert is not a mind-mapping tool. It’s used to create a tree of texts, edit text in them, and consolidate them into a text document. Its primary use is building dissertations and presentations. You cannot connect an idea to two different ideas. But, for me, that was good enough — as long as the rectangular boxes can contain the gist of my idea, and they can be interconnected, even if only by hierarchy, it’s good enough.

##Good-bye text, hello mind map

In fact, it’s fantastic. I frantically consolidated more than twelve long text documents with random ideas collected over time, while at the same time creating the hierarchy and adding new sub-ideas I came up with. Just the fact that I could visualize the ideas in a map served me to quickly organize my master plan. Forty-five minutes later, I had a fairly complete map, and no remaining text files.

Lo and behold, what once was a project of unimaginable complexity and chock-full of tech details which seemed to clash between each other, became a (fairly large, yet) simple and procedural project where everything was not only surmountable, but I could visualize it in one fell swoop.

##Does a computer program make the difference?

All of this because I finally faced my limitations, and recognized that the problem was just too big to fit in my head, The stress of planning was gone. Gone were the long monologues and the chain-smoking associated with it. No more walks in circles, mumbling things. Just inner peace. I finally accomplished what took me weeks of deliberation.

##Here’s the map, take 1

And I’ve got proof, in full open source fashion. Here it is, as a thumbnail (which links to a smallish PDF file):

## A few notes about the map

You’ll quickly notice that the ideas are a few words’ length, and that I’ve interspersed Spanish and English. This is on purpose. I don’t want to spend more time in the map, because:

1. I already know how best to put each idea in practice. All I need is a quick note to remind me of the task. I don’t need no tidiness or bureaucracy. I’m a cowboy, in Extreme Programming parlance.
2. I still haven’t finished the map, and I plan to shamelessly change the map as I go, trimming the “tree” and making new additions in underspecified branches.
3. Why would I want to overspecify so early? I like to keep my options open. Did I mention I have commitment issues?

In other words: because I’m a one-man show, and I do whatever I damn well want.

##My KDissert wishlist

Now, my dearest wish related to KDissert. Have you seen those modern word processors where several people work simultaneously on the same document, and the text they type appears on everybody’s screen? Imagine that, applied to KDissert.

Teams could quickly assemble a master plan that would cater to everybody (or the majority, at the very least). All sorts of documents could be assembled, created from scratch or refactored, without having to pass the document around, or to collate each piece in a final document.

This should, of course, be coupled with a way to mark ideas in “dispute” or “discussion”, where each discussion is an editable pop-up like Microsoft Word’s notes, but each discussion could be argued in real time.

KDissert also needs a search feature badly. Think search as you type like Firefox. My map has grown to the point where I can’t find stuff because of its sheer size. I have to navigate the map using my eyes, which is fine when executing tasks, but decidedly not fine when you want to enter new ideas. The outline view is fine, but plain search would be faster.

Full screen mode would be fantastic. All KDE apps seem to have it. Why not KDissert?

Finally, I wish there were a way to create a “doodle” box where I could actually draw with my mouse or tablet. That feature would really go a long way.

##Here ends the first step of my journey

OK, that wraps it up. I’ll continue reporting from the trenches, giving you juicy updates about this wonderful (and seemingly endless journey).

Everyone who knows a bit about me knows that:

- I have this blog. I’ve been wanting to redesign it and turn it into a magazine, with different sections for each group in my audience.
- I sell free software. Since sales haven’t been so great, I urgently need a new strategy.

Today is the day I begin leveraging what I’ve already done into making me more money and recognition. Bear with me if I sound smug, but I know I can do it, and I definitely want to do it.

But I almost didn’t do it. When I came up with the idea, everything seemed so rosy: I’ll just move some stuff around, refactor some code, redeploy it, change a few images, a new marketing strategy… and the cascade of things I had to do simply overwhelmed me. I was overwhelmed at the prospect of slaving for weeks and not getting anywhere or (worse), failing.

##Stress got the best of me

Why? Because I came up with so much to do, in order to do it “right”, that I simply avoided commitment. I became paralyzed.

Fortunately, that’s over. And in the next installment of this series I’ll share with you my secret that got me out of the proverbial mental wheelchair. But let’s procrastinate that for a couple of days. Let’s talk about the challenge.

##Barriers overcome — all systems are go, and here’s the challenge

I’ve dubbed the challenge The R Network. It’s quite simple, actually:

- reorganize my Web sites (rudd-o.com, turbochargedcms.com, and software-libre.rudd-o.com) in a manner that boosts my Web presence, attracts more visitors, generates more faithful and thankful readership, and extracts more money out of my software products and advertising spaces, without doing distasteful or unethical things
- maintain all the hard-working status and acknowledgements I’ve gathered so far (which mainly come in the form of inbound hyperlinks)
- turn software-libre.rudd-o.com into an independent location for a free software think tank, and ensure it’s available in (at least) Spanish, English, and German; more information will come in the form of master’s thesis from close friends in the free software field
- create a brand new Web site that aggregates my friends’ most valued and interesting Web assets
- create an umbrella site that both aggregates my sites in overview fashion, and serves as a presentation/promotion center for them
- do it all with nothing but free software

Some challenge, huh? Of course, I have no other limitations, except for only three daily hours of time to do it, and the free software thing. But why free software?

##The free software thing

Simple. I wrote my entire thesis using almost nothing but free software (and I even ended up writing a program to help me). Now, this challenge is more technically oriented. Hence, there’s a lot of free software available in my area (which is, mainly, software engineering). And I love free software. Why would I choose to not use it?

##And here’s why you should follow this series closely

As a testament to you, my reader, I will document each step of the process, in possibly excruciating detail, so you can apply what I’ve learned (and we’ll learn even more, I promise) on your own endeavors of life. You’ll be learning about project planning and execution. You’ll learn about software development practices and computer programming. You’ll learn about server management. You’ll learn about blogging. You’ll probably learn a bit about marketing, Web promotion and graphical design. And I’ll learn (among other things) to be a better writer.

Thanks for sticking with me. Let the journey begin.