Email Procedures

  1. Approach
  2. Getting started
  3. Helpful pointers
  4. Some Important Pointers
  5. Testing
  6. Before launching campaign
  7. Troubleshooting
  8. Designs from third parties

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>

Custom Fonts

If a custom font is used that is not a system font, do make sure to import the font through the import link within the template i.e.

<style>
  @import url("https://use.typekit.net/{hased_string_here}.css");
</style>

However, if you find there are issues with Outlook on iOS then you may want to implement using <link>:

<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400&display=swap" rel="stylesheet" type="text/css">

As a side note, do make sure that the client is happy with the default font if for some reason typekit is done and cannot load in the custom font i.e.

body {
  /* ... */
  font-family: brandon-grotesque, Calibri, sans-serif;
  /* ... */
}

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. If this is a bespoke email build, it is recommended to test the email build in chunks (perhaps blocks at a time) as a bug might might appear mid-build and finding it earlier will cause fewer headaches.

Code tests to run

Using Email on Acid, please check for the following

Regardless of whether or not this is a code build, drag and drop or a simple template, please do test with Email on Acid. Other than anything that appears to be broken, also look out for:

When you are almost finished, run the following spam tests

Content checks to make

When sending campaign

Troubleshooting

Designs from third parties