The Magic Triangle

On an English language blog, the top left-hand side of a page is proven both statistically and with usability studies using sophisticated eye-tracking software to be the primary real-estate on a website, the place that most often draws attention for a reader.

Define An Action

Your task as a blogger is to decide what action you want your first-time visitors to take, and to maximise the conversion rate for that specific action.

Your defined action could be a number of things:-

• Click through to read a full article
• Click on a PPC Advert
• Subscribe to your newsletter
• Subscribe to your blog
• Buy your product or contact you for other services

My primary goal for this blog has always been – Subscribe to blog – every other option doesn’t matter to me for my long-term goals.
Thus I have always tried to differentiate my prominently positioned sign-up area and have tested various options, and have just introduced an new variation.

Evolution

My subscription options have evolved somewhat over time from when I first launched this site almost 7 months ago (yeah it is that long now).

This is how I started off:-

That screenshot is a little small, but you can probably see that there were 2 boxes that contained RSS and email subscription options. It was taking up a full 300 pixels at the top of every page.

Further progress:-

This version was based upon the code distributed on Ifeedreader and the Online Marketing Blog and used mouse-over on the RSS icon to activate a drop-down list of icons.
I experienced a few problems having all the icons in a long list, so I defined a width for the unordered list, and then floated the list items inside it to make 2 columns.
I never managed to get it displaying exactly the same on Firefox and Internet Explorer.

Some people certainly liked it, because I received a number of emails from people wanting to use the code, and quite a few people clicked through on the link to the original site.

Subscription Option Version 3

I have just switched over to version 3 of my subscription options, and I hope you like it.

It combines a number of both cool visual and technical elements, which I am sure are going to raise some questions, hence the need to write this article.

Graphics Part 1

I started off with the Web 2.0 graphics set from Utombox which gave me some pixels to play around with. The middle button started off as the standard white Feedburner button, and the black email button started off as the Del.icio.us button.

Graphics Part 2 – Feedburner API Conflagration

Conflagration is a cool server side script that works with the FeedBurner API (you need to switch the API on inside Feedburner) to return the current number of subscribers, combine it with a font and graphic, and turn the whole thing into a custom feed counter. It is still in beta so there might be a few bugs, but it seems to work.

Combining my graphic to work with conflagration, and to get the feed count positioned correctly was actually the easiest task.

Click Toggle Sliding Div

I played around with code from various places to get things working the way I wanted. The first code I referenced was from Harry Maugin’s tutorials on animated divs although I actually ended up just downloading the version of the code Brad from Solarblaze mentioned in the comments, and tinkering with it a little.

Michel Fortin’s post on Interactive Sales Letters is also a useful guide, and helped me a little with debugging something that wasn’t working exactly how I wanted.

Download?

Currently I won’t be packaging it all up for everyone to just implement in 5 minutes for a number of reasons.

• None of the code and graphics used had specific licenses allowing me to redistribute
• The graphics were created with rough pixel pushing rather than nicely rendered. I am sure they could be improved upon
• Conflagration is in beta
• I like having something unique on my pages ;)
• I would love to see people use some imagination in creating their own personal look and feel (so I can steal their ideas of course)
• It is untested – I might get lower conversion and need to tweak it some more

Remember – it is not just how much traffic you receive on a daily basis, but what you do to maximise your conversion rate on that traffic, whatever your defined goal.
Don’t forget to test and track.

The intent is that you can tell Yahoo which content not to index, such as adverts and links to navigation and legal elements that are nothing to do with the content you want to rank for.

It has already been stated that this has no effect on link equity. If you don’t want links to count, you have to still use rel=”nofollow”

From the Yahoo Blog

I can think of lots of nefarious ways this can be used

• class=”this-is-what-the-user-really-sees”
• class=”this-is-my-ripped-off-content”
• class=”these-are-my-p0rn-ads”
• class=”I-am-not-a-thin-affiliate-really”

Just as casual internet users are almost totally unaware of the rel=”nofollow” attribute for links, it will take a long time before there is any awareness about Robots-Nocontent

Here is what some of the HTML I used above looks like

