Cerberus Hybrid Email Templates

TL;DR: I quietly released a third version of Cerberus responsive email templates. The big difference is that now there is a hybrid template that works on mobile without media queries.

I’ve been writing HTML emails for a while. I’d become comfortable making responsive websites using media queries, so it seemed like a natural fit for emails. I constructed a simple set of responsive email patterns based on responsive breakpoints and called it Cerberus. I could quickly construct emails desktop and responsive emails very quickly. The majority of my email lists primarily use iOS Mail, which supports media queries. I thought I had struck a good balance. Things were going great.

I’ve heard of hybrid email design as a way to enforce responsive email layouts in email clients that don’t support media queries (like Gmail). It seemed like a good idea, but it required a significant amount of extra work and anyway, email isn’t the main function of my job. Clients weren’t asking for it. So I procrastinated learning hybrid design.

While I procrastinated, I watched Gmail usage grow in my lists. I also noticed a number of new mobile email clients popping up, many of which don’t support media queries. I realized the relying on media query support wasn’t going to scale. It was time to invest in hybrid design.

I went to The Email Design Conference in Boston with the goal of learning a practical way to code hybrid emails. By attending Fabio Carneiro’s talk and studying his code, I finally wrapped my head around the concept. I’ve also learned quite a bit from the Action Rocket folks.

The hybrid template reflects what I’ve learned so far. It’s a start, and something I look forward to improving as I go. It’s open source, obviously, so I encourage you to help reduce the entropy of the code.

And wouldn’t you know it, about a month after the conference, a client asked me if I could design a responsive email that looked good in Gmail.