Table of contents
- 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.
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.
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.
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.
- 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.
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 |
<!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.
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 specified 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 different values for different 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 fixed 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 flexibility and power it affords 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 different 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 fix the actual problem itself, no matter which module is affected.
- 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 infinite variety of campaigns, especially when you keep your sections and components modular.
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 defined:
colorfont-familyfont-sizefont-weightline-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 specified 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><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>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]> <![endif]-->See what they learned → <!--[if gte mso 9]> <![endif]--></a></td>
</tr>
</table>
</td>
</tr>
</table>VML-based buttons
Use only when you need either full Outlook compatibility or advanced styling effects.
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 file.
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
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-first. Then, within our media queries, we can use styles to enhance our campaigns for mobile users.
@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>@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">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">Check the Media Query Support table on Litmus.
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 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 fluid 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-specific 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 fluid layout with fixed-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.
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>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 first frame of the file and displays that. To account for this fallback, keep any important information or visuals in that first frame. And, since Outlook disables images by default, use ALT text to provide some extra context.
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).
<!--[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 specified number.
- lte: will target versions less than or equal to the specified number.
- gt: will target versions greater than the specified number.
- gte: will target versions greater than or equal to the specified number.
- &: allows you to chain version numbers, e.g. mso 9 & mso 12.
- |: the ‘or’ operator, lets you target either of the specified numbers.
- !: excludes the specified version number.
- Professional Email Design and Modern HTML Email books by Jason Rodriguez.
- Campaign Monitor email design compatibility information.
- Jason Rodriguez's Email Toolbox.
- Modern HTML Email book Resource List.
- Really Good Emails' Resources
- Email Marketing Resources, by Matt Helbig from Really Good Emails.
- Litmus Frontend Masters workshop.
- Litmus example newsletter issue, newsletter archive and related Google search.
- Litmus designers community.
- Email client market share: Monthly. 2015.
- Salted, based on Litmus email newsletters. See related article on A List Apart and live demo.
- Slate, Responsive Email Templates by Litmus.
- Mnml Pstr, from Modern HTML Email book by Litmus.
- 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.
Advanced email development workflows.
- http://www.smashingmagazine.com/2014/08/04/improve-your-email-workflow-with-modular-design/
- https://medium.com/@victorgarcia/a-workflow-for-responsive-emails-using-ink-and-grunt-32d607879082
- https://github.com/leemunroe/grunt-email-design
- Bulletproof buttons: buttons.cm
- Bulletproof image backgrounds: backgrounds.cm
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.
Recommendations on deliverability optimization (DKIM/SPF authentication, bounces, complaints...).
Amazon SES
SendGrid
Tools for email tracking and stats (open rate, click rate, devices and email clients...).
Great, appreciate your time in writing this.