Email Procedures

  1. Approach
  2. Getting started
  3. Helpful pointers
  4. Some Important Pointers
  5. Testing
  6. Before launching campaign

Approach

There are almost always issues with Outlook. Design creatively to avoid tricky implementation but always put the content first.

For responsive emails the design should try to keep the total number of columns to one. Multiple columns rarely work in the Gmail mobile app and are troublesome to make backwards compatible in Outlook. The process of making an email responsive should be achieved by making it more legible through increasing font sizes etc on smaller devices.

For greatest compatibility, email builds should use a tables approach. Use tags including table, td, tr etc to construct an email build.

Styling an email build should be done with inline style="" attributes to ensure that email clients inherit exactly the rules we want. Do NOT use the class="" properties unless for responsive design.

As mentioned, we have a library of historic email builds within our repository. This contains email builds created within the last few years or so, in almost all templates you will find:

1. Body attributes

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

These attributes in the body tag are technically not valid according to W3C but has proved an important addition to all builds within our testing. This essentially sets the margins to zero.

2. Reset styles for the body tag

body {
  width:100% !important;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  mso-margin-top-alt: 0px;
  mso-margin-bottom-alt: 0px;
  mso-padding-alt: 0px 0px 0px 0px;
}

This piece of CSS overrides many issues with Outlook around text size, margin and padding.

3. Set an appropriate viewport tag

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Add the viewport tag for greater mobile compatibility. This has been proven to help force the exact width necessary for mobile devices. Appears to be especially important with responsive email templates.

4. 120dpi screens

<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

Having this piece of code before the closing head tag will help with common issues in Outlook when screen resolution is 120dpi.

Getting started:

The following questions should be asked before starting the email template:

During the build:

To compare an email build against the design, you can use the Pixel Perfect Chrome extension to overlay the design. This allows us to get everything as close as possible. This is typically only useful for the desktop view.

From a code point of view, the following is not a comprehensive list but should all be considered when constructing an email build:

Content pointers

Code pointers

Structural specific pointers

Image pointers

Some Important Pointers

Height - TOP or BOTTOM

Height spacer should use the below syntax and not spacer.gif - some Outlook versions will double the height of a spacer gif so this works as a good alternative...

<tr>
  <td style="mso-line-height-rule:exactly;line-height:25px;font-size:25px;">&nbsp;</td>
</tr>

Width - LEFT or RIGHT

Width spacing should follow using the img tag images/spacer.gif, always make sure to specify the width on the column and the image and always just give a height of 1.

<td width="36">
  <img src="images/spacer.gif" style="border:0;display:block;" alt="" width="36" height="1">
</td>

Pre-Headers

Having a hidden span at the start of the email will display some teaser text in email previews in Gmail etc https://www.campaignmonitor.com/blog/email-marketing/2011/12/a-practical-guide-to-email-preheaders/ - this is NOT relevant for all projects...

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

  <!-- HIDDEN PRE-HEADER TEXT -->
  <div style="display: none; font-size: 1px; color: #FFFFFF; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
    <!-- Content goes here... -->
  </div>
  <!-- EO HIDDEN PRE-HEADER TEXT -->

  <!-- Rest of email template here... -->

Testing

It is vital that email builds are thoroughly tested. Once they are sent, there is no going back! We use our Email on Acid account which typically gives us 90+ email clients to test with. You may use this account to test as you go, sometimes it is recommended to test each block at a time but you may decide to do this for those blocks that are particularly challenging and leave the other blocks until the final rounds of testing.

In addition to testing with Email on Acid, for email campaigns we are sending (and not where we are supplying the code) we should perform an email spam check. It is encouraged to test on both is not spam and mail tester.

Regularly check HTML to ensure code is W3C valid.

Summary of how to test:

Before launching campaign

Before we perform our final Email on Acid, you may want to check the following:

When sending template only

When sending campaign