Boost Email Conversion: Design Like it’s 1999

When it comes to maximizing conversion on your email campaigns many of you are familiar with some of the the basics:

  • Provide strong, relevant content to your email subscribers
  • Create a compelling call-to-action
  • Manage frequency to avoid list fatigue

However, while content is king, design also plays a critical role in enhancing your email marketing efforts. This week there were a couple of interesting articles that remind us that design matters a lot. As reported by MarketingVox, a recent survey of the top 100 internet retailers found that horizontal navigation bars, emails with fewer links, HTML coding (vs. images) and special tactics to highlight sales, seasonal specials and featured departments work best in emails.

One question that comes up quite a bit is how to best design emails. MediaPost’s Email Insider included a great piece yesterday that reminded readers to design for preview panes and don’t forget about your landing page design (it’s kind of critical part of the conversion puzzle).

Finally, when it comes to design basics, the most important thing to remember is that many email clients are archaic in how they handle HTML. As such, you may want to remind your web designer (who you’ve probably tapped to design your emails) to design like it’s 1999. There are resources all over the web for best practices, but Dennis Deacon at Smatterings offers a few concise tips:

Layout with Tables

After several years after migrating to using <divs> and CSS to layout web pages, it was awkward, but necessary to revert back to using tables for layout. This to ensure the greatest compatibility with the many email clients used. You should first use a “body” table at 100% width, especially if you plan to use a background color or image for email. This should be followed by a “container” table that will hold the content of your message. The width should be limited to around 600 pixels. You should think of your email message in terms of sections, with each section hosted within a table, with each table stacked on top of each other. A note on nested tables: you should limit the number of nested tables as much as possible. Some email clients have difficulties in rendering multiple levels of nested tables. In the example below, the green stacked tables are nested 2 levels down.

Use CSS Sparingly

Though some email clients can understand CSS instructions, you should limit CSS to simple text formatting. Also, CSS should be implemented in-line, not embedded (within the <head> tag) or from an external style sheet. In fact, at least one email system formats text using the <font> tag, and places in-line CSS as an attribute within the <font> tag. Example:

<font color=”#000000” face=”Verdana, Arial, Helvetica, sansserif” size=”4” style=”FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;FONT-SIZE: 14pt;COLOR: #000000;”>

Use Tables for Backgrounds Colors & Images

If your design includes background colors or images, consider using tables to implement. The <body> tag is frequently stripped on attributes by email clients. Also, make sure your design does not require (is only enhanced by) a background image. Many email clients do not support background images.

Place Your Key Message Prominently

Many people scan their inbox for messages to read or delete. Each email client handles HTML emails differently, even dependent on the platform. Email applications, such as Outlook, provide a preview pane that can be sized and laid out as the user sees fit. This can produce unwanted results, as the main message of your email is more than 200 pixels down the screen and not seen. To improve on this, place a textual statement that presents the key message of the email at the very top of the page. Example:

Using this method also benefits users of email services such as GMail, that display the first few textual characters of each email next to the subject:

Use Alt Text in Images to Repeat Your Message

Most designed think graphically. Therefore, many designers may be horrified when they discover that most email applications and systems have images turned off by default. You can still get your message out, but you’ll have to leverage the image’s “alt” attribute to repeat the message. This way, the message is isplayed in text and not lost. Example (compare with the screenshot above):

These are just a few tips to get you started.  But implementing these simple tactics should help you see big improvements in conversion.  Have any other tips you’d like to share?