Cerberus

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


Cerberus -

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


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.


The Author

Made by Ted Goas in scenic New Jersey, U.S. If you like chatting about email and web design, say hi!


template-default.html

Layout transformation wireframe

This template relies media queries to force table columns into rows and shrinks images, all while maintaining the layout's spacing, padding, and alignment.

  • Web
  • Gmail
  • Yahoo!
  • AOL Mail
  • Hotmail / Outlook.com
  • Desktop
  • Apple Mail 5/6
  • Outlook 2007/2010/2013
  • Thunderbird
  • Devices
  • iOS Mail (iPhone / iPod)
  • iOS Mail (iPad / iPad Mini)
  • Android Mail 4.3 (Nexus & HTC One)
  • iOS Gmail
  • Android Gmail
  • Android Mail 4.4 (Nexus)

When combined, these patterns go a long way. The HTML / CSS patterns used are supported in even the strictest email clients like Outlook and Gmail.

The small screen layouts rely on media queries. Since some clients like mobile Gmail strip out the <style> tag, a shrunk version of the desktop layout will display instead.

Android 4.4 (Kit Kat) Mail does not support {display:block !important;}, so we can't force table columns into rows.


template-fluid.html

Layout transformation wireframe

This template focuses on one layout that looks good on all screen sizes. Good for when media queries aren't available to detect device size and reconfigure the layout.

  • Web
  • Gmail
  • Yahoo!
  • AOL Mail
  • Hotmail / Outlook.com
  • Desktop
  • Apple Mail 5/6
  • Outlook 2007/2010/2013
  • Thunderbird
  • Devices
  • iOS Mail (iPhone / iPod)
  • iOS Mail (iPad / iPad Mini)
  • Android Mail 4.3 / 4.4 (Nexus & HTC One)
  • iOS Gmail
  • Android Gmail

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 and Lotus 8 have spotty support for a layout that shrinks on narrow screens, but since they're pretty much shackled to desktop world, we can get away with a fixed-width, wide layout.