Cerberus Makes Your HTML Email Work On Any Client

Ted Goas from New Jersey knows what he’s talking about. He calls his latest project Cerberus, which educated people surely know to be the three-headed dog from hell aka hell-hound. He thinks the naming to be appropriate for an ambitious project like his, that aims to make HTML email work (three-headed) over desktops, mobiles and - even - Outlook. Cerberus is a collection of patterns compiled into two templates for you to build your email newsletters upon.

Cerberus: Two Templates To Rule Them All

Ted is also the creator of Responsive Email XX, which was initially invented to serve the same task. According to Ted he found it to be unnecessarily complicated over time, which made even himself stop using it. So he decided to think the whole thing over. What he came up with is Cerberus. Cerberus is a much more simple, yet completely sufficient solution to help you build responsive email quickly, reliably and visually pleasing. The two templates that make up Cerberus are different in one main respect. While one template relies on media queries, the second is completely fluid. Both are responsive, so which one you should choose, depends largely on who you send email to. The biggest downside of the media queries variant is that it doesn’t work with iOS Gmail, Android Gmail and Android Mail 4.4. It cooperates perfectly with any other client, such as web versions of Gmail, Yahoo, AOL Mail and Outlook as well as desktop versions of Apple Mail, Outlook and Thunderbird and generally also on mobile platforms with iOS Mail and Android Mail to 4.3. Yet when it comes to Gmail on iOS or Android and Android Mail 4.4, the template falls short. Android Mail 4.4 does not allow to force table columns into rows as it doesn’t support {display:block !important;}, while mobile Gmail strips out the <style>tag completely. If you send out a newsletter for Outlook enthusiasts, though, this should not be much of a problem as you might correctly assume them to read the email in Outlook anyway. But, if you target mobile users, it might be better to opt for the second template. The second template is completely fluid. This is not so pretty on large screens and beautiful on small mobile devices. The problem is not too big, as email usually isn’t shown full-screen anyway, but stays in a more or less small part of the screen. This is certainly true for Outlook, if you don’t tend to open email into a separate window, which at least I have never done in the long gone years when I used to rely on the bulky Microsoft client. The fluid template uses percentage-based widths to make the layout shrink horizontally on smaller screens. All CSS styles are inline. Cerberus is available completely free under the terms of the MIT license. You can use it for private and commercial projects alike. Download it from Github.

Related Links

• Cerberus: Simple Patterns for Responsive Email | Ted Goas’ Blog
• Cerberus | Project Website
• Cerberus | Github Repository

Tools and Resources

• Guide to CSS Support by Campaign Monitor
• HTML Email Boilerplate by Sean Powell
• Bulletproof Email Background Images by Stig Morten Myre
• Image-Less Buttons by Alex Ilhan
• Placeholder Images by Brent Spore
• Responsive HTML Emails: a Different Strategy by Fog Creek