Design Transactional HTML Email Templates

Written by Lee Munroe

Categories: Email DIY | For Devs

2 minute read time

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. All these things have to be thought about and tested. It’s no surprise developers don’t want to deal with this when there is a backlog of more important priorities.

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


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

View on GitHub.

Inline CSS

Before sending HTML emails you should inline your CSS. We recommend using something like Premailer to accomplish this. There are libraries that do this for each of the popular languages (Ruby, Node, PHP, Python, Grunt) or you can manually inline your CSS here.

Our templates include media queries for responsive design. It is important that media queries are not inlined (Premailer handles this for you).

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

Responsive design with media queries

These templates are responsive for mobile devices and use media queries to optimize the design for smaller screens.

As of July 2014 ~50% of emails are opened on mobile devices. So it’s important that your emails look good and are usable on small screens.

Be aware that as of writing this, only a handful of email clients support media queries. This includes iOS Mail, Android 4.X and Windows Phone 7.5 native email apps.


Email client rendering test results

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

Client Rendering

Email design workflow with Grunt

You also might be interested in this Grunt task for compiling and testing html emails. This is what we used to design and test our transactional emails. It’s a good way to manage your email layouts, compile SCSS, inline CSS and send out a preview to your inbox.

Download the email templates

Download templates as a zip or view on GitHub.

These are free and open-sourced. Feel free to use them as you wish.

If you do use them, we’d love to know about it. Leave us a link in the comments to your product or service.

Discuss on Hacker News

Webinar: Best Practices for Email

Best Practices

Have you updated your email strategy for the new year? We all want better deliverability, but there are a few small things you need in place in order to achieve it. Join us January 17, 2018 at 1pm CST for a live webinar on email best practices, hosted by Mailgun’s resident deliverability expert, Nick Schafer.

You’ll learn: 1) How to track and improve your reputation as a sender, 2) The dos and don’ts of building and maintaining your lists, 3) How to improve your email engagement, and more.

Register here to save your spot!

Published on: August 13, 2014 | Modified on: July 12, 2018

Stay up-to-date with our blog & new email resources

We'll let you know when we add new email resources and blog posts. We promise not to spam you.