Engineering Blog - June 13, 2014

Email Best Practices for UI Developers

Roger Flanagan

This guide was created after attending Fabio Carneiro’s talk on Hard Won Lessons in Responsive Email Design at the ConvergeSE Conference in South Carolina. Read more about the conference.

Reset

Images

Some clients will render images with an ugly border by default. All images need to have these styles for reset puposes:

img {border: 0; outline: none; text-decoration: none;}

Headings

Across browsers and email clients, heading elements always end up with different margin and padding settings, so we’ll take care of those as well.

h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}

Fonts

Emails will only render basic cross platform fonts properly, we need to stick with one of the following fonts for best performance.

Sans-Serif

  1. Arial
  2. Arial Black
  3. Tahoma
  4. Trebuchet MS
  5. Verdana

Serif

  1. Courier
  2. Courier Neue
  3. Georgia
  4. Times
  5. Times New Roman

Retina Images

To prevent blurry images on high resolution screens, we need to cut our images at twice the size you are planning to display them. Then set the width and height attributes on the tag.

<img src=“images/zoosk-logo-200×40.jpg” height=“20” width=“100” />

Buttons

Buttons should be made in a table based layout for best cross browser/client support. Styling an anchor tag is not the best option, use the following structure for a bullet proof button with or without an icon.

Standard Button

<tableborder="0"cellpadding="0"cellspacing="0"style="background-color:#66c3ee;border:1px solid #ccc;border-radius:2px;">
    <tr>
        <tdalign="center"valign="middle"style="color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;line-height:150%;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px;">
            <ahref="#"target="_blank"style="color:#FFFFFF;text-decoration:none;">Zoosk Button</a>
        </td>
    </tr></table>

Standard Button with Icon

<tableclass="button"border="0"cellpadding="0"cellspacing="0"style="background-color:#66c3ee;border:1px solid #ccc;border-radius:2px;">
    <tr>
        <!-- Button Icon -->
        <tdalign="left"valign="middle">
            <ahref="#"target="_blank"style="display: block;padding:12px8px12px14px;"><imgsrc="https://dl.dropboxusercontent.com/u/11007063/newsletter-images/blog-heart-icon.png"style=""alt="icon"width="32"/></a>
        </td>
        <!-- Button Text -->
        <tdalign="left"valign="middle"style="color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold;line-height:150%;">
            <ahref="#"target="_blank"style="color:#FFFFFF;text-decoration:none;display: block;padding:12px14px12px8px;">Zoosk Button</a>
        </td>
    </tr></table>

Client Specific Styles

Outlook

Target the classes that Outlook attaches to every email, and force the client to display emails at full width.

.ReadMsgBody {width: 100%;}

.ExternalClass {width: 100%;}

Normalize the line height on any element that’s likely to hold text.

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}

Outlook sometimes adds spacing between tables, which can break a layout when exact spacing matters.

table, td {mso-table-lspace: 0pt; mso-table-rspace: 0pt;}

IE

Force IE to smoothly render resized images.

img {-ms-interpolation-mode: bicubic;}

OSX/IOS

Webkit will set the base font size at 13px and any element less than that will automatically get resized. If you need your text to render at a smaller size you will need to add:

<!-- You could set it on the individual element as well -->
body {-webkit-text-size-adjust:100%;}

Dates and Phone Numbers are automatically turned into links so users can access the content in other apps like calendar, or maps. If that is not the desired intention, you will need to add the following snippet to the head of your document.

<meta name=“format-detection” content=“telephone=no”>

Windows Mobile

Like IOS, Windows Mobile will set a base font-size. If you need smaller text add:

body {-ms-text-size-adjust: 100%;}

Helpful Links

Campaign Monitor CSS Guide
ALISTAPART: Can Email Be Responsive
CSS-Tricks: Ideas Behind Responsive Emails
Zoosk Email Boilerplate

Misc.

Emails work best across all clients when the width is set at 600px, due to many email clients preview windows. A 600px width won’t force horizontal scroll bars.
We need to be using the strict doctype to avoid little quirks when client testing in Gmail and Outlook