<ul class="robots-nocontent">
	<li>class="this-is-what-the-user-really-sees"</li>
	<li>class="this-is-my-ripped-off-content"</li>
	<li>class="these-are-my-p0rn-ads"</li>
	<li>class="I-am-not-a-thin-affiliate-really"</li>
</ul>

You see normal web visitors will get to see everything, and search engines whilst they might cache the whole document, the marked sections won’t affect rankings, good or bad.

There are certain internet industries that will no doubt love this new feature. Sure there are other ways around this such as using graphics, but I haven’t explored every possibility.

How To Display The Robots-Nocontent Hidden CSS Class

1. Go to and Install the Chrone Edit Plus Firefox Extension
2. Restart Firefox
3. Go to Tools->ChromeEdit Plus->ChromEdit. Select the userContent.css tab and paste the following code in plain text

a[rel~="nofollow"] {
  border: thin dashed firebrick ! important;
  background-color: rgb(255, 200, 200) ! important;
}

.robots-nocontent {
  border: thin dashed firebrick ! important;
  background-color: rgb(200, 255, 200) ! important;
}

The first part of this CSS is the original from Matt Cutts to highlight Nofollow links with a pink background.
The second part of the CSS highlights content with the Robots-Nocontent class applied

It is highly likely that this functionality will also be added to well known Firefox plugins such as Search Status and SEO for Firefox.

Danny Sullivan as usual has a good writeup on Robots-Nocontent.
Threadwatch has a slightly different perspective.

Also check out:- Andy Beal, WebProNews, FinalTag, John Andrews, Mashable & Techmeme

I just found out about another alternative for those comfortable with CSS called Feed Styler. It allows you to apply CSS to various page elements automatically, effectively using 2 style sheets, one for your blog pages, and another for your feeds.
It achieves this by automatically adding inline CSS styling to various page elements.

Some purists might argue (and they do in the comments) that RSS Feeds should be free of all styling, and that if someone subscribes to a feed, they do it to avoid visiting the site, to get just pure content.
Unfortunately a lot of RSS readers don’t have even basic styling for HTML elements such as blockquotes, so I can see a need for this even if you are not looking to add more complicated styling.
In my opinion, most readers are not purists – they subscribe because they don’t want to have to navigate a long list of bookmarks every day to see if there is something interesting on their favourite sites. It isn’t a question of looking at the content unformatted, but of receiving the content they want to read automatically.
It is true that readers could somehow hack Firefox to apply custom styling to Google Reader, but most are not that technically capable.

I have downloaded the plugin, and it is another thing to add to my very long “todo” list. I haven’t tested it, so if you do, please let me know how you get on.

Also of note, Devlounge are having a refer-a-thon offering a free link in their sidebar for the site that sends them the most traffic. I think a much better option is just to subscribe to the blogs that send you traffic, and maybe write something about them if you see something interesting. This seems a very insular approach.
Their 100K unique visitor day is in total since they launched, as it seems (based on dubious Alexa data anyway), that I already receive as much traffic as they do.
You could look at it as a success until you read their full announcement and a previous post celebrating 400 subscribers.
The uniques are most likely unique by IP per day rather than cookie based uniques.

For me the most important statistic of all is subscribers, and to maximise the number of subscribers I gain from different traffic sources.

Sometime in the future I plan to add some subscriber only content

Here is a little bug I picked up today that I found interesting.

As far as I can see, in my own CSS code I close all the divs correctly.

A bonus I intended to exploit was the way the Feedburner Feed Flares will wrap around my byline on the right hand side.
To ensure this worked in more feed readers, I intended to make my byline slightly smaller, however this bug I have just found in Feedburner might prevent that.

When you read a blog in a Feed Reader, each individual blog page is seperate, wrapped in its own divs so that the content on one page doesn’t attempt to wrap around the content on another.
It seems that in emails that are generated by Feedburner, each individual post is not separated correctly, thus one entry can wrap around a page element in the previous post for some strange effects.

