Why Style Matters: A Simple CSS Trick to Boost Your Copy Response Rate

December 5th, 2006 by Mike Read more about Articles

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

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

If you liked this article, here are some related posts:

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.

6 Responses to “Why Style Matters: A Simple CSS Trick to Boost Your Copy Response Rate”

December 5th, 2006 at 8:21 am Kris Khaira
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.
December 6th, 2006 at 7:41 am Igor M. (BizMord Blog)
This makes sense. Great post. My eyes automatically went towards the 2nd version.
December 6th, 2006 at 8:44 pm Stephan Iscoe
but ‘messy’ converts and sells more…
I’ll be uglifying a few more pages
Best of Success,
Stephan
December 7th, 2006 at 6:42 pm hisham
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…
December 11th, 2006 at 1:03 pm Deepali
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’.
December 11th, 2006 at 10:28 pm vishen
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.

MindValley Labs Internet Marketing Blog

Conquer the Web