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