cerberus logo

Cerberus A few simple, but solid patterns for responsive HTML emails. Even in Outlook and Gmail.

phone outline

Cerberus -
Between desktop, mobile, and Outlook, HTML email is a three-headed dog from hell.

Introduction

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

That's what Cerberus is.

It's just a few responsive email patterns that go a long way. The code blocks are compartmentalized so that they may be used, reused, and nested to build an email.

There are two templates, one that relies media queries and one that does not. Each is annotated and has good support among popular email clients. More on that here.

I wrote a blog post that goes into more detail on why I made this in the first place. Cerberus is Responsive Email XX's successor.

Things To Know

  • Cerberus is a small collection layout patterns for HTML email. The code is meant to be edited, adapted, and built upon.
  • The code is largely compartmentalized and annotated in an effort to explain what’s happening so you can add, edit, and remove code with confidence.
  • This has been tested in all “popular” email clients, but not every email client out there. More on that here.

The Templates

As the layout narrows, the email content reflows and resizes gracefully.

template-without-media-queries.html

This template focuses on a fluid layout that sizes itself regardless of media query support. Good for when media queries aren't available to detect device size and reconfigure the layout.

This layout uses percentage-based widths and to shrink horizontally on narrow screens. All CSS styles are inline, with the exception of a single media query to contain wide widths in Apple Mail. Outlook has spotty support for layouts that shrink on narrow screens, but since they're pretty much shackled to desktop world, we can get away with a fixed-width, wide layout.


The email layout changes at breakpoints using media queries.

template-with-media-queries.html

This template uses media queries to reconfigure the layout for different screen sizes. Good for when you want more control over the email layout.

This template relies media queries to force table columns into rows and make the layout fluid. Mobile clients that don’t support media queries or the <style> tag will display a shrunk version of the desktop layout instead. This applies to Gmail, Inbox, and Android 4.4 Mail.

Client Support

Cerberus is tested in the most popular email clients as reported by Litmus and my own email campaigns.

  • Desktop
  • Outlook 2007/11/13 (Windows)
  • Outlook 2009 (Mac)
  • Apple Mail
  • Thunderbird
  • Web
  • Gmail
  • Outlook.com / Windows Live Mail
  • Yahoo
  • Aol
  • Outlook Web Access
  • Mobile
  • Mail (iOS)
  • Gmail (iOS, Android 4.4)
  • Mail (Android 4.4)
  • Inbox (iOS)
  • Yahoo (iOS)

When I say “tested”, I mean “email doesn’t fall apart”. I don't mean “I found a way to make media queries work in Gmail”. They don’t.

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 out there) chose to include these templates 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 ideas. I'm forever interested in reducing the entropy of this code.

Credits & Resources

Author

Hi there, I’m Ted Goas, the core author and maintainer. I'm a designer & front-end developer working on websites, web apps, and HTML emails. And I enjoy talking shop on Twitter.