###A few responsive email patterns that go a long way
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. Everything has good email client support, including Outlook, Android, and even mobile Gmail.
There are two templates, one that relies media queries and one that does not.
I wrote a blog post that goes into more detail on why I made this. Cerberus is Responsive Email XX's successor.
###template-default.html
- Forces columns into rows
- Uses fluid images
- Includes two breakpoints
- Works most everywhere for desktop
- Relies on media queries for narrow screens
###template-fluid.html
- Works most everywhere, including Mobile Gmail and Android 4.4 Mail
- Fluid layout using
max-widthto shrink email's width - Fixed, wide layout for Outlook and Lotus 8
- Guide to CSS Support from Campaign Monitor.
- HTML Email Boilerplate from Sean Powell.
- Bulletproof Email Background Images from Stig Morten Myre.
- Image-Less Buttons from Alex Ilhan.
- Placeholder Images by Brent Spore.
- Responsive HTML Emails: a Different Strategy by Fog Creek.
If you can make this better, please download, fork, and submit a pull request. I'd love to work on this with a few folks and get it as solid as can be.