tedgoas / cerberus

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

Cerberus Responsive Email Patterns

Coding regular emails is hard enough by itself. Making them responsive and accessible shouldn’t add to the headache. A few simple, but solid patterns are all that’s needed to optimize emails for small screens and assistive technologies.

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, combined, and nested to build an email.

Each template is annotated and has good support among popular email clients.

Learn More and See Examples

Contents

cerberus-fluid.html - Good for simple layouts such as transactional and single column emails.

cerberus-responsive.html - Good for more complicated, shape-shifting email layouts that work on some mobile clients.

cerberus-hybrid.html - This template uses a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support.

Author

👋 I’m Ted Goas, the core author and maintainer. I’m a product designer & front-end developer with a soft spot for HTML emails. Some day I'd love to combine my professional craft and hobby to work on an email platform. @tedgoas § TedGoas.com

License

Let’s go with something simple and permissive, shall we?

The MIT License (MIT).

Copyright (c) Ted Goas

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Email Templates

If you’d prefer something that’s ready out of the box, I vouch for htmlemail.io’s responsive email templates. They’re fully tested and ready for your ESP or codebase.

cerberus's Issues

Add <td valign="top">

Add <td valign="top"> to the very first <td> so short emails vertically align to the top if they don't take up the entire viewport height.

Replacing Header Images with Larger Image Causes Cropping in Outlook

Removing the line-height:0 fixed this for me.

See:
http://stackoverflow.com/questions/17298867/outlook-2013-cutting-off-top-of-image
http://stackoverflow.com/questions/11201185/images-getting-cut-off-in-outlook-2007-2010

Email Not Centered in Yahoo! web mail

Regarding this conversation. Litmus shows a centered version, but testing in actual Yahoo mail reproducers the bug.

Remove 2-column hybrid columns from Fluid Template

• they don't work
• they're not advertised as working
• they add a lot of extra code at no cost

Re-write columns in vanilla HTML with 50% width <td> columns.

Remove .ExternalClass

Outlook is officially retiring the old Outlook.com rendering for new OWA rendering link, making this part of the CSS reset obsolete.

* [owa] { } targets new OWA clients, should the need ever arise.

ios mailbox not displaying properly

I used the default template and it looks great everywhere except on the mailbox app on ios. It seems to be stretching images to fill the device width if the image is larger than the screen instead of using the specified image or td width. I attached some images to further illustrate the issue.
Thanks

error when using thunderbird for sending

I got "Es ist ein Problem beim Einfügen der Datei 160.jpg in die Nachricht aufgetreten" for each image.

replacing "http://placehold.it/160" with "https://placeholdit.imgix.net/~text?txtsize=15&txt=160%C3%97160&w=160&h=160" worked.. I think Thunderbird blocks forwardings..

Mailchimp compatibility

I'm doing a responsive email template for a client - they have an account with mailchimp, so have to use it to send their email marketing.
Based on their design requirements, i cant just use one of the mailchimp templates.

So im basically populating the cerebrus files in a code editor, and importing to mailchimp. The layout breaks - no responsive, no fluid, no nothing :P

I did make sure it was not my changes by uploading just the original files (tested fluid and default), same issues - spacing, alignment and images go out of whack.

I was wondering if there is a bulletproof version for import to mailchimp available somewhere, or if that is something the community could look into creating?
So not a mailchimp template as such, but a file coded in such a way that i can populate it outside of mailchimp and be fine when i import it to send.

Attached image is what it looks like after importing to mailchimp and sending myself a test (I use gmail).

Thanks a mil, great work thus far!

Gmail min-width=100%

Does any instance of these templates suffer from this bug?

RTL in media query breaks line breaks

If you use the media query version of the template and you have the element with text left and image right this is achieved using table dir="rtl".

This causes the line breaks to do weird things. If the sentenced is split up it starts in the next line from the right but the next text is in the same line from the left. On OSX this is only visible with the dots of the sentence, but in Outlook this breaks the entire textblock.

Max-width Media Query

Is there a specific reason that the max-width media query appears twice in the template-with-media-queries?

 @media screen and (max-width: 600px), screen and (max-width: 600px)

[cerberus-hybrid.html] convert max-width's to pixels

Makes the images larger on mobile without media queries.

Fix scroll issues in docs

1. Each nav link on http://tedgoas.github.io/Cerberus scrolls to ≈50px above its target; should be 0.
2. Links for two templates jump; make smooth scroll.

Update Readme.md

Hasn't been updated since version 1.

Outlook 2016/Win - Issue with Button

Outlook 2016 was not rendering button correctly. I have written a fix here: https://gist.github.com/longjasonm/51f5dbaf88915ce4f9aca41d5a27fe15

full-width-image class

What is the purpose of this class applied to some of the tags like

<td class="full-width-image">

? The reason I ask is I don't see any corresponding styles defined.

Mark Robbin's Single Table Layout

This could simplify things, worth testing.

Template-default 3 column issue

Hi there thanks for the awesome templates. First off, I'm a designer who is html/css savvy and not a developer. I'm having an issue with the 3-column section of the 'template-default' file.

I've removed the padding so the images touch the edge of the wrapper table and added placeholders that are 190px wide, looks fine in both regular and responsive layouts:

Funny thing is happening though when I remove text from the columns. For example, if I delete a sentence of the dummy copy, I get a gap on the right hand side when I hit the 600px threshold to a responsive layout:

It may be a simple solution but I can't work out what's breaking, any ideas? Here's the code I'm using for the section, all other code - css etc. - has been kept the same in the template:

  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" class="columns-container">
        <tr>
          <td align="center" width="190" style="font-family: sans-serif; font-size: 16px; line-height: 22px;padding-right: 15px;color: #444444;" valign="top" class="force-col">
            <img src="3col-plchldr-190x220.jpg" alt="alt text" height="220" width="190" border="0" style="display: block;padding-bottom: 10px;" class="col-3-img-r">
            <a href="#" style="color:#444444; font-weight:bold; text-decoration: none; text-transform: uppercase;">header</a>
            <br>
            Saepe scaevola id has. Duo et regione albucius ponderum. Dicta definitiones sed ex.
          </td>
          <td style="font-size: 0; line-height: 0; display: none;" class="hh-spacer">&nbsp;</td>
          <td align="center" width="190" style="font-family: sans-serif; font-size: 16px; line-height: 22px; padding-right: 15px;color: #444444;" valign="top" class="force-col">
            <img src="3col-plchldr-190x220.jpg" alt="alt text" height="220" width="190" border="0" style="display: block; padding-bottom: 10px;" class="col-3-img-l">
             <a href="#" style="color:#444444; font-weight:bold; text-decoration: none; text-transform: uppercase;">header</a>
            <br>
            Saepe scaevola id has. Duo et regione albucius ponderum. Dicta definitiones sed ex.
            </td>
          <td style="font-size: 0; line-height: 0; display: none;" class="hh-spacer">&nbsp;</td>
          <td align="center" width="190" style="font-family: sans-serif; font-size: 16px; line-height: 22px;color: #444444;" valign="top" class="force-col">
            <img src="3col-plchldr-190x220.jpg" alt="alt text" height="220" width="190" border="0" style="display: block;padding-bottom: 10px;" class="col-3-img-r">
             <a href="#" style="color:#444444; font-weight:bold; text-decoration: none; text-transform: uppercase;">header</a>
            <br>
            Saepe scaevola id has. Duo et regione albucius ponderum. Dicta definitiones sed ex.
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- Three Column ==> Stacked Wide Layout ==> Stacked Narrow Layout : END -->

Thanks!

Update Contents section of readme

It still reflects the files from Cerberus v. 1

Bower integration

Just found your project, nice work! 👍

It would be great to have it on Bower package management: http://bower.io/

You just have to create a little config file and publish it. Can you plan it please? :-)

Thanks!

Outlook 2007/2010 "23.7 Inch" Bug

Just ran into this while building an email for a client: https://www.emailonacid.com/blog/article/email-development/horizontal_spacing_issues_in_outlook_2007_and_2010

Was able to solve it by removing the 100% <table> immediately after the <body> tag and did not see adverse effects in any clients.

I know you are always in pursuit of clean code; maybe we remove that outer table?

Retina images

Is there a workaround, or a suggestion for displaying high-density images? In particular for 100% width images for banners etc where you have height="" empty.

Usually, I would use both height and width, and load in an image that is double size:

<img src="http://placehold.it/1200x240/" width="600" height="120" border="0" alt=" ">

600px email width Outlook 2016

Problem with the 600 max-width on Microsoft Outlook 2016.

Is there a fix?

Table banding

Would I be correct in assuming that I'd need to nest in a new set of 100% width tables to achieve full-width banding within the sections?

Stack Logo and Byline on Mobile

On template-with-media-queries.html, like so:

Padding in Outlook 2000/2002/2003

Can these characteristics be replicated?

• Can't define cell padding in percent
• Cells of .email-container cannot be defined in CSS (though cellpadding works)

capitalise Margin

I always capitalise Margin so that Outlook.com won’t strip it out–a neat little hack thanks to Wiktor’s comment on this blog post.

Question regarding css styles

@TedGoas,

We are in the process of building a new set of email templates and will be using Cerberus/hybrid as the base (thank you for it!).

Noticing the two sets of style rules, CSS Reset and Progressive Enhancements, I am wondering if they should be excluded from inliners like Premailer?

My instinct is to inline the CSS Reset and exclude the Progressive Enhancements as they contain media queries which I read as a sign to leave that set along.

Is this how you intended these?

