How often have you abandoned a checkout due to a confusing and difficult experience? Unfortunately this is more common than it should be and we lose customer's during the checkout process. In fact you're average abandon rate is around 80%!

Plan to Engage recently  hosted a webinar with conversion expert James Critchley of cloud.IQ and provided 3 keys to leverage in order to prevent abandonment of the shopping cart process. 

 The 3 Keys discussed are based on BJ Fogg's Behavioural Model which shows that 3 elements must converge at the same moment for a behaviour to occur: Motivation, Ability, and Trigger.

In this webinar we detailed each of these elements and look to see how we can apply this model to our customer's checkout process  in order to refine and optimise the experience, resulting in increased conversions. 

Interested in seeing more? The please view the slides of the presentation below, alternatively you can watch the actual webinar here. 

Justine Jordan, posted this cool infograph on the Litmus blog last week. It shows do's and don'ts for mobile email design:

Neil Berman lists these 8 Steps To Good Mobile Email Design in his recent Email Insider column:

1. Send your emails in MIME Multipart Format so they are readable on mobile devices that can display only the text version of your email.  
2. Keep subject lines to 15 or fewer characters or front-load it so your key message is in the first 15 characters.  
3. Make the most of pre-header text. iPhones allow about 140 characters in vertical view, so keep the text short and persuasive. 
4. For the best display on both mobile devices and the desktop, code your emails between 480 and 600 pixels.  
5. Keep the layout simple and stack information in one column. 
6. Take it easy on the images. 
7. Code all links and buttons with a target area of at least 44 x 44 pixels.  
8. Test your design regularly on various devices to make sure your emails continue to render as you intended.

Source: Mediapost

In her article "Email Marketing Design for Mobile Devices" Kristin Hersant shares somes tips and guidelines for designing email campaigns and newsletters that render well on a mobile device.

Conventional wisdom says that the standard layout width for an email is 600 pixels wide. In order for your email creative to render properly on a smart phone, you will need to design your layouts at approximately 480 pixels wide, or 80% of your original layout size. In order to be readable on a regular cell phone screen, your email will need to scale down to 50% of its original size, which is a tall order. According to the panel, 85% of the email delivered today is not readable when it’s scaled down to 50% of its size.

Here are some of the tips she shares:

1. Make sure that you’re designing your emails using a grid system. This means that you need to layout your content in vertically and horizontally aligned blocks, with “streets and alleyways” in-between them. This will enable your design to shrink down without losing its integrity. 
2. Make sure that your text is readable on a mobile device. Think about larger headlines and body size copy and use short, direct calls to action. A
3. Consider a Single Column Layout.
4. Always test rendering on mobile devices when creating master templates to ensure they accomplish your readability goals. 
5. use background colors to visually separate topics instead of horizontal rule
6. Instead of designing at 600 pixels wide, try reducing your layout to 450, 500 or 525 pixels. 
7. Make sure your point is conveyed with or without images enabled.
8. Use a Viewport Meta Tag. Using this piece of code will make email render properly on the iPhone, rather than shrinking the full email. It also makes the email render more quickly. View a code example here.

Source: StrongMail

In this post, Campaign Monitor's Ros Hodgekiss explains how to get a repeating background image to surround your content in most major email clients, including Gmail and Outlook 2007! 

There are some very clever coding tips in the article, so if you're into coding, make sure to check it out!

I recently discovered a website that sells HTML email templates for newsletters and promotional emails at very reasonable prices. So if you're in need of a new template, you might want to check it out. 

It seems they are adding new templates very regularly and you can even have some of the templates customized by the designer.

Disclaimer: the links in this post are affiliate links, which means I make a few bucks if you decide to buy a template from them. If affiliate links bug you, feel free to go directly to their site, my feelings won’t be hurt ;-) They're at themeforest.net.

PS. Don't forget to take my short survey to help me understand what you think about this blog and how I could improve it.

If emails are not coded properly, a border is added to every image when the email is viewed with Hotmail in Firefox. An examination of emails from 102 major online retailers revealed that 55% of them had not properly coded their emails to circumvent this problem.

This new 5-page report discusses this issue in more detail, shares examples, and provides the fix to avoid the issue.

In this article, Darrah MacLean discusses 5 rules for using color in your emails:

Rule #1: Don't overdo it. If there are too many colors competing for attention (or too much of one color), the messaging impact can get lost.   

Rule #2: Stay within the palette. While you want each email to feel unique, you also want to be sure to keep the integrity of the brand and not stray from the overall feel. 

Rule #3: Use color to improve scannability. Use color to draw the eye across the page, separate sections and make certain areas POP!   

Rule #4: Be mindful of color implications. In a retail context, red often means "sale" -- but for other types of messaging, it can signify alarm.   

Rule #5: Make sure to keep it balanced. If the main color is green and the supporting colors are orange and blue, go heavier on the green and accent with the others. 

Read the full article here.

Kristeen Hudson provides these 10 tips for successful preheader text on the Exact Target blog:

1. Use a call-to-action
2. Use positive wording 
3. Make your preheader text support you subject line
4. Keep in mind the length of the preheader text that will be displayed in the inbox
5. The marketing preheader text (aka the call to action) should be in the top left of the email
6. If you make the pre-header text too long it defeats the purpose.
7. Don't repeat the subject line as the preheader text
8. Preheader text is generally smaller then body copy, but it should still be readable
9. Write attention-grabbing preheader text
10. Try an A/B split with different pre-headers and test to see which emails get the most opens and conversions.  

