Skip Navigation

30 email tips you need to know ... OR ELSE

By Darby Jones

SUMMARY: If you don’t follow best practices, your e-mails might start tasting like spam. Even if you avoid being blacklisted, remember that e-mail clients consider several factors before letting your e-mails into the inbox. Once you’re in, still many more factors can break the design layout. The best practices below will help optimize your e-mails, so the design is consistent across all e-mail clients. This will help maintain good open and click rates while keeping unsubscribe and spam complaints low.

If you use an HTML editor to design your e-mails, this article is for you.

DESIGN AND HTML

1. Use alt tags with images. People know by now to right-click if they want to turn on images. So forget that old practice and use the space to promote the call to action. On the other side of the spectrum, fun alt tags can grab attention. Ex. “Don’t right-click me. It tickles.” Reverse psychology works like a charm. Use your imagination!

2. Account for blocked images. Since images will most likely be turned off, insert the name of your church or e-newsletter in plain text somewhere prominent. Do the same with your main call to action. Instead of an image, use HTML fonts, colors, borders and backgrounds to make them pop. This way, they are visible to all readers.

3. Preview pane promotion. The preview pane is the two- to four-inch space in the top left corner. E-newsletters should summarize the issue, and promotional e-mails should highlight the key value proposition and call to action.

4. Use snippet text. Snippet text is what your recipients see next to the subject line. Many e-mail clients such as Gmail and Outlook offer this feature. Snippet text comes from that first bit of text in the top left corner of your e-mail. Usually it comes in the form of an image’s alt tag. One trick is to put a transparent 1-x-1-inch pixel gif image in the top left corner. Use its alt tag as your snippet text. Instead of seeing “Click here to see images,” your recipients will see “Get 20% off ____” or another value proposition.

5. Use nested tables. Since Gmail and Outlook 2007 don’t support float, margin and padding very well, use nested tables for your layout. Table nesting is much more reliable than using left and right margins or padding for table cells.

6. Set cell widths, not table width. For consistency across e-mail clients, set the width for each cell in your table and do not specify a width for the table itself. If you don’t specify a cell width, some clients will not figure it out. Be sure to give each cell a width. Example:

<table cellspacing="0" cellpadding="10" border="0">
<tr>
<td width="80"></td>
<td width="280"></td>
</tr>
</table>

7. CSS has to be inline. Blame Gmail for this. They strip the CSS from the <head> and <body> of e-mails, so there’s no choice but to move CSS inline. Don’t fret; free services such as Pre-mailer will move all CSS inline with the click of a button. Don’t do this until the end of your coding, so you can use all the benefits of CSS.

8. Paragraphs. Paragraphs are tricky to get consistent results. One option is to use <br /> or DIVs instead, but recently the <p> tag has proven reliable. The best approach is to set the margin via CSS in the head like so: p {margin: 0 0 1.6em 0;} and then use Pre-mailer to bring it inline for each paragraph. Inline it will look like this: <p style=”margin: 0 0 1em 0;”>…</p>

9. Avoid using percentage-based widths. Outlook 2007 does not respect them, especially for nested tables. This may change. But for now, stick to pixels.

10. Padding is hit or miss. Either use the cellpadding attribute of the table or CSS padding for each cell. Do not combine the two. If it's not too much hassle, use a nested table and avoid padding altogether.

11. Background images. Some e-mail clients do not support them, so provide a fallback color in case they don’t show up.

12. Avoid spacer images. Image blocking rules this out as being reliable. Some clients strip the image altogether. Stick to fixed cell widths to keep your formatting in place.

13. Image dimensions. If you don’t set the dimensions for each image, some clients will input their own sizes when images are blocked. This will break your layout. Also, make sure images are the correct size before inserting. Some clients ignore the dimensions specified in code and rely on the true dimensions.

14. Display hack for Hotmail. For some reason, Windows Live Hotmail adds a few pixels of padding below images. If you want, you can avoid this by setting the display property like so: img {display:block;}

15. Keep the width less than 600 pixels. This will ensure your design will be readable when scaled down for different mobile devices.

16. Automatic text resizing. This feature increases readability for e-mail clients such as iPhone, Pre and Android. It’s a great thing; however, if testing shows this feature is doing more harm than good to your design, you can disable it with the following CSS rule: -webkit-text-size-adjust: none;

RENDERING

17. E-mail-rendering tool. This tool quickly shows you what your e-mail looks like in a wide variety of e-mail clients. It saves time and is especially useful if you design new e-mail templates on a regular basis. Not all ESPs (e-mail service providers) include this in their feature set.

18. Sign up for a few major e-mail clients. If you don’t have access to an e-mail-rendering tool, sign up for an account with Outlook, Hotmail, Yahoo and Gmail. Then send tests to each client to see how they render your e-mail.

VIDEO

19. Use static images with strong visual cues to indicate video play buttons: Windows Media Player, Quicktime or YouTube.

20. Include video verbiage in copy and subject line.

21. Animated gif images are like a preview to a video. They don’t work in Outlook 2007, but many e-mail clients render them correctly.

22. Some case studies show that both static and animated gif images deliver similar clicks, but the animated gif has an edge in conversion.

SOCIAL

23. Include a request to join your social community. Be sure to explain the value of joining.

24. Allow subscribers to share your content with friends on social networks. Insert a “share this e-mail” button, which connects to sites like Digg, Facebook and Twitter. Share With Your Network (SWYN) is the new Forward To Your Friend (FTYF).

25. Polls, surveys and contests can be big hits if done right. Post the results on your social networks.

SUBJECT AND SENDER

26. A good subject line is 25 to 50 characters.

27. Tell what’s inside—do not sell what’s inside. Anything that smacks of a “pitch” will either be marked as spam or ignored by the masses. Here’s a great article about subject lines from MailChimp that will blow your mind!

28. The sender name should include the name of your church or ministry, not the name of an individual. In most cases, this should positively affect your open rate. Test it to be sure.

A/B TESTING

29. Send two e-mails and change one key variable in one of the e-mails. Then compare the results by tracking open, click and conversion rates.

30. Testing ideas:

  • Short vs. long subjects and copy
  • Simple subjects that don’t sound pitchy vs. creative or funny subjects
  • Humorous vs. serious copy
  • Videos vs. PowerPoint presentations
  • Links at the top vs. links at the bottom

Sending bulk e-mail is much trickier than your average e-mail. The tips above just scratch the surface, but should increase your impact and deliverability. A good ESP (e-mail service provider) can also help. Learn more about e-communications here.

-- Darby Jones, eMarketing Coordinator at United Methodist Communications.