I am thinking about ways I can fix this in my own CSS, or with a custom feed flare, but the more I think about it, the more I am inclined to think that this is something that needs to be fixed on the Feedburner side.
It is good that the Feedflare units are fluid, and can wrap around objects. It is something you could prevent if you wanted to.

Basic Optimization

1. Offer full feeds – I am not going to argue about how this is good for subscribers. That argument has been debated almost to death. However if you want reputable sites to pick up your content, you need to give them an easy way to do it. Obviously they are not looking for excerpts. Meme Trackers that work on feeds rather than scraping content from your site will also attribute relevance better if you provide more content.
2. Image Alignment – lots of themes provide CSS for image alignment. It is useless as soon as your content is being read elsewhere. It doesn’t take much code to align an image left or right and wrap text around it wherever your content is being read.

<div style="float:right;"> Image Code </div>

3. Scraping Friendly Theme – You might not realise this, but many meme trackers scrape your content. It is very important to have your article content appear before navigation and various “about this site” text. There are quite a few top marketing blogs where the snippet listed on sites like Megite for their articles is always their “about me”, rather than relevant content
4. Images – Try to include images with every post, but also ensure that the most interesting image appears first on the page. You might need to make an additional thumbnail for the start of your post of an image that appears full size later on.
5. Headings – Please refer to the post I made recently regarding Headings in Feeds
6. Related Content – link through to related content on your sites – not only will you get a backlink to your original article, but also a deep link to something else. Don’t go overboard, and make sure it is highly relevant. You can probably get away with more than you might be able to with article distribution, where self serving links in the body of an article is heavily frowned upon.
7. Unique Format – Here is something I spotted on Megite recently that made me smile, the “Search Engine Twins“.

Obviously there is some prior history there, but both sites were listing relatively the same content, in the same format. I am not sure how they are going to solve that one in the long-term, but I hope their formatting develops in different directions in the future to add some diversity.

Advanced Optimization

Today I spend a number of hours experimenting with CSS and hacking my Disclosure Policy Plugin to do what I wanted to achieve. A couple of weeks ago I was approached by someone who was interested in syndicating my posts, and they requested a picture and a byline. I looked on their site, and wasn’t overly impressed with the way bylines were handled by default. I decided that if my content is going to be syndicated, it needed to have a clear link back to the original article, and maybe a link to my root domain as well, all presented the way I want it.

My plugin didn’t have an option to include the post title and URL, so today I hacked it in.

These changes are around line 70 in disclosure_keywords.php

$dpp_post_title = get_the_title($id);
$dpp_post_url = get_permalink();
$str = $content;
$content1 = $str."<br><br>";
 eval('$content2 = "' . $keywords_div_start . '";');

The first 2 lines above set 2 variables to contain the post name and URL
The 5th line evaluates the first block of text you set in the options, looking for php variables and processing them.

Handling quotation marks with this is a nightmare but here is what I found to work.

In all the CSS used in the options, I used single quotes
For the quotes around the variables to evaluate, I used double quotes.
For the actual disclosure lines that are defined, I use double quotes

Thus the code in the options “Insert Start Div Tags:” looks a bit like this (though it still needs tweaking)

<div style='margin: 0 0 0 0; padding: 0.3em 0.3em 0.3em 0.3em;'><div style='border: 1px solid rgb(184, 184, 184); margin-bottom: 0em; margin-top: 0em; padding-bottom:0.3em; width: 450px; float: left;'><div style='margin-bottom: 0em; margin-left: 0.3em; margin-top: 0.3em; margin-right: 0.5em;width: 75px; float: left; line-height:1em;'><img style='width: 75px; height: 100px;' alt='Andy Beard' src="http://andybeard.eu/wp-content/uploads/andy75x100-a1.png"></div><div style='margin-bottom: 0em; margin-left: 0.5em; margin-top: 0.3em; margin-right: 0.3em; float: right; line-height:1em;'><a href='http://creativecommons.org/licenses/GPL/2.0/' rel='nofollow'><img alt='CC-GNU GPL' border='0' src="http://andybeard.eu/wp-content/uploads/cc-GPL-a.png" /></a></div><h3 style='margin: 0em 0 0em 0;'><a href='http://andybeard.eu/'>Andy Beard - Niche Marketing</a></h3><p style='line-height:1em; margin: 0em 0 -0.2em 0;'>
Blog search engine perfomance, WordPress and general niche and affiliate marketing tips</p><p>Original Article:<br /><strong><a href=".$dpp_post_url.">$dpp_post_title </a></strong></p><div style='width: 100%; float: left; line-height:0.7em; margin: 0em 0 0.2em 0.5em;'><h3 style='margin: 0em 0 0em 0;'>Disclosure</h3>

