Mar 13 2014

Cerberus Makes Your HTML Email Work On Any Client

Advertisement

Ted Goas from New Jersey knows what he’s talking about. He calls his latest project Cerberus, which educated people surely know to be the three-headed dog from hell aka hell-hound. He thinks the naming to be appropriate for an ambitious project like his, that aims to make HTML email work (three-headed) over desktops, mobiles and – even – Outlook. Cerberus is a collection of patterns compiled into two templates for you to build your email newsletters upon.

cerberus

Cerberus: Two Templates To Rule Them All

Ted is also the creator of Responsive Email XX, which was initially invented to serve the same task. According to Ted he found it to be unnecessarily complicated over time, which made even himself stop using it. So he decided to think the whole thing over. What he came up with is Cerberus.

Cerberus is a much more simple, yet completely sufficient solution to help you build responsive email quickly, reliably and visually pleasing. The two templates that make up Cerberus are different in one main respect. While one template relies on media queries, the second is completely fluid. Both are responsive, so which one you should choose, depends largely on who you send email to.

The biggest downside of the media queries variant is that it doesn’t work with iOS Gmail, Android Gmail and Android Mail 4.4. It cooperates perfectly with any other client, such as web versions of Gmail, Yahoo, AOL Mail and Outlook as well as desktop versions of Apple Mail, Outlook and Thunderbird and generally also on mobile platforms with iOS Mail and Android Mail to 4.3. Look at the demo here.

Yet when it comes to Gmail on iOS or Android and Android Mail 4.4, the template falls short. Android Mail 4.4 does not allow to force table columns into rows as it doesn’t support {display:block !important;}, while mobile Gmail strips out the <style>tag completely.

If you send out a newsletter for Outlook enthusiasts, though, this should not be much of a problem as you might correctly assume them to read the email in Outlook anyway. But, if you target mobile users, it might be better to opt for the second template.

The second template is completely fluid. This is not so pretty on large screens and beautiful on small mobile devices. The problem is not too big, as email usually isn’t shown full-screen anyway, but stays in a more or less small part of the screen. This is certainly true for Outlook, if you don’t tend to open email into a separate window, which at least I have never done in the long gone years when I used to rely on the bulky Microsoft client.

The fluid template uses percentage-based widths to make the layout shrink horizontally on smaller screens. All CSS styles are inline. Look at the demo here.

Cerberus is available completely free under the terms of the MIT license. You can use it for private and commercial projects alike. Download it from Github.

Related Links

Tools and Resources

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description