Email Coding Guidelines

Table of contents

TL;DR
Intro
Layout
Typography
Actions
Images
Responsive email
Cool stuff
Appendix
Resources

TL;DR

Use Salted template. See unofficial live demo.
Have a look at Litmus newsletters for design inspiration and code snippets.
Read the Intro and refer to the development notes while coding.
Always test.

Intro

This is a short guide on how to code and test HTML emails to ensure maximum compatibility and deliverability.

These will be our main goals:

Follow a modular approach to email design and development.
Use a modern, responsive, mobile-friendly email template.
Have a single source of documentation on modern and tested email development practices.

Responsive template

We'll use Salted, a simple responsive email template based on the code used by Litmus for their own email newsletters.

Unofficial Salted live demo.
Real Litmus newsletter examples.

Here's a breakdown of Salted's template main features:

Modular structure: makes easy to swap out pieces of our emails and work on sections in isolation.
Robust images: nice looking ALT text when images are disabled.
Bulletproof buttons: calls-to-action display even when images are disabled.
Fully responsive: fluid tables, fluid images, and media queries to adjust content and layout on mobile devices that support it.

Basic design constraints and workflow

Always make sure that you stick to the following rules:

Maximum content width: 600px
Maximum grid columns: 3
Base font size: 16-18px

Then, create a style guide containing every modular email component: header, footer, hero section, buttons, single-column copy section, two column grid section, article listing section...

Don't forget to add:

A preheader text (can be hidden).
A link to “Unsubscribe” and, optionally, to “Manage subscription”.
A link to “View in browser”.
Basic company info, such as name, logo, tagline, copyright and mailing address.

Optionally, consider adding:

Sharing buttons.
A note on the footer stating the reason why the user is receiving this type of emails (marketing, newsletter, transactional, life-cycle).

This style guide should be vector-based (Sketch, Antetype, Illustrator...) and use px for dimensions.

When looking for design inspiration, have a look at the showcase galleries listed on the Resources section and, especially, at the Litmus newsletter examples, as they are a perfect match for the Salted template.

Basic email development workflow

Code the modular email components as isolated HTML/CSS templates using Salted as the base template.
Build email templates by stacking components from the previous step.
Manually inline necessary styles.
Always include a plain text alternative.
Always include a web-based version.
Use Litmus for testing (design previews, spam filtering).
For maximum deliverability, follow your email service provider recommendations (authentication, bounces, complaints...).

Lastly, refer to the following documentation while coding:

The notes below, taken from the Professional Email Desgin book, written by Jason Rodriguez, maintainer of the Salted responsive email template.
The related external Resources.

Layout

Email is not the web

There are no agreed upon standards that email client vendors need to support. Every single email client supports a limited subset of HTML and CSS.

At a very high level, here's what you can expect:

Web Design	Email Design
`<div>`	`<table><tr><td>`
`<h1>` to `<h6>`	`<td>` or `<span>`
`<p>`	`<td>` or `<span>`
`margin`	`padding`
`<style>`	`style=""`
`em`, `rem`	`px`
`background-color`	`bgcolor=""`
`#fff`	`#ffffff�`

Basic document structure

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
    </style>
  </head>
  <body>
  </body>
</html>

Most email clients block external stylesheets and some email clients strip out the <head> section, so we are left with inline styles.
The <style> block in the <head> will contain CSS resets you need to include, as well as CSS that progressively enhances any essential, inlined styles or is meant for mobile email clients.

Tables for layout

We only need three elements for marking up any and all content: the <table>, <tr>, and <td> elements.

<table>
  <tr>
    <td>...CONTENT...</td>
  </tr>
</table>

As attributes we'll only use: align, bgcolor, border, cellpadding, cellspacing, width.

Generally speaking, you will apply border, cellpadding, cellspacing, and width to every table in your design. Sometimes you will need to align a table, too.

For table cells, you will often need to include align attributes as well as the occasional width and bgcolor.

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
          <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td>
                ...CONTENT...
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

You’re going to have to use tables to structure everything. This is accomplished with a few things: inline styles, the align attribute, nested tables, and stacked tables.

Spacing content

The most useful CSS property is padding. Combined with speciﬁed widths on tables or table cells and the align attribute, the padding property does 90% of the work in any email design.