Note: all the quotes seem to be messing up even with a code plugin, so don’t just copy/paste the above, it won’t work. Also note I am not a CSS expert and just play around with things until they look ok. I tested first of all on a test blog running Kubrick, and then copied the code over here.

In the second box you just have 3 closing Divs

For individual disclosure declarations, I am using something like:-

<p style="margin: 0em 1em 0em 0em;"><small>Whilst the content I create, however it is distributed is commercial, relevance is always considered before any potential financial gain. <a href="http://andybeard.eu/disclosure-policy" rel="nofollow">Disclosure Policy</a> <a href="http://andybeard.eu/contact/" rel="nofollow">Contact</a></small></p>

I actually need to make that a bit more structured, so I can just wrap any entry with paragraph tags, although that entry will always be “small print”.

The Proof of the Pudding is in the Eating

The only way to really see the effect is to see how it looks in an RSS reader or on various Meme Trackers.

Meme Trackers

Here is what a post should look like on Megite

You will also notice they also use your favicon, so well worth spending a few minutes generating one.

RSS Reader

No screenshots – try signing up by email and RSS to take a look. I think I need to make my box slightly narrower, because then the Feedburner Feed Flare using will all align nicely down the right hand side of the author box. Currently on a 1024×768 Google Reader view, only some of them are on the right hand side.

Landing Page

The changes have definitely made my Feedburner landing page for subscribers look more professional and personal.

ToDo List

I still need to format my tags the way I want to, both on page and in feeds. The same goes for related posts, which in syndication will most likely be cut off.
Some default CSS of my theme also seems to over-ride my inline CSS with margins and paddings, so I need to take a careful look to see how that can be corrected.

Standards compatible? Well I didn’t use any tables, or fixed fonts –

Conclusions

It is worth spending some time working on how you want your content displayed in the future, as once your working environment is setup, it can save you a lot of time, and improve the results you achieve. Are you in this for the long haul?

You might well have read on Jensense about the changes in the contextual advertising policy that confirmed my understanding of the policy that I wrote about 2 days ago.

As I stated in the comments in that post, I also contacted Google directly but I asked multiple questions. I had to use the email route not having a direct line to decision makers at Google, but Google have been fairly prompt in replying to my questions.

The short version of the questions I asked were

1. Use of Adsense Backgrounds
2. Context with Chitika
3. Search on Chitika
4. Placement of a Chitika eMiniMal that contains images next to an Adsense rectangle

Here is the longer version

Questions to Google Adsense Team

I have 2 questions in relation to currently policy changes with the Adsense content network

1. On one of my sites I have been experimenting with the use of Adsense “Backgrounds” to make the adverts more attractive.

Examples of the backgrounds are to be found here

http://adsensebackgrounds.com/

The site I am testing on is http://wpplugins.info

Are such backgrounds still compliant with the Adsense ToS and Policy Statements?

To be honest [snip] not relevant financial stuff [/snip]

2. With the recent policy change, I noted that Google do not want to encourage use of advertising that looks similar to that of Google.

At the same time it seems Google might be slightly more relaxed on advertising that doesn’t look like Adsense.

As an example Chitika adverts.

In the past it was noted that it was probably ok to use Chitika in conjunction with selected keywords.

In the new policy statement there was no mention of contextual advertising, though the current terms of service do mention contextual.

Can this be taken to mean that it is now possible to use contextual advertising with Chitka adverts that do not look like Adsense adverts, such as their eMinimals?

http://chitika.com/mm_overview.php

