Tips & Tricks for Email Marketing Campaigns

May 26, 2014 10:35 am

Tips & Tricks for Email Marketing Campaigns
Developing email campaigns and templates that look consistent across all the major email browsers is a difficult task since each email browser works and displays emails very differently. The following tips and tricks are designed to help you create your own email campaigns and templates that look consistent across all borwsers. There are many other strateigies you can use for your emails, but this list will help with many of the common requests for great looking emails.

Structuring the Email Template

Structuring the email template and campaign should be very close to structuring a website, but unfortunately, it's quite different. Email clients are inconsistent with what formats will and won't work in them so you have to take a step back and use the old <table> structure for all your emails. And since Gmail, again does not support stylesheets, you have to do all your styling inline.

Here is a sample structure that includes padding around the message, forward to a friend message space, single content area, contact information, and the various email links at the bottom (Unsubscribe, Forward to a Friend, and Website link)

<table cellpadding="0" cellspacing="0" style="width: 100%; margin: 0pt; padding: 0pt; border: 0pt none;">
<tbody>
<tr>
<td style="padding: 10px; background: #ffffff;">
<table cellpadding="0" cellspacing="0" style="width: 626px; padding: 0pt; margin: 0pt; border: 0pt none;">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td> Header information and logo</td>
</tr>
<tr>
<td></td>
</tr>
<td style="padding: 10px 0 5px 0; text-align: center; color: blue; font: normal 11px/13px Arial, Helvetica, sans-serif;"><a href="" style="color: blue; text-decoration: none;">Unsubscribe</a> | <a href="" style="color: blue; text-decoration: none;">Forward to a Friend</a> | <a href="http://www.accrisoft.com" style="color: blue; text-decoration: none;">Accrisoft.com</a></td>
</tr>
<tr>
<td style="padding: 5px 0 10px 0; text-align: center; color: black; font: normal 11px/13px Arial, Helvetica, sans-serif;"> Copyright 1998-2012 Accrisoft Corporation<br /> 2001 Siesta Dr., Sarasota, FL 34239<br /><a href="tel:866.980.6333" style="color: black; text-decoration: none;">866.980.6333</a></td>
</tr>
</tbody>
</table>

Note that the contact information and links also include some styling to ensure that the font, color, and sizes are set to a consistent style.


Setting CSS Styles

Unfortunately, with emails, you will need to do all your style formatting inline. This usually means selecting content and using the editor to format small sections at a time, or manually editing the html and wrapping sections in <span> tags to apply the formatting your want.

Until all the major browsers support external stylesheets or even cascading styles, we are stuck formatting everything inline.

Wrapping Text Around an Image

Making the text wrap around an image is actually fairly easy if you add a little bit of old formatting to an <img> tag. Essentially, you apply both:

  • float: left/right style attribute
  • old <img> tag property align="left/right"

For example:

<img align="right" alt="projects" border="0" src="clientuploads/email/project_training.png" style="float: right; padding-left: 10px; border: 0;" />

You can also apply padding as a style attribute to the <img> tag as well to give some additional spacing between the image and the wrapped text.

Spacing Paragraphs

To format and space paragraphs, first format all your text either in <div> or <td> tags. If you need to add spacing between paragraphs:

For <td> tags, you can enter padding to space the text in the cell accordingly.

For <div> tags, either use empty <div> tags (<div>&nbsp;</div>) or user line breaks <br />

The reason for this is a bit complex simply because the various compatibility issues with the different email browsers.

For example, Yahoo! Mail does not include any padding or margins between paragraphs. However, most others do include some default spacing between paragraphs.

And, since Gmail does not support external stylesheets (<link>) or styles entered in the email content (<style>), you can't easily define paragraph spacing for all your paragraph tags.

So, it all comes back to using <div> and <td> tags for all your spacing.

Setting Fonts and Text Colors

Setting fonts, font sizes, and font colors should be pretty consistent and easy in an email, but since Gmail does not allow to use external stylesheets (<link>) or inline stylesheet tags (<styles>), you have to apply inline styles to all your text.

This means you will usually have to highlight each line of text in a campaign or template and apply the appropriate font, font size, and font color. You can easily test this formatting by sending and viewing the email in Gmail to make sure that all the font settings are applied properly.

Using Javascript

On regular websites, javascript often helps you format difficult sections of a website or even provide special formatting for individual browsers. However, you cannot include javascript in your emails. Most browsers will simply ignore an javascript in the email and display the rest of the email as well as possible. But some email browsers will block the entire email if it contains any javascript. So, just to be consistent and safe, do not include any javascript in your emails.

Embedding Videos and File Attachments

Like javascript, do not embed video players or attempt to attach files to emails you send out as email campaigns. While most email clients will simply hide the video or file attachments, others may block the emal entirely. So, to be safe, do not include these formats in your emails. However, you can easily add links to the email that point to videos or files for downloading. You can even create a thumbnail image for a videa and use that with the link to create what looks like an embedded video in the email, but when a visitor clicks on it, it directs them to a website that plays the video.

Testing Email Campaigns and Templates

Testing your email campaigns and templates is the only way to really ensure that the email looks and works consistent across all the email client browsers. Litmus (http://litmus.com/) is a great online tool you can use to see how your emails will look in many different browsers. It does have a small monthly fee for this service, but they also offer a free trial where you can play with the tool before you buy it. They currently provide tests for the following email clients, including many mobile clients:

  • AOL Mail (Explorer)
  • AOL Mail (Firefox)
  • Apple Mail 4
  • Apple Mail 5
  • BlackBerry 8900
  • BlackBerry Curve
  • Color Blindness
  • Gmail (Explorer)
  • Gmail (Firefox)
  • Hotmail (Explorer)
  • Hotmail (Firefox)
  • HTC HD7
  • iPad 2
  • iPhone 3GS
  • iPhone 4S
  • LG Optimus
  • Lotus Notes 6.5
  • Lotus Notes 7
  • Lotus Notes 8
  • Lotus Notes 8.5
  • Nokia N96
  • Outlook 2000
  • Outlook 2002/XP
  • Outlook 2003
  • Outlook 2007
  • Outlook 2010
  • Plain Text
  • Samsung Intrepid
  • Thunderbird 3.0
  • Thunderbird latest
  • Yahoo! Mail (Explorer)
  • Yahoo! Mail (Firefox)