Explicit:

<td style="padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-
left: 20px;"></td>

Shorthand (specify the 4 values, never use the 2 or 3 values shorthand notation):

<td style="padding: 10px 20px 10px 20px;"></td>

Do not use the cellpadding or cellspacing attributes for spacing:

You can’t specify diﬀerent values for diﬀerent sides of an element.
If you’re using nested tables or specifying a lot of widths, keeping track of the math can get complicated.

cellpadding and cellspacing will always be set to zero. This is to override any padding or spacing an email client automatically adds to a table or cells.

Aligning content

Rely on the align attribute applied to a table cell to align content: left, center, right.

<td align="center" style="padding: 10px 0 10px 0;">
    ...FEATURED HEADLINE...
</td>

Multiple columns

For simplicity’s sake, try to keep things in three columns or fewer.

Use 48% and 33% for two- and three-columns layouts, respectively.

Declaring the widths of the columns to be slightly less than the total width of your email will account for extra padding and borders that could be introduced by Outlook.

Wrap the email in a 100% wide container table, followed by a ﬁxed width table to constrain all of our content. Then, we can apply percentage-based widths to the table cells for our columns.

Along with the typical align and width attributes, it’s a good idea to include the valign attribute on the table cell.

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
          <td align="left" valign="top" width="48%">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="padding: 10px 10px 10px 10px;">
                ...CONTENT...
                </td>
              </tr>
            </table>
          </td>
          <td align="left" valign="top" width="48%">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="padding: 10px 10px 10px 10px;">
                ...CONTENT...
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

While you could add the content directly to the outer column table cells, include a 100% wide content table above for added control over that content.

If we want to add some whitespace around the column content, we now have two options: on that column’s table cell, or on any of the table cells within the content table. Plus, we can keep our components within that content table modular, too. Dumping all of your content directly in the column table cell would require you to use hard-coded line breaks for adding spacing between sections in that column, which isn’t very reliable or maintainable.

Sure, the content table adds some markup, but the ﬂexibility and power it aﬀords us far outweighs the slightly bloated code.

Modular Sections

When it comes to building up entire email templates, the best strategy is to make them modular.

Essentially, each horizontal section in the email is its own modular component. Those modular components consist of their own table structure which contains all of that section’s content. Then, those modular sections are stacked to build out an entire template.

Let’s take a basic email newsletter as an example. The modular components, housed in their own 100% wide tables, would be broken down as follows:

Header Section
Hero/Featured Item Section
Article Section
Article Section
Closing CTA Section
Footer Section

┌──────────────────┐
│      Header      │
└──────────────────┘
┌──────────────────┐
│       Hero       │
│                  │
│                  │
│                  │
└──────────────────┘
┌──────────────────┐
│     Article      │
│                  │
└──────────────────┘
┌──────────────────┐
│     Article      │
│                  │
└──────────────────┘
┌──────────────────┐
│       CTA        │
└──────────────────┘
┌──────────────────┐
│      Footer      │
└──────────────────┘

While we could very easily wrap every content section as table rows and cells of a single parent table, using stacked, modular tables has a number of advantages.

First, they are reusable and allow us to mix and match diﬀerent components to build out emails for a variety of purposes. We can easily build up a library of content components that can be swapped in and out of templates to cover pretty much any use case.
Second, they make troubleshooting problems in an email much easier. Since each component is separate, we can quickly identify where a visual problem is. Instead of spending time hunting down what’s causing a problem in one big table, we can use that time to ﬁx the actual problem itself, no matter which module is aﬀected.
Third, using stacked, modular tables makes it easier to deal with a weird Outlook bug that can break some designs. Basically, Outlook has an internal page height (based on the Word rendering engine) that can break really long emails. If your entire email is contained within one table, things end up looking fairly ugly when broken. However, using the modular method gives Outlook more natural breaking points, keeping your design largely intact.

Every email campaign is basically a remix or combination of the above. Using single, double, and triple columns allow you to build up a near inﬁnite variety of campaigns, especially when you keep your sections and components modular.

Typography

Don't use semantic elements to markup text: <h1> to <h6>, <p>...

Every rendering engine has its own way of styling those elements, meaning you would need to override those default styles.

