Converting Visitors Into Subscribers

 

Are you blogging purely to make a quick buck, or do you have long-term goals? If you have long-term goals then one of the most important aspects of your blog design isn’t advertising placement, but how you encourage people to subscribe to your blog, or sign up to your mailing list.

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:-

Initial Subscription Options
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:-

Subscription Options Version 2

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.

Subscription Options Version 3

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.

 

Liked this post? Follow this blog to get more. Follow

Comments

  1. Online Dating says

    Thanks for all the info you post here! It is really a challenge for a new person these days.

  2. says

    Andy – As usual, you’re spot on. Great idea on upper left positioning, etc. After reading this tip, I jumped on several sites and paid attention to what part of the opening page my eyes were drawn. Of course, it was the upper left or upper middle. I wonder if this is due to the way we read – we start at the upper left and go to the right and then back to the left. Wouldn’t it be interesting to test this same principle out on those that don’t read in English, but rather Middle and Far Eastern languages that don’t start from the upper left. Take care.

  3. says

    Good point about the top left of the page. Looking at my own blog, I reckon that space is a bit wasted so I’ll think about changing things around. Not sure I like the really huge icons, so I’ll probably go for something a bit more subtle.

    I mainly wanted to comment, though, to mention that since the change I no longer see your sidebar on my feed aggregator (NetNewsWire for Macintosh). I’m pretty sure it was fine before the change.

    • says

      I am not sure how they handle sidebars, because most feed readers just serve unformatted content from the RSS feed.

      You are right that size isn’t everything, I just used the default graphic sizes, and found the small ones a little too small for my purposes.

  4. says

    I think it makes the top left look cleaner here, althoug I’ve never been a fan of that style of button.

    I for one am underusing my top left spot in a big way, and have been looking into different layouts for a while now.

    • says

      David what you should do is create some free to use icon sets.

      There are plenty, but they are mainly for desktop use and prohibit use on the web.

      It was hard to track down any alternatives, and I did work down lots of lists on various sites to come up with almost nothing other than what I eventually used.

  5. says

    Andy.. Great stuff, but I wouldn’t mask the email signup! RSS is good, but email is still king. Especially if the content subscribed to is a newsletter.

    • says

      I tend to think (but then I am biased) that my blog content is better than any email newsletter I have ever subscribed to, and I still subscribe to a lot.

      Even with the email form before, my email subscribers are far fewer than RSS subscriptions.

      In many ways I am in the blogging nice, though not totally, so there is high usage of RSS compared to email.

      One negative factor is that every day it is a new 30K graphic to download.

      I can’t help thinking it would be better to use a graphic background with a text overlay, but then it wouldn’t look quite the same.

  6. says

    My feedreader presents blog posts as text only when you are looking at the list of most recent posts. But when you click on the headline, it opens in a new tab fully formatted as if in a normal browser. But if most readers don’t do that, then I guess the lack of a sidebar isn’t an issue!

  7. says

    Awesome work man. This is far superior to what you had before. I’d like to see a followup down the road to find out how the testing works out for you and to see if this actually converts more/less people into subscribers than your other methods.

    Cheers mate!

    • says

      Greg you are one of the people who enquired about the previous code, so I am glad you like it.

      It is hard to track specific signup rate for new visitors as most people seem to use bookmarklets.

      I just think it is a little cleaner, but still “noticeable”

  8. says

    I think this new design might appeal to most people because its feels more in-your-face. The large size makes it feel a little tacky but they’ll probably do their job well enough.

    All my feed subscription options are at the extreme right and I’ve left it there because the heat map tests I’ve done seem to indicate that they receive adequate attention, although not as much as the graphics I use within each post.

    I really need to start flaunting my feed count as well. :)

  9. says

    I think the idea is sound but, It also seems to take away from the beginning of the post. On a 1024 screen res you don’t see much of the beginning of the article to spark interest and i think some readers would navigate away.

  10. says

    Andy,I’ve heard this before, and so I started with left hand columns. Since I don’t know much css or html I wanted a layout that was simple that I liked – and that took me back to right columns. I’m just finding my voice still, but I’ve gone back and forth with where to put everything on my site. I just can’t get it exactly how I want it without learning css on top of everything else.WAUGH!

Trackbacks

  1. My Journey Through Haloscan and Trackbacking Hell…

    Andy Beard recommended I start trackbacking. So being the adventurous sort I thought “hmmm maybe I’ll go to sleep instead”…