Conversion Rate Optimization can make the difference

By planning, designing, and optimizing your website to persuade, you can ensure that it will act as a more efficient sales tool. You can compare a conversion-optimized website to a successful (but commission-and salary-free) digital sales person who works for you 24/7, 365 days a year, qualifying leads, building rapport, and even closing sales.

With margins falling and advertising costs rising, a high-performing website has become essential for online success. CRO helps you to meet the following business goals:

• An increase in sales, revenues, and profits
• The generation of more leads for your sales team
• Boosting “opt-ins” to build your email list
• Reduction of customer acquisition costs
• More page views for advertising
• Engagement of more users
• A permanent improvement to conversion rates

CRO uses proven persuasive techniques to encourage site visitors to act because they have experienced your polished site design, compelling copy, unique selling proposition (USP), and irresistible calls to action. With increased sales, more leads, and higher engagement, what’s not to like about CRO? Yet despite these advantages, we’ve found that CRO is usually the last step taken in optimizing websites. Most website owners focus on getting more traffic to boost online sales. But paying to advertise an underperforming website is throwing good money after bad.

CRO, on the other hand, makes your website work harder for you by producing more sales now from your existing website traffic. Its goal is to make every site visit count. However, to maximize your success you need to focus on conversion quality for the life of your site. The savviest optimizers don’t stop after their initial success. They continuously tweak their sites to maximize their return on investment (ROI).

Source King, A.B (2008) Website Optimization, O’Rielly

To find out how Absolute Advantage can help you with CRO on your site contact us for a consultation.

There are a plethora of factors that you need to consider when designing HTML emails that actually do their job – get to the recipient and get the message across. The list below is by no means exhaustive but it should put you in good stead.

1. Size Matters

You’ve designed your HTML content, previewed it in your favourite web browser and it looks fantastic. Well, sorry to burst your bubble. The truth is, most of us read our emails in preview panes and windows half or a quarter of the size of a normal web page. Designing a HTML email for a 1024×768 window will not display well in most email clients.

As a rule of thumb I try to keep the width of the template as narrow as possible without spoiling the look of the email. Most email preview panes are scrollable which means that the height is less of an issue.

Tip: Keep the width of your template quite narrow.
Trick: Center your content so it looks fine in both wide and narrow readers.

2. Pretend it’s 1998 – Tables Rule, CSS Positioning is Gibberish!

For all you CSS lovers and web designers out there, I’m sure that you’ll agree that it hurts when you are forced to regress into old standards and markup. Well unfortunately, when designing HTML emails you have to do exactly that.

Firstly, you should have seen that attaching a CSS document isn’t possible. Why don’t you stick it in the document head tags, I hear you say. Well, this does work – sometimes. We can use CSS to style the content of the page, however it must be put inline if it is to work properly in email clients. This makes most web designers shudder at the thought but if you want your styling to be displayed in all the different email clients this is the only way to go. And yes, it does mean repeating that styling for your page links!



Ugly, but it works


CSS positioning is a big no no when designing for HTML emails. You have to imagine you’re designing for Internet Explorer 5 – imbrace those sloppy, untidy tables. It will save you heaps of headaches in the long run. Having your divs display differently in 10 email clients is a problem we can all do without.

Tip: Use tables to define your layout.
Trick: Use CSS to style inline, not on a stylesheet or in the header.

3. Image to Text Ratio

Too many images compared to the amount of text is quite hazardous. Spam filters tend to flag image heavy emails. It seems natural to create a flyer style image and then send that as an email. Without any text, it is more likely that the email will be rejected by SPAM filters.

A lot of email clients deactivate images as standard. An email with just one image ‘e-flyer’ would get no message across in these cases.

Tip: Use small images and avoid filling the email with an image e-flyer.
Trick: If you don’t have much text to fill the email with don’t use more than one or two images.

4. Don’t rely on images to get your message across.

As already said most email clients don’t necessarily display the images by default. Gmail, yahoo, and the like de-activate images as standard. It’s not only until the user clicks ‘activate images’ that they will get displayed.

This means that if you use images to display text then your message will not get across. Additionally, if the layout of your email relys too heavily on images then it may look silly when they are de-activated. To test how your email looks without images use the Web Developer add-on for Firefox and select de-activate images. If it doesn’t make sense without the images you need a re-design.

Tip: Don’t rely on images to get the message across.
Trick: Test the HTML with images deactivated to see how it would appear without images.

5. Use the image “alt” tag to good effect.

If you’re images aren’t necessarily going to get displayed using the alt tag is essential. This will be the text displayed instead of the image. To take it a step further, you can even style this text by using the style settings for font and background within the image tags. For example,

will display

when the image myimage.jpg is not displayed.

Tip: Always use the alt tag within images.
Trick: Use the style element to manipulate how alt text and background is displayed when images are deactivated.