All of our styles should be applied to <td> instead.

<td style="PUT YOUR STYLES HERE">This is...</td>

This approach will be applied to all of our text with the exceptions of:

Links, which will be styled using the <a> tag.
Text within a section that needs special styling, which will be handled with the <span> tag.
Things like dates, times, phone numbers, etc. that some email clients insist on making links.

If a table cell contains text, it should always have the following styles deﬁned:

color
font-family
font-size
font-weight
line-height

You can’t rely on table cells inheriting styles from a parent.

<td style="color: #666666; font-family: Arial, sans-serif; font-size: 18px; font-
weight: normal; line-height: 22px;">Blah, blah...</td>

Font color

Use the six-character hexadecimal value.

color: #ffffff;

Font stack

Use single quotes for font names that contain spaces.

font-family: Futura, 'Trebuchet MS', Arial, sans-serif;

Font size

Use px for font sizing.

font-size: 18px;

Some mobile devices automatically resize text that is smaller than 14px.

Here’s how you prevent WebKit and Windows mobile from changing default text sizes:

<head>
  <style type="text/css">
    body, table, td, a {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
  </style>
</head>

Font weight

A font’s weight can be declared using either a keyword (e.g. normal, bold, bolder) or a numerical value (e.g. 100, 200… 900).

<tr>
  <td style="padding: 10px 0 10px 0; color: #222222; font-family: Arial,
sans-serif; font-size: 32px; font-weight: bold; line-height: 30px;">Heading</td>
</tr>
<tr>
  <td style="padding: 10px 0 10px 0; color: #666666; font-family: Arial,
sans-serif; font-size: 18px; font-weight: normal; line-height: 22px;">Text body.</td>
</tr>

Line height

Use a pixel value when setting the line-height property, like so:

<td style="line-height: 20px;"></td>

Font styles

This property allows you to specify one of three variations of a font: normal, italic, or oblique.

Inline styling

Don't use <strong>, <em>... for inline text markup and styling. Use <span> instead:

<td style="color: #666666; font-family: Arial, sans-serif; font-size: 18px; font-
weight: normal; line-height: 22px;">Blah, blah... <span style="font-
style: italic;">italicized blah.</span></td>

That last two words will inherit the values set for every other property in the table cell but will be emphasized, too.

Web fonts

Use exactly the following syntax to include external web fonts:

<head>
  <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
  </style>
</head>

<td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-
serif; font-size: 18px; font-weight: 400; line-height: 22px;">...CONTENT...</td>

While this method has the best support across email clients, it still doesn’t work everywhere. That’s why choosing good fallback fonts is so important.

Some versions of Microsoft Outlook will not only ignore the web fonts, but will fall back to Times New Roman instead of any speciﬁed fallbacks. Use conditional comments and a CSS class to provide a revised font stack for Outlook.

<!--[if mso]>
<style type="text/css">
  .body-text {
    font-family: Arial, sans-serif;
  }
</style>
<![endif]-->

<td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-
serif; font-size: 18px; font-weight: 400; line-height: 22px;" class="body-
copy">...CONTENT...</td>

Actions

Links

<a href="http://example.com" style="color: #6aa7a4; text-decoration: none;">Check it
out</a>

Apple’s iOS will automatically turn certain types of text into links, without you ever wrapping the text in an anchor:

Dates
Phone numbers
Addresses
Times
Email addresses

This is how you prevent that from happening:

<style type="text/css">
  .apple-links a {
    color: #eaeaea !important;
    text-decoration: none !important;
  }
</style>

<span class="apple-links">
  1234 Main Street <br>
  Anywhere, MA 56789
</span>

Buttons

Don’t use image based buttons. A lot of email clients block images by default. Use "bulletproof" buttons.

Padding-based buttons

Use a single-row, single-cell table with a link. Styling is then applied to the table cell to structure the button, with additional styles added to the link itself (color, font-size, etc.).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#00bafc" style="padding: 12px 18px 12px 18px; -webkit-
border-radius:4px; -moz-border-radius: 4px; border-radius:4px" align="center"><a
href="http://rodriguezcommaj.com" target="_blank" style="font-size: 16px; font-
family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration:
none; display: inline-block;">Bulletproof Buttons</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Border-based buttons

It is built with extremely thick borders on the anchor tag itself. With all of the styling on the anchor tag, the entire button ends up being clickable.

The drawbacks are that Outlook doesn't always like those large borders (shrinking them down), background images aren't supported, and you can't apply more advanced styles (splitting them between the table cell and anchor tag).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="http://rodriguezcommaj.com" target="_blank" style="font-
size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-
decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-
radius: 4px;  background-color: #00bafc; border-top: 12px solid #00bafc; border-
bottom: 12px solid #00bafc; border-right: 18px solid #00bafc; border-left: 18px
solid #00bafc; display: inline-block;">Bulletproof Buttons</a>
          </td>
        </tr>  
      </table>
    </td>
  </tr>
</table>

Hybrid buttons

There are other solutions that take a hybrid approach and combine elements of the padding- and border-based buttons, along with some conditional styles for Outlook. It all depends on your needs and where your audience is opening emails.

Example hybrid button used in a Litmus newsletter.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#235a8b"><a href="http://pages.litmus.com/e/31032/rce-Pardot-amputm-medium-email/w44k4/114596009" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #235a8b; display: block;"><!--[if gte mso 9]>&nbsp;<![endif]-->See what they learned → <!--[if gte mso 9]>&nbsp;<![endif]--></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

VML-based buttons

Use only when you need either full Outlook compatibility or advanced styling effects.

http://buttons.cm

Images

You should only use the following image formats:

JPEG
PNG
GIF

Image paths

You'll always need to use absolute paths for your images. You have to host images somewhere, it doesn’t matter whether it is on your own server or your ESP’s. Never use relative image paths.

Image dimensions

Explicitly state the width of an image to ensure that it displays at its intended size. Especially in Outlook, which can’t interpret an image’s size from the ﬁle.

This is typically done in the width="" attribute on the <img> element.

<img src="http://site.com/path/to/image.jpg" width="600" height="200">

Other alternatives are the inline CSS Method:

<img src="http://site.com/path/to/image.jpg" width="600" style="height: auto;">

And the internal CSS Method:

<style type="text/css">
  img { height: auto !important; }
</style>

Remove linked image borders

When you wrap your <img> tag with an <a> link, some email clients will automatically add a blue border around the image.

To prevent blue borders, add border="0" to the image tag.

<img src="http://site.com/path/to/image.jpg" width="600" border="0">

Gaps around images

Some designs call for images placed next to or on top of each other.

The easiest way to remove gaps (both horizontal and vertical) is to add style="display: block; to the <img> tag:

<img src="http://site.com/path/to/image.jpg" width="600" border="0"
style="display: block;">

Alt text

Use the alt attribute to provide some contextual information about the images.

<img src="http://site.com/path/to/image.jpg" alt="Lifting off to the future"
width="600" border="0" style="display: block;">

Using inline styles on the img tag, we can style the alt text (font styling and background colors) so that our design holds up beautifully even in the absence of images.

<img src="http://site.com/path/to/image.jpg" alt="Lifting off to the future"
width="600" border="0" style="color: #00bafc; font-family: Arial, sans-serif;
font-size: 18px; display: block;">

Retina images

Let’s say we have a photograph that needs to be 600x400 pixels. To make it appear crisp on Retina displays, save it out at least twice the intended size. In this case, we would export it at 1200x800 pixels. Then, in our code, we would just use the 600x400 sizing:

<img src="http://site.com/path/to/retina-image.jpg" alt="So Crisp" width="600"
height="400" border="0" style="display: block;">

Image optimization

Use ImageOptim for every image. Further optimization can be achieved with the help of the following tools:

JPEG: JPEGmini or Kraken.io
PNG: ImageAlpha
GIF: Gifsicle

Responsive email

The 3 tenets of responsive web design:

Fluid layouts
Fluid images
Media queries

Media queries will always live in a <style> block in the <head> of our emails.

Due to the limited support of media queries in email clients, especially desktop clients, it’s typically safer to rely on max-width and build desktop-ﬁrst. Then, within our media queries, we can use styles to enhance our campaigns for mobile users.

Fluid layouts

@media screen and (max-width: 600px) {
  table[class="fluid-table"] {
    width: 100% !important;
  }
}

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="600" class="fluid-
table">
        <tr>
          <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td>
                ...CONTENT...
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Fluid images

@media screen and (max-width: 600px) {
  img[class="fluid-image"] {
    width: 100% !important;
    height: auto !important;
  }
}

<img src="http://site.com/path/to/image.jpg" alt="Some Descriptive Text"
width="600" border="0" style="display: block;" class="fluid-image">

Adjusting other elements

Text size:

@media screen and (max-width: 600px) {
  td[class="mobile-copy"] {
    font-size: 18px !important;
    line-height: 22px !important;
  }
}

<td style="color: #666666; font-family: Arial, sans-serif; font-size: 14px; font-
weight: normal; line-height: 18px;" class="mobile-copy">Blah, blah...</td>

Padding:

@media screen and (max-width: 600px) {
  td[class="mobile-padding"] {
    padding: 20px 10px 20px 10px !important;
  }
}

<td style="padding: 10px 0 10px 0;" class="mobile-padding">

Media query support

Check the Responsive Email Support table.

Media queries are useless to Gmail, both as a webmail client and in its various mobile app incarnations. Although that could change in the near future.

So, is there a way to still make responsive emails that work in Gmail?

The hybrid coding approach

The hybrid coding approach is an alternate way to set up the structure of your campaigns that works well even in the absence of media query support.

All Fluid Layout

Since everything is ﬂuid by default in the hybrid coding approach, we don’t need to change width values using media queries, and things just naturally work in Gmail. However, this leads to the problem of constraining the width, since we don’t want insanely wide emails on large screens.

max-width and an Apple Fix

Use the max-width CSS property to constrain a table width.

Apple Mail doesn’t support the max-width property, but it does support media queries, so we can use a desktop-speciﬁc media query and CSS classes to keep things constrained there:

@media screen and (min-width: 601px) {
  .container {
    width: 600px !important;
  }
}

Dealing With Outlook

Outlook refuses to play nicely unless you constrain the ﬂuid layout with ﬁxed-width tables. Use conditional comments to target Outlook.

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
<![endif]-->
... ALL OF YOUR TABLES GO IN HERE ...
<!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

More info on the Hybrid Coding approach http://labs.actionrocket.co/the-hybrid-coding-approach.

This approach does still present some drawbacks:

Maintainability: depending on the complexity of the layout, this approach gets really hairy, really fast.
Future-proof: the Gmail team is working towards @media support, rendering this approach completely unnecessary in the near future.

Unless responsive Gmail coverage is absolutely required, the extra code isn’t worth it.

Cool stuff

CSS3

Any of the following CSS3 styles (border-radius, text-shadow, box-shadow, transforms) can be applied directly on an element without any serious consequences. When an email is displayed in a client that lacks CSS3 support, the elements degrade gracefully to an acceptable state.

border-radius

<td bgcolor="#00bafc" style="padding: 12px 18px 12px 18px; -webkit-
border-radius:4px; -moz-border-radius: 4px; border-radius:4px" align="center"><a
href="http://rodriguezcommaj.com" target="_blank" style="font-size: 16px; font-
family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration:
none; display: inline-block;">Bulletproof Buttons</a></td>

text-shadow

<td bgcolor="#00bafc" style="padding: 12px 18px 12px 18px; -webkit-
border-radius:4px; -moz-border-radius: 4px; border-radius:4px; -webkit-text-
shadow: 1px 1px 1px #ffffff; -moz-text-shadow: 1px 1px 1px #ffffff; text-shadow:
1px 1px 1px #ffffff;" align="center"><a href="http://rodriguezcommaj.com"
target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; font-
weight: normal; color: #063157; text-decoration: none; display: inline-
block;">Bulletproof Buttons</a></td>

box-shadow

<td bgcolor="#00bafc" style="padding: 12px 18px 12px 18px; -webkit-
border-radius:4px; -moz-border-radius: 4px; border-radius:4px; -webkit-box-
shadow: 0 2px 8px #cccccc; -moz-box-shadow: 0 2px 8px #cccccc; box-shadow:
0px 2px 8px #cccccc;" align="center"><a href="http://rodriguezcommaj.com"
target="_blank" style="font-size: 16px; font-family: Arial, sans-serif; font-
weight: normal; color: #ffffff; text-decoration: none; display: inline-
block;">Bulletproof Buttons</a></td>

transforms

<td bgcolor="#00bafc" style="padding: 12px 18px 12px 18px; -webkit-
border-radius:4px; -moz-border-radius: 4px; border-radius:4px; -webkit-transform:
skewX(-10deg); -moz-transform: skewX(-10deg); transform: skewX(-10deg);"
align="center"><a href="http://rodriguezcommaj.com" target="_blank" style="font-
size: 16px; font-family: Arial, sans-serif; font-weight: normal; color: #063157;
text-decoration: none; display: inline-block;">Bulletproof Buttons</a></td>

Animations

CSS3 transitions and animations have extremely limited support in email clients.

When you need to add animation to an email reliably across a lot of clients, then the best tool is to use an animated GIF.

With these styles, it’s necessary to include them in the head of your email.

CSS3 Transitions

<style type="text/css">
  a {
    color: #00bafc !important;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    transition: color 0.4s ease;
  }
  a:hover {
    color: #000000 !important;
  }
</style>

CSS3 Animations

@-webkit-keyframes animated {
  0% { transform: scale(0, 0); }
  50% { transform: scale(1.4, 1.4); }
}
@-moz-keyframes animated {
  0% { transform: scale(0, 0); }
  50% { transform: scale(1.4, 1.4); }
}
@keyframes animated {
  0% { transform: scale(0, 0); }
  50% { transform: scale(1.4, 1.4); }
}

img[class="logo"] {
  -webkit-animation: animated 1s 1;
  -moz-animation: animated 1s 1;
  animation: animated 1s 1;
}

Animated GIF

<img src="http://site.com/path/to/fashions.gif" alt="The latest fashions"
width="600" border="0" style="display: block;">

Microsoft Outlook refuses to show the actual animation in a GIF. Instead, it falls back to the ﬁrst frame of the ﬁle and displays that. To account for this fallback, keep any important information or visuals in that ﬁrst frame. And, since Outlook disables images by default, use ALT text to provide some extra context.

Video

The HTML5 <video> tag only works in Apple Mail and Outlook 2011 for Mac (which is basically Apple Mail).

Use animated GIFs to fake video in email, or images linking out to external videos (a video still and a big play button).

Appendix

Conditional Outlook rules

<!--[if mso 12]>
    <style type="text/css">
    ... Outlook Specific Styles ...
    </style>
<![endif]-->

Outlook Version	Conditional Number
Outlook 2000	9
Outlook 2002	10
Outlook 2003	11
Outlook 2007	12
Outlook 2010	14
Outlook 2013	15

lt: will target versions less than the speciﬁed number.
lte: will target versions less than or equal to the speciﬁed number.
gt: will target versions greater than the speciﬁed number.
gte: will target versions greater than or equal to the speciﬁed number.
&: allows you to chain version numbers, e.g. mso 9 & mso 12.
|: the ‘or’ operator, lets you target either of the speciﬁed numbers.
!: excludes the speciﬁed version number.

Resources

Inspiration

Reference

Professional Email Design book.
Campaign Monitor email design compatibility information.
Jason Rodriguez's email design resources.
Litmus Frontend Masters workshop.
Litmus example newsletter issue, newsletter archive and related Google search.
Litmus designers community.
Email client market share.

Templates

Salted, based on Litmus email newsletters. See related article on A List Apart and live demo.
Zurb Ink
MailChimp email blueprints
Antwort
Cerberus

All of these templates are available for editing and testing on Litmus Builder, a web-based email editor.

Workflow

Advanced email development workflows.

Tools

Bulletproof buttons: buttons.cm
Bulletproof image backgrounds: backgrounds.cm

Testing

Tools for testing our email designs on different devices and email clients, and checking against popular spam filters.

Litmus tools are recommended and preferred over other alternative testing tools.

Deliverability

Recommendations on deliverability optimization (DKIM/SPF authentication, bounces, complaints...).

Amazon SES

Email Sending Best Practices

SendGrid

Analytics

Tools for email tracking and stats (open rate, click rate, devices and email clients...).

litmus.com

LazerPanther/email_coding_guidelines.md