mailgun / transactional-email-templates

Responsive transactional HTML email templates

Responsive transactional HTML email templates

Transactional HTML emails often get neglected. Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers.

We’ve tried to remove some of the pain for you and open-sourced a collection of common templates for transactional email.

• Action email
• Email alert
• Billing email

Each template is responsive and each has been tested in all the popular email clients.

How to use

• Use these email templates for your transactional emails
• Use them as is or think of them as boilerplates for more detailed emails
• Ensure you inline the CSS before sending the email out

What are transactional emails?

Typically any email that is triggered by or sent automatically from your application.

• Welcome emails
• Actionable emails
• Password resets
• Receipts
• Monthly invoices
• Support requests
• App error alerts
• Reminders
• etc.

Inline the CSS

Before sending HTML emails you should inline your CSS.

We recommend using Premailer to accomplish this.

Our repo contains both the original templates with a separate CSS stylesheet, as well as templates with CSS already inlined for you to preview. See the /templates/inlined folder.

Tested and verified

We’ve tested these email templates across all the major desktop, web and mobile clients, using Email on Acid.

Email design workflow with Grunt

You also might be interested in this Grunt task for compiling and testing html emails. We used this to help design and test our transactional emails.

transactional-email-templates's Issues

Color of copy in footer ignored by Outlook, Thunderbird

The #999 gray (40% of black) is currently applied to (a) the footer's wrapper <div> and (b) the <a> links inside it. As could be observed within the original Litmus test result screenshots from the repo's README, the following email clients won't inherit and apply the color value from the wrapper <div> to the text inside it: Thunderbird, Outlook 2007, Outlook 2010, Outlook 2013.

The fix is to declare CSS color also for the actual container element containing the copy, e.g. the container <td> inside <div class="footer">. In other words, the color has to be applied “closer” to the text. Here are the results after doing just that (links to Email On Acid test results):

1. Thunderbird;
2. Outlook 2007;
3. Outlook 2010;
4. Outlook 2013.

A minor thingy, but might be worth improving – PR proposal is coming up.

Blockchain

Unitless line-heights ignored by several email clients

Unitless CSS line-height declarations, e.g.

body { line-height: 1.6; }

are, according to my testing, ignored by Outlook 2007, Outlook 2010, Outlook 2013, Thunderbird, Yahoo! webmail, AOL webmail, Outlook.com webmail. These clients will ignore the defined value, and default to what to my eye looks like line-height: 100% on test screenshots.

To get these clients to render the copy with “airier” leading as intended in the stylesheet, the solution is to add units to the line-height declarations.

1. Adding em's, e.g.

   body { line-height: 1.6em; }

   will produce intended (or at least improved) results in Outlook 2007, Outlook 2010, Outlook 2013.

2. Using pixels instead, e.g.

   body { line-height: 22px; }

   will, in addition to Outlooks, also produce intended results in Thunderbird, Yahoo! webmail, AOL webmail, Outlook.com webmail.

So, to me using px seems a more robust solution, and this is what I did in couple recent mailings based on the templates (:bow:).

However, as it might well have been a deliberate decision by @leemunroe, to use unitless line-heights despite the lack of support in some clients, in an upcoming PR I will suggest the following:

1. add em units to the line-height declarations;
2. add additional comments about pixel declarations, so folks would be better aware of this alternative option.

To sum up, below are “before” and “after” links for comparison, where

• “before” is a link to the original Litmus test result as presented in the repo's README,
• “after” is a link to my Email On Acid test result for the same client – with em units added to the line-height declarations.

1. Outlook 2007, before and after.
2. Outlook 2010, before and after.
3. Outlook 2013, before and after.

Center-aligned text not working in Outlook?

In Outlook 2007, the billing.html template (inlined version) ends up with left-aligned text (instead of centered).

See screenshot below:

outlook.com doesn't center the body

Hi. these email temps are very useful. But outlook.com doesn't center billing.html body

Double font in inlined templates

Hello,

In inlined templates, the font "Helvetica" is used twice in all tags.

Examples:

Romain

Typo in CSS

You have content-wrapper when it should be content-wrap in the CSS for all the templates under the responsive media query.

Framework

Content breaks out of container in Gmail app

Hey all, I ran the inline template through Litmus and got this result for the Gmail app for Android: https://cldup.com/nDvw4amOA4.png

Td Responsive in Mobile

The <td> (e.g. Service 1, Service 2, Price, etc.) is not responding to mobile. The $ and Price are on top of each other. How do I fix this? I tried decreasing the width of the "Service" <td> but nothing is working.

Helvetica occurs twice in CSS reset

Near the top of styles.css there is this line:

font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

Is there a reason that Helvetica occurs twice (once with quotes and once without)?

Why do the break tags have inline styling in the inline/billing template?

More curiosity than an issue, but why do the br's use inline styling here?

transactional-email-templates/templates/inlined/billing.html

Line 73 in 4b926d8

<table class="invoice" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; text-align: left; width: 80%; margin: 40px auto;"><tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;"><td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 5px 0;" valign="top">Lee Munroe<br style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />Invoice #12345<br style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />June 01 2014</td>

formatting issues in iOS gmail app after first in conversation

Strange issue: In gmail app on iphone, where the first "billing" (slightly modified) email in a conversation renders well, but the 2nd, 3rd, etc (identical) emails in that conversation break down. Screenshots below:

First in conversation:

Second (and 3rd is the same) in conversation:

Litmus test results link broken (404)

Same as the older issue #19. the new link pointed to https://litmus.com/pub/333e2b6/screenshots is now broken.

Airmail bug

it seems that OSX Airmail has a bug that does not understand the declaration: background: #FFF and instead requires it to be background-color: #FFF. I have filed a bug with them but you may want to update the templates to address that bug since the background call is only used for color.

Outlook 2016 - table not centered

On Outlook 2016 the table is right aligned, it should be centered.

Email template not responsive, take a look at screenshot, it's email at my phone

Issue ?

• remove it -

Tests link not working

The test result link mentioned in readme is not working.

Would you be interested in a embedded chart example?

Hello!

It would be awesome to have charts in your emails, I use Image-charts that does perfectly that and would like to implement it as an example into your email templates, would you accept a PR for it?

"See the test results" link in README gives 404

quoting https://github.com/mailgun/transactional-email-templates/blob/master/README.md#tested-and-verified:

We’ve tested these email templates across all the major desktop, web and mobile clients, using Litmus. See the test results.

That link is currently giving 404.

CSS Compiling with variables

Do you have any plans or thoughts on using some kind of css compiler such as Less?

I really like this project and I think this could really be expanded on some sort of bootstrap for email type thing where you could customize colors with variables and even have mixins.

There could also be examples with images and all sorts because email is a real pain for many startups especially on the whole email client rendering front which this solves too.

With variables it could even use some of the naming that bootstrap uses so if you use bootstrap you could import that one instead possibly or use it to override so you have consistency between the two.

Email template not rendering correctly in GMail.

Hi,

I'm using the inline version of email alert found within the repo, but the email looks like the following:

Will the OS have an impact on how the email is rendered? I'm currently using Ubuntu 14.04