Many marketers overlook the effect design can have on the deliverability of their email messages. So today, I thought I’d pass along some email design tips sent to me by Melissa Richards, director of marketing at Bronto Software. Because design isn’t my area, I also asked Allister Klingensmith, the designer at Leibowitz Communications who created my e-newsletter, to review Bronto’s recommendations to call out the ones he thought were most important.
Use efficient HTML code, and avoid designing your email with any program that allows you to “save for the Web”:
- Properly close HTML tags. Poorly formed HTML often results in email messages rendered in surprising, undesirable ways.
- Be mindful of CSSs (define). Don’t link to external style sheets. Use inline styles tied to individual HTML tags, as they display more reliably. Also, don’t embed CSS in the header tags, as many email clients strip those tags from the email.
- Use an HTML validator. HTML validators ensure your message uses properly formed HTML. Most professional Web design packages and browser add-ons, such as HTML Tidy, include this feature.
- Balance text and messages. Filters look for email messages with only images. If you embed your text and graphics into a single image, you risk your message going straight to the intended recipient’s junk folder.
- Include an alternative text version of your message. Use an email marketing product that allows you to send a text version of your message along with the HTML version. In addition to being another criteria for some filters, the text version of the message ensures readability by email clients that aren’t receptive to HTML messages.
There are many different types of email clients. The way they display messages can vary widely. It’s best to keep your message and HTML code as clean and simple as possible:
- Avoid Flash. Embedded Flash doesn’t work consistently in most email clients other than MacMail (because it uses QuickTime, not Flash, to play). Your e-newsletter doesn’t need Flash, or other overboard design elements better suited to a Web site, to have an impact.
- Use absolute, not relative, links. Relative links open the risk of all links and images being broken in an email because the mail client won’t know where to get them. It’s like addressing an envelope with the house number and street but no city or state. If you code a link to go to “http://bronto.com/stats/,” the client has all the info it needs to get to where you want it to go. If you just code the links as “/stats/,” it’s not complete and things will break.
- Don’t link to images used elsewhere on your Web site. Your Web designer may replace, rename, or delete these images and inadvertently cause those images not to display in your email.
Test, Retest, and Test Again
If you don’t have a distribution list for testing, stop reading this and immediately set up one for your email marketing. Never rely solely on your internal email client and standard browsers for testing. Says Richards, “It’s easy to forget that readers are using lots of different technologies today. You should test for the major ISPs, major email clients [AOL, Gmail, Yahoo, Hotmail, etc.], and, specifically, any email providers that make up a large proportion of your email lists.”
Also test the readability of your messages in different browsers (Internet Explorer, Firefox, Safari) to verify your text and images translate successfully in each. Make a checklist of critical items to test, including:
- CSSs aren’t altered and mangled.
- HTML images aren’t blocked, or there’s a proper placeholder for an image if it doesn’t appear.
- Images are hosted with your email service provider (ESP), not linked from elsewhere on your site.
- The alternative “text version of this email” label is displayed.
- If the email client strips out your text and changes the background color, you can still read the message.
- Columns and tables are unaltered.
- URL links function properly.
As Klingensmith says, “It’s absolutely necessary to check and recheck your coding, delivery, and content for errors. Remember — you can’t recall an email!”