10 Commandments of HTML Email Development

Email is something most people rarely look forward to, but it’s a necessity of communication. It’s the standard. It’s free, open and offers access to anyone with even the most basic of data connections.

As a developer, email has become a necessary evil. Development is slow and tedious. Thankfully, there are ways to speed it up if you’re willing to put in a little work ahead of time.

By setting up a project with Grunt and Node, we can create a project that has everything we need to rapidly develop email templates ready for testing in a tool like Litmus or ….

The 10 commandments of html email:

  1. Use table — div isn’t respected by a number of email clients
  2. All centering and alignment is done directly on table and td with align=’VALUE’
  3. Don’t bother with h1 or p tags — Just include your content in a td and apply the font-size directly to the element. Not doing this will result in some clients seeing an h1 and deciding it has a better value to prescribe that what you’re trying to style it as.
  4. Images are display: block;
  5. All CSS must be inline — e.g. <td style=”font-family: helvetica, sans-serif; color: #444444;”>Content</td>
  6. Progressive enhancement — using media queries, designs can be responsive in the clients that support it, but the baseline design must take into account clients and providers that do not support media queries such as gmail.
  7. Pay attention to the DOCTYPE — Different doctypes will result in slightly different outcomes depending on the client, device or browser. I usually build and test my emails with no doctype and then do a final test with 4.0 transitional so that the email validates.
  8. Set a maximum width of no more than 650px. I usually set mine closer to 620px, but as long as it’s within that 650px maximum, it should render fine without horizontal scrolling.
  9. Don’t forget to include the meta tag. Specifically, you will want to ensure that the devices and clients which can understand a meta tag will be progressively enhanced by setting <meta name=”viewport” content=”width=device-width”>
  10. Take a deep breath, shit will not work out everywhere.