tedgoas / cerberus Goto Github PK
View Code? Open in Web Editor NEWA few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
Home Page: https://www.cerberusemail.com/
License: MIT License
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
Home Page: https://www.cerberusemail.com/
License: MIT License
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.
Re-write columns in vanilla HTML with 50% width <td>
columns.
Create CSS for <span class="mobile-link--footer">
that negates auto-detected links in the footer.
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.
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
This might be more of an issue with Sparrow, but in the Sparrow client this:
`body,
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.
It still reflects the files from Cerberus v. 1
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.On the docs page. Cause the new one is faster.
http://blog.jquery.com/2016/01/08/jquery-2-2-and-1-12-released/
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.
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
Add code adapted from Rob Berinti's TEDC talk.
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
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).
Outlook 2016 was not rendering button correctly. I have written a fix here: https://gist.github.com/longjasonm/51f5dbaf88915ce4f9aca41d5a27fe15
Regarding this conversation. Litmus shows a centered version, but testing in actual Yahoo mail reproducers the bug.
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)
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?
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.
As per Celia Schaefer's email suggestion.
Can these characteristics be replicated?
.email-container
cannot be defined in CSS (though cellpadding works)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.
Makes the images larger on mobile without media queries.
It looks like Yahoo Mail pushed an update that changes width to min-width in email campaigns, which has an impact on hybrid emails.
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
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!
On my outlook, the button looses the link... both on default template, as in my customized one! Help?
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
Hasn't been updated since version 1.
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?
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..
Does any instance of these templates suffer from this 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?
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.
index.html file
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"> </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"> </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!
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.
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.
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!
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!
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=" ">
Add png screenshots for each template
This could simplify things, worth testing.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.