Cerberus

A few simple, but solid patterns for responsive, accessible HTML email in (almost) every email client.

Because between mobile, Gmail, and Outlook, HTML email is a three-headed dog from hell.

View on Github

Overview

Coding regular emails is hard enough by itself. Making them responsive and accessible shouldn’t add to the headache. A few simple, but solid patterns are all that’s needed to optimize emails for small screens and assistive technologies.

That’s what Cerberus is. It’s just a few email patterns that go a long way.

The code blocks are compartmentalized so they may be used, removed, combined, and nested to build an email. Each template is annotated with code comments explaining what’s happening so you can add, edit, and remove code with some confidence.

Here's an example of a button:

<!-- Button : BEGIN -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
<tr>
  <td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
    <a class="button-a button-a-primary" href="#" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Button Text</a>
  </td>
</tr>
</table>
<!-- Button : END -->
Button Text

Cerberus is plain 'ol HTML and CSS, so it an be used in any framework or email service provider (ESP), though it's not written for any specific framework or ESP.

I wrote a blog post that goes into more detail on why I made this in the first place.

Email Client Support

Cerberus is tested in the most popular email clients as reported by Litmus and my own email campaigns. I’ve focused on the following clients:

Any client not listed above should be considered untested. If you feel I’ve left out a popular email client or can suggest a non-destabilizing fix for one, please submit an issue!

For what it’s worth, Litmus (who does test every email client) includes Cerberus in its Email Builder, so there’s that.

Contributing

If you would like to help, please @reply me on Twitter or open an issue to discuss your idea. I’m forever interested in reducing the entropy of this code. I’m most interested in:

Please be mindful there are three templates that share a lot of code. Many changes apply to all three.

Please branch off the main branch instead of master.

Author

👋 I’m Ted Goas, the core author and maintainer. I’m a product designer & front-end developer with a soft spot for HTML emails. Some day I'd love to combine my professional craft and hobby to work on an email platform.
@tedgoastedgoas.com

Special thanks

Ready Made HTML Email Templates

If you’d prefer something that’s ready out of the box, I vouch for htmlemail.io. Responsive email templates, fully tested, and ready for your ESP or codebase. I know Lee personally and he knows his stuff!