Have you seen those website ribbons? You know, those colorful diagonal banners usually found in the upper righthand corner of a webpage? Since it's quite new, a number of people have been noticing these. And yes, they are clicking on those ribbons.

In some of the tests I've seen, those website ribbons get as much as a 6.0% CTR. This was the experience in sites that did not have any top-of-the-page banner, nor header image. You might wish to experiment on your site what the clickthrough rates will be if you use those ribbons in conjunction with large image headers.

You might also consider testing different colors for the ribbon. In some cases, people might ignore the color red because they associate that with some kind of promo.

website-ribbon-example.jpgSo, what's great about ribbons? Well, a 6.0% CTR is much better than the 0.2% CTRs some bloggers experience with recently popular widgets. With that kind of CTR, you can direct your visitors to your own products, affiliate offers, or even lead-generation pages.

Actually, I'm quite surprised with the CTR since those ribbons occupy a cold spot in the visual heatmap talked-to-death about by probloggers. If you recall, typical site visitors tend to fixate on the upper lefthand corner of a page. Why the upper righthand corner gets 6.0% CTRs is mindboggling. Maybe that's brought about by its novelty?

The website ribbon also works well with seasonal promos, such as campaigns where you want your visitors to Make Christmas Memorable, for example.

Again, you'll need to test if the typical Christmas-y colors of red and green will improve your CTRs. Please test different combinations of both the text color, as well as the background color of your ribbons.

The common CSS code for such ribbons looks like this:

<div style="position: absolute; top: 0px; right: 0px"><map name="ribbonmap"><area href="http://www.example.com" shape="polygon" coords="0, 3, 162, 162, 162, 129, 32, 0" target=_blank></map><img src="/ribbon-image.png" border=0 usemap="#ribbonmap"></div>

From the code, you can easily edit the destination URL, as well as the image. The transparent .png file in the above example is a 163 x 163 pixel image, and the code assumes you uploaded the image to the root of your site.

If you need help creating the image, please try WebsiteRibbon.com for some ideas.

While WebsiteRibbon.com does make it easy to just copy/paste a code, I prefer not to rely too much on external servers. Afterall, if you do use the javascript code of that third-party site and then it gets too popular, the site might become unavailable (and your ribbon will no longer appear).

Given the present high CTR of website ribbons, you might consider ribbons as another way of monetizing your site. There's still time, right? About 33 more days until Christmas. :-)

Make Money Free Account

"Website Ribbons"
First Posted: November 22, 2007 | Filed in: Make Money Online

3 Comments »