CSS Trick to Boost Your Copy Response Rate">Why Style Matters: A Simple CSS Trick to Boost Your Copy Response Rate
December 5th, 2006 by Mike Reining Read more about ArticlesIn this test we experimented with two different ways of displaying testonials to see which style caused a bigger response rate.
What we found was quite dramatic.
The test took place within our Ecommerce Online Training Course. We offer prospective buyers a few free sample chapters of our book.
At the end of each chapter we add a subtle call to action — inviting the reader to click to our sales copy page and read about the benefits of purchasing our course.
In the test we studied two different call to actions. Both had exactly the same text. The only difference was a simple CSS trick we used to make the testimonial stand out more.
Here’s Version A:
And Here’s Version B:
The difference is apparent. In version B the testimonial stands out much more. We used a CSS trick to put the testimonial within quotes and we colored the text navy blue to make it stand out more.
The Result:
Version A had a CTR of 9.09%.
Version B had a CTR of 34.88%
That’s a improvement of over 300% improvement!
But that was not all.
We also tracked how many people who clicked through ended up reading our copy and looking at our pricing options.
For Version A - 25% of people ended up viewing our pricing.
For Version B, the number was 53%.
It seemed that displaying a testimonial more prominantly not only caused more people to click to view our copy — but it also caused them to pay more attention to the copy.
We repeated the test a second time. This time within a different lesson of our online course.
Here’s Version A:
Here’s Version B:
Once again the results were pretty darn dramatic.
Version A produced a 15.00% CTR.
Version B produced a CTR of 32.26%.
A 200% improvement!
In terms of viewing pricing (a sign that the visitor actually read the copy and displayed interest):
33.3 of visitors from Version A viewed our pricing options.
60.0 of visitors from Version B viewed our pricing options.
In Summary
Don’t underestimate the importance of a good call to action and the importance of using testimonials to garner interest.
What we just saw was how a simple trick to make your testimonials stand out better could create dramatic boosts the number of people reading and taking action on your copy.
PS — for details on CSS and the styling code we used for displaying the fancy testimonials, take a look at our ecommerce course »
Last 5 posts by
- Do you think SEO in other languages is easier? — September 18th, 2008
- Google Slap — How to recover from a Google Slap? — September 8th, 2008
- What Does Your Order Button Say? — August 29th, 2008
- Will Knol Rule The Search Engines? First Analysis Indicates…It Just Might — July 23rd, 2008
- Are small businesses dropping out of AdWords? — July 23rd, 2008
About the Author
Prior to MindValley Media, Mike was the Head of New Ventures Strategy at eBay where he conceived of the strategies that led to the investment in Craigslist, the launch of Kijiji.com and the acquisition of Skype.
Mike has an MBA from Stanford and previously worked for the Boston Consulting Group. He is also a certified Google AdWords Professional.
Check out other posts by Mike Reining
If you want to see what's in the private lab...
Ask yourself... which part of your business would you most like to improve?
I can send you 7 tactics related to your specific needs, if you like.
You don't have to buy anything, just take it as a backstage pass into our private course.
Will it give you the solution you've been waiting for?
There's only one way to find out.
Mike Reining
Vishen Lakhiani
Interesting, but center-aligning the quote while the other text is left-aligned is just messy. It should stand out by looking good, not by distracting people because it’s messy and annoying.
Right now it reads “THIS IS SPAM” while the older version is just boring. Get some moderation — keep the quote’s bold style, left-align it, keep the nice quotation marks but cut down on the colours. I see FIVE colours in that screenshot — brown (PS), black (body text), light blue (links), dark blue (quote) and peach (quotation marks).
You can cut it down to 4 colours by making PS and the quotation marks the same colour.
This makes sense. Great post. My eyes automatically went towards the 2nd version.
but ‘messy’ converts and sells more…
I’ll be uglifying a few more pages
Best of Success,
Stephan
many internet marketers (including myself) tried applying basic design aesthetics… and received tremendous drops in sales…! i can’t stand looking at spammish design but its hard to say what pays the bills unless its tested…
Well most designers shoot down such design ideas because they are not aesthetic enough.
After reading the post I was totally floored but then I read Kris Khaira’s comment and that made a lot of sense too. I guess what you do in that box also depends on what other elements your page has. I would have to agree that the second page is not only more attention grabbing but induces one to read if not anything else at least the testimonial.
Anyway a lot of people I talk to always seems to feel that testimonials aren’t a great idea and should be the last resource because ‘nobody believes they are real’.
My view — design is NEVER as important as copy (i.e the WORDs on your site). I saw sales on a site plunge 40% when a professional designer was asked to redo the header.
In general — if the site looks like at ad — no matter how “pretty” or “creative” it is — you’re probably blowing your dough. Focus on the words itself.
What I am suggesting in this post — is applying nice design to focus on your words, sometimes helps. But ultimately its the words that hold the power. The design simple serves to draw attention to the words. This is the difference between a well designed sales site and a poor one.