Read the full post here: The ExactTarget Blog - 10 Tips for Successful Email Preheader Text .

For emails, if split images, are not rendering properly (i.e. breaking) in Hotmail when using Firefox, Chrome, or Safari. Add “display: block” to the style tag in the images’ code.

Read his blog post here.

This very well documented article by Campaign Monitor's Mathew Patterson gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients.

Definitely worth reading!

Check it out here: Design and Build Email Newsletters Without Losing Your Mind (and Soul).

The folks over at Campaign Monitor have been hard at work overhauling their CSS guide.

The new guide now includes the following updates.

• Mobile email clients – they took the iPhone, Android, BlackBerry, Palm Pre and Palm Treo for a spin. 
• Focus on the most popular clients - the web-based version of the report focuses on the 10 most popular email clients. The downloadable version of the guide includes the results for all 23 email clients tested.
• CSS shorthand – they tested the shorthand support for the font, background,padding, margin and border properties.
• Smarter grouping - Instead of listing all CSS properties alphabetically, they're now grouping them into categories like "text and fonts" and "color and background" to make it easier to see related properties and find what you're looking for.
• Partial support indicated - Email clients like Outlook 2007 offer partial support for some properties such as margin. Sometimes it works, sometimes it doesn't. Traditionally they've listed this as no support, but they now indicate partial support to let you know it might require more testing.

Check out and download the all new CSS Guide.

I just received an email from the Email Standards Project saying that Outlook 2010 will also be using Word to render emails. I've copied the email below:

A couple of weeks ago, Chad White posted some great tips for your email marketing program in 2009. Here's a summary:

1. Each month replace one of your previously planned broadcast emails with a targeted email to a segment of your list. A well-crafted, targeted email can generate as much sales as a broadcast email, while simultaneously increasing engagement and reducing list fatigue. However, a targeted email does take a little extra effort to create.

2. Schedule a review of all your email forms and triggered emails. Sign-up forms, preference centers, welcome emails, triggered emails -- if you haven't done an inventory of these pages and emails and reviewed them to make sure that they're accurate and up to date, do it now. These tend to get set up and then forgotten about - sometimes for years.

3. Speak to the subscriber and not from the point of view of your business. Make sure that your emails and forms address consumers with them in mind. What's in it for them? What's appealing to them? And how does your email program help them?

4. Redesign your email templates with image blocking in mind.

5. Segment out your inactive subscribers. Send them different messaging than your active subscribers and at a lower frequency. Also consider sending them emails with a different template, one that has an unsubscribe link at the top, or offering the choice to opt-down to a lower frequency. After a long period of inactivity, you may also want to send a reactivation campaign, asking them to opt in again in order to continue receiving emails.

Read the entire article here.

Here are the slides of my presentation at the Brussels Email Marketing Forum yesterday where I talked about the things I look at when I evaluate an email campaign. Let me know if you have any questions!

Here are my main takeaways from this article by Ken Magill on email creative:

• Test, test, test: view the e-mail on as many platforms as possible, such as Yahoo and Gmail accounts, an Outlook address, and on mobile devices. E-mailers can gain insight into which e-mail readers they should be designing for simply by eyeballing their lists.
• In e-mail design, less is more. You don't have to package every offer under the sun. Make sure your call to action is clear and keep it simple.
• Employ so-called ALT tags, or HTML instructions that provide alternative text to appear when graphics are shut off.
• Mind the preview pane: You always want to put your branding and your prime content as far to the left and as far up as possible. The default state of the preview pane is either under the list message view or to the right, meaning the preview pane will cut off things on the right and on the bottom.
• Test the impact of site navigation. Site navigation [such as, say, ‘shoes,’ or ‘shirts’ on an apparel site] is a familiar way to browse content. If I can get better clicks and conversions from [including] site navigation, why am I not putting it in e-mail? I just think it's an opportunity, and that marketers should be at least testing it.
• Don't forget the subject line. Marketers tend to create the subject line at the last moment even though it is easily one of the most important parts of the message — if not the most important part. As is the case with traditional direct marketing, the most effective subject lines are often not the ones a marketer would predict to win. How much time would a direct marketer spend on an outer envelope? Subject lines don't get the same kind of attention. Yet they're just as important.
• As for the “from” line: brand the company in it and nothing else because the majority of people decide whether or not to open an e-mail based on who sent it.

Source: Multichannel Merchant

In this article on the Email Experience Council's blog, Lisa Harmon explains how to make your call-to-action stand out:

1. Stay focused.
Design the entire message to direct recipients towards the CTA. Don’t distract them with too many equally-weighted links and offers. Select imagery that draws the eye toward the point of conversion. Make the path appealing and clear, and make sure that it extends beyond the email itself to the landing experience.

2. Keep it direct and clear.
It’s fun to write clever copy, but make sure that even the quirkiest wording is to the point. 

3. Make sure it’s above the fold.
Keep the CTA above “the fold,” or in the part of the message that’s visible without any scrolling. While the fold location can be hard to predict with all the varying preview panes and computer monitors out there, put your CTA up top where it gets the attention it deserves.

4. Make the CTA stand out visually!
Keeping it above the fold is a good start, but go further. Make your CTAs stand out visually. Try using HTML buttons as opposed to text links. You’ll grab more eyes that way and generate a higher CTR. For more on buttons, check out Lisa's article on “The Bulletproof Button”.

Read the full article (including examples) here.

The folks over at Bronto posted a new video on their blog.

In this month’s video, Kimberly and DJ Waldow take a look at how some of the major online retailers design their emails for images on and off.