Email Procedures

Approach

There are almost always issues with Outlook. Design creatively to avoid tricky implementation - responsive emails do exist but require a lot more work to implement.

For responsive emails the design should try to keep the total number of columns to 1. 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.

We have a library of historic email builds, please continue to add email builds to the appropriate repository. You’ll see a number of trends, in almost all templates you will find:

1. leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

This sits in the body tag and technically is not valid according to W3C but has proved an important addition to all builds within our testing.

2. 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. <meta name="viewport" content="width=device-width" />

Add the viewport tag for greater mobile compatibility.

Before starting an email build consider the following:

Most of these questions should be answered when provided with a brief, but it is always good to double check as making alterations to an email build can be very fiddly - you should always plan your email build before getting started.

Fallbacks/tips:

This is not a comprehensive list but should all be considered when constructing an email build:

Testing

It is vital that email builds are tested. We tend to use our Mailchimp account to send out test emails. You should test on:

Before Launching Campaign

Here is a checklist of items to look out for: