Getting the most from email marketing

Email campaigns still have excellent ROI compared with various other online and offline marketing channels, but there are some important caveats to consider before cutting and pasting your model page from Dreamweaver into Constant Contact or Vertical Response.

Here are 10 essential tips to bear in mind that will affect the quality of the rendered version when it arrives in your recipients’ mailboxes.

1. Avoid the “One Big Image” approach

It’s still common for marketers to build the email message in InDesign or PhotoShop and send the resulting JPG as One Big Image in a small amount of HTML. While this (almost) guarantees perfect rendering in almost any email client, there are some big problems:

• Most corporate users have their images turned off by default, so they won’t see anything.
• Mobile users won’t thank you for sending a 200-300K image instead of a comparatively tiny HTML version.
• Users can’t cut-and-paste or otherwise interact with the content.
• Spam filters are more like to block the email.

Breaking up your design into HTML, images and text can lead to a result that looks 95% similar and avoids these pitfalls.

2. CSS won’t work as expected – use tables

Even though CSS has revolutionized website development, email clients are a long way behind the curve – as in years behind. For reliable rendering of your email newsletter, you’ll have to use HTML tables and minimal inline CSS – 1996 standards still rule in the world of email. Ironically, finding an older design tool such as FrontPage is more likely to give you dependable results than the newest version of Dreamweaver. This means nested tables are still the way to go for email campaigns, especially for those in-browser clients such as Gmail or Yahoo!. Incidentally, spacer images are often not reliable anymore, especially if images are disabled at the client.

If you must use CSS, make sure you store it below the body tag, since it will likely be stripped out otherwise. And don’t use any handy CSS abbreviations either!

3. Test, test and test again

There are a wide range of email clients out there and the easiest way to make sure your final email works as expected in all of them is to use services such as Litmus or Email on Acid. It’s definitely not safe to assume that most of your target audience uses Outlook or Gmail. These services provide useful and actionable feedback on anything that goes wrong in the test. Everytime you make changes to the email, make sure you test once more before the email goes out the door.

4. Look at the Best of Breed

For inspiration and advice, it’s hard to not admire emails from companies such as ProFlowers, American Airlines and Peet’s Coffee. Since you can view the source of any email, dissecting these is not hard to do and illustrates some of the best techniques for creating results that look like great Web 2.0 webpages. Obviously, don’t copy these designs verbatim, but use them as an educational tool.

Many of these examples create the look and feel of dynamic webpages with menu and video, but the clicks are farmed out to the real webpages to do the heavy lifting. Since users are familiar with rich webpages, they not only generate superior click-through rates but show precisely what the user was clicking in order to reach their desired landing page.

Take a look at Inbox Award for some additional ideas.

5. Keep it narrow – and short

If you’re using fixed width designs, consider 600 pixels to be an absolute maximum, and if you’re using fluid layouts so much the better. Users invariably won’t scroll to the right to find content that’s disappeared outside the window.

The same is true for length – your email should be a teaser to a landing page, rather than a 3,000-word opus. If you have a long and important case study, present this through your web site rather than an email (though use the email as an introduction).

6. Test your image file sizes

It’s still common for designers to embed images that are rendered as 100-pixel thumbnails linking to 3MB originals on the server – the net effect is that the email takes a (very) long time to completely load. Since print quality is largely not an issue in email, make sure that small graphics are stored as small graphics, and not rescaled in the HTML. As an aside, always make sure that the size attributes (height and width) are specified for each image.

7. Wrap the whole email in a table

And then nest everything else inside, using more tables to set spacing. Set the widths of each cell in the table rather than the table itself, and if you want to use a background color, set this as an attribute of the outermost table. Personally, I prefer a white background for email campaigns, just for readability.

8. Handing paragraphs

While <br/>’s and <DIV>s are still common with inline CSS, paragraphs have become more reliable in recent times – you can use ‘margin’ inline through CSS for each paragraph to get really specific. If spacing is really important to you, then cellpadding through tables is still the most dependable way to achieve this.

9. Video isn’t there yet.

Since you can’t use JavaScript or the Object tag, you should avoid video in your emails. This doesn’t mean you can’t fake it, showing a static video frame with a play button icon, for example, which links to a landing page with the actual video. It looks like this limitation will be gone with HTML5, but it will be a while before the majority of email recipients are using clients that will support such hightechery.

10. Keep it simple.

While it’s true that you must code for the lowest common denominator, such as Lotus Notes, it’s also true that readers respond well to simple emails that elegantly convey their message. Email such as Eden’s newsletter are superbly well-designed and certainly within the reach of simple code that will work in 99% of email clients. If you find yourself using dozens of fonts, colors, divs and columns, it may just be overcomplicated.

James Beswick is the Founder of OneUproar and is a big believer in simple emails with a clear, one-click Unsubscribe option.