Also, would you be available for short-time consulting (2-5h) in the next two weeks?

Let me know.

Andrei

yshortcuts deprecated

.yshortcuts css reset appears deprecated, consider removing.

Fix extra spacing around hero image

Remove extra spacing around images that should be flush against the email container.

Modifying Three Columns to Four

I'm hoping I can modify the Cerebus Hybrid file to show Four Even columns on Outlook, then breakpoint to Two columns on Tablet, then One column on mobile phones. Any thoughts or tips on that? Thanks!

Upgrade jQuery

On the docs page. Cause the new one is faster.
http://blog.jquery.com/2016/01/08/jquery-2-2-and-1-12-released/

Re-link blog post in Docs

index.html file

Buttons

On my outlook, the button looses the link... both on default template, as in my customized one! Help?

Fluid-Hybrid template not displaying full-width on iPhone when sending via Constant Contact

I'm seeing an issue where the Cerberus fluid hybrid template isn't displaying full-width on iPhone Mail when sent via Constant Contact. The email only takes up about 50% of the width of the screen, and only affects portrait mode (looks ok in landscape).

I'm tried adjusting viewport and body width, along with doctype and a few other things... but I can't seem to get it to display correctly. Also, I'm seeing a flash/flicker where it displays full-width and then reshapes to 50%. Any idea what might be going on here, or how to fix?

The iPad portrait and landscape view looks good. So far, it's only doing this for iPhones as far as I can tell. And only when sent via Constant Contact. I'm wondering if it's something in their footer which I can't remove?

For The Badge

Why not?

Process documentation

Don't mean to add this as an issue, as I think it is more of a question or documentation thing (sorry if I shouldn't have posted it here). I've been researching various options for html e-mails and I like the simplicity of using Cerberus, but I'm curious about the process that should be taken. Specifically, if I take your template without changing much, do I need to run this through a CSS inliner tool? Or is it expected to work fine as is?

I tried running it through an inliner tool, and notice that everything between the style tags except for media queries gets removed. I wasn't sure if this was a necessary step, or if by doing this, it would break some styles for certain email clients.

Thanks for the great work!

Add Litmus test screen

Add png screenshots for each template

• Reference to updated readme
• Link in support section of Jekyll page

Elaborate on Code Comments

As per Celia Schaefer's email suggestion.

Add @font-face support

Add code adapted from Rob Berinti's TEDC talk.

is there a non-inlined version ?

This is great, many thanks.

I find it much easier to customize on a non inlined version and then run it through email-inline tool like mailchimp's

Write CSS for .mobile-link--footer

Create CSS for <span class="mobile-link--footer"> that negates auto-detected links in the footer.

Yahoo! Webmail changing width to min-width (breaking hybrid layouts!)

It looks like Yahoo Mail pushed an update that changes width to min-width in email campaigns, which has an impact on hybrid emails.

• Discussion here
• Potential fix here

Put GA on http://tedgoas.github.io/Cerberus/

Closing </table> for mso is too much?

Isn´t the closing for mso at https://github.com/TedGoas/Cerberus/blob/master/cerberus-fluid.html#L212 too much?:

We can´t find an opening

for mso, thanks.

Right margin (~20px) on iOS Mail app fix

Was experiencing a margin to the right of the viewport in iOS Mail.

Added

min-width: 100%;

to the body tag and that fixed the issue.

EDIT: It seems to be a mixture of two things. One being the min-width fix above. I also had to remove

table-layout: fixed;

from the Yahoo alignment fix in the styles. Tested in Yahoo and iOS and everything loks fine. Seems like the Yahoo alignment fix is now redundant, I just needed to center-align the main container (line 97).

Also removed table-layout: fixed; from line 97 as it was causing a Gmail bug - right hand side of Gmail interface overlaying the email content:

All good in Yahoo, Gmail and iOS now.

Images in 2-Col Layout Should Scale Up in Gmail

In GMAIL, the 310x310 images should scale to size instead of appearing tiny and centered.

The 2-col layout in this post could achieve this.

Accidentally moved Hybrid email width from 680 to 600

Got a little too cavalier with copy/paste on this commit across the three templates and accidentally changed the width of the Hybrid template to be too small.

Strange behavior with Sparrow

This might be more of an issue with Sparrow, but in the Sparrow client this:

`body,

bodyTable {

height:100% !important;
width:100% !important;
margin:0;
padding:0;

}`

causes the email content to "jump" as if it were a gif, and it slowly pushes the content down. It's the strangest thing ever. If you remove #bodyTable it doesn't happen. Just something to note.

Bug visualization on samsung s6/s6 email app

I'm italian so i'm sorry for my english.
I've discovered that hybrid template have an ugly right band when viewing on samsung s6/s7 email app.
I've made some test and i've also discovered that changing:

html,
body {
            margin: 0 !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

to

html,
body {
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

solved the issue.
Hope it can help