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.
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:
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.
A blog post goes into more detail on how Cerberus was created.
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:
- Desktop
- Outlook 2000/02/03/07/10/13/16/18 (Windows)
- Windows 10 Mail
- Outlook 2011/16 (Mac)
- Apple Mail 9/10
- Thunderbird
- Mobile
- iOS Mail (iPhone + iPad)
- Gmail (iOS + Android, all account types)
- Mail (Android 6.0)
- Yahoo (iOS)
- Outlook (iOS)
- Alto Mail (iOS)
- Web Browser
- Gmail (IMAP, GSuite)
- Outlook.com
- Yahoo
- AOL
- Office 365 Web
- Comcast
- Web.de
- GMX.de
- freenet.de
- T-Online.de
- Mail.ru
- Terra Mail
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:
- Fixing existing code that’s broken.
- Reducing the amount of code in existing patterns.
- Improving the documentation.
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
.
Special thanks
- Site logo by Dan Stiop
- Everyone in Email Geeks Chat