Also in regard to search, the Chitika eMinimal search is a product search. Is it now allowable to enable search on eMinimals on sites that contain Adsense for Search?

Would it be allowable to place an Eminimal, that contains an image, next to an Adsense rectangle?

There are actually 4 questions, but 2 topics – I am sure things like that happen to everyone ;)

Here is the reply I received

Reply from Google Adsense Team

With regards to your first question – we do not prohibit the use of CSS in conjunction with Google ads, as long as the ad code itself is not modified. However, we’d ask that publishers use their judgement and avoid implementations which may be deceptive or confusing to users.

Regarding your second question – AdSense publishers may display ads from other contextual ad networks on the same page as Google ads only if the formatting or color scheme of these ads is sufficiently different from the layout of the Google ads. In other words, if you choose to place
non-Google ads on the same site or page as Google ads, it should always be clear to the user that the ads are served by different advertising networks and that the non-Google ads have no association with Google. If the formats are naturally similar, we’d ask that you use different color
schemes for the competing ads.

Please note that as per our program policies, publishers may not place images near their AdSense ads in a way that suggests a relationship. Such an implementation may confuse users who assume that the image is directly related to the advertiser’s offerings. As a result, if you’d like to
display an eMiniMall ad which contains an image, please do not place it near your Google ads.

I am tempted to stick an affiliate link on this page for Adsense Backgrounds, as they seem to be a very good way of complying with the new Guidelines and still making your Google advertising eyecatching. I will stick a banner at the bottom of this post ;)

The key to this is “suggests a relationship”

I was also interested in the term “confusing users” – in some ways blending is confusing users and Google might start discouraging that practice.

Things like bullet points might still be a problem, but a decorative frame of some kind as I use on http://wpplugins.info seems to be ok, though I chose very plain – tasteful backgrounds there.

It is very important to note the placement instructions. Don’t go placing adverts from competing advertising systems alongside Google ads if they have pictures, and make them as distinct as possible.
You can probably use them vertically aligned, even if contextual, but avoid using 2 rectangles side-by-side if one is from a competitor.

I have asked a follow-up question regarding search boxes as that wasn’t covered in the first reply

Adsense for Search – Followup Question

Thanks for the very clear explanation. I am glad my interpretation of the rules was correct.

One part that you didn’t cover was search boxes from affiliate networks that look totally different to a Google search box.

If the search box looks totally different, is that allowed.

As an example, in the past it was always recommended to disable the search on the Chitika MiniMals on any site using Adsense for Search.

It seems to me that based upon the new policy, it would no longer be necessary to disable the search on Chitika or maybe Amazon search, as long as they are not similar.

I really look forward to your answer and thank you for your time.

Update:

Google Adsense for Search With A Competing Search Box

I am impressed, this reply came back in just a couple of hours, on a Friday evening

This one addresses my question regarding the search boxes.

I’m happy to help – I apologize for not addressing your search question. Yes, as long as your search box does not mimic the AdSense for search box in appearance, then you may place it on the same page.

Google are being extremely clear with their information, maybe a policy change? They know who their biggest competitors are in text based advertising, and seem to be just concentrating on their biggest rivals.

One question that still springs to mind is if you have pictures switched on for Adsense, with a 468×60 banner, and another provider is also serving banners.
468×60 it a little hard not to confuse formats between Google and someone else.

Update2:

Google and Competing Text Adverts

I am going to add some links to additional direct quotes from Googlr. It seems lots of people have been sending Google emails, and they are being very clear in their answers.

Eric Lander has been directly in contact with Google, and has a very clear email reply discussing how you might be able to use even text based competing adverts, as long as you are ensuring they look totally different.
I only came across Erics site in MyBlogLog, and he has some extremely useful content.

It seems if you stick a nice border around one of them, or make sure that they never display in the same color, you are in the clear. It is a little tough on colour split testing, especially automated, but I think people can live with that.

I am happy about being able to go full contextual on many ad networks, and I am sure Chitika and Amazon are very happy with the news, among others.

Also you can change how the MyBlogLog widget displays on your blog with some more attractive CSS.