Between desktop, mobile, and Outlook, HTML email is a three-headed dog from hell.
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.
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.
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.
Cerberus is tested in the most popular email clients as reported by Litmus and my own email campaigns. Litmus tests are available for template-with-media-queries and template-without-media-queries, but I've focused on the following clients:
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.
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.