Designing HTML Email Templates For Transactional Emails

Styling HTML email templates is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices are all things that build and influence your email template. Should any inbox service provider (ISP, that's Google's Gmail) or email service provider (ESP, that's us) struggle to receive/send your emails due to a table not being optimized for mobile viewing, your email campaigns will fail to attract engagements.

It’s no surprise developers don’t want to deal with transactional email templates when there is a backlog of more important priorities outside of email delivery.

We’ve removed some of the pain for you by open-sourcing and improving a collection of common HTML email templates for transactional email. Email marketing campaigns will require a different template, especially since the content can vary widely depending on what you're sending. For example, an email newsletter can change daily/weekly/monthly and have a more defined audience depending on the email marketing campaign. So keep in mind that these templates are best suited for transactional emails.

Our library includes:

• Action emails e.g. account activation, password resets, welcome emails

• Email alerts e.g. limit alert, problem alert

• Billing emails e.g. monthly receipts, invoices, order confirmations

UPDATE: We’ve added a new template feature to our UI, and you can read more about it in our responsive email blog post.

Our action and alert email templates.

These responsive HTML email templates now work in dark mode and have been tested in all popular email clients. The HTML code for these templates is available to copy or download through GitHub.

Inline CSS in HTML templates

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 using Premailer. Our email 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 email templates are responsive for mobile devices and use media queries to optimize the design for smaller screens.

According to Pathwire’s email engagement research, ‘The path to email engagement in 2021’, 52.5% of respondents use the Gmail mobile app to check their emails. 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 major email clients support media queries. This includes iOS Mail, Android 4.X, and Windows Phone 7.5 native email apps.

We recently added dark mode functionality to these templates in line with the industry’s growing trend to protect users’ eyes, conserve battery life, and improve design for contrast. 

Transactional emails templates in action.

Email client rendering test results

We’ve tested these email templates across all the major desktop, web, and mobile clients using Email on Acid by Sinch. You can also use Email on Acid’s pre-deployment platform yourself to test your marketing and transactional HTML email templates before sending to ensure everything works across all clients and devices.

Testing email templates is key to ensure the design renders properly on all devices and email clients.

Download the transactional email templates

You can either download the templates as a zip file or view them on GitHub.

These are free and open-sourced, so feel free to use them as you wish. If you do use them, we’d love to know about it –  send us a link to your product or service on Twitter or discuss on Hacker News.

Our simple transactional email template makes billing easy.

Webinar: Best practices for email

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 to achieve it. Watch our webinar that covers all of the strategies required for higher open rates with our host, Nick Schafer – Mailgun’s resident deliverability expert.

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.