Email

Designing HTML email templates for transactional emails

Save time and improve your workflow with transactional HTML email templates designed mobile-friendly and tested on all popular email clients. Read more...

PUBLISHED ON

PUBLISHED ON

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:

 

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

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.

Mailgun

Transactional email services

Sending transactional emails shouldn’t be hard with the right transaction email service. With an email service provider or simple email service like Mailgun, you can easily send and track your Black Friday emails.

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. 

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.

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.

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.

Mailgun

Transactional email services

Sending transactional emails shouldn’t be hard with the right transaction email service. With an email service provider or simple email service like Mailgun, you can easily send and track your Black Friday emails.

Related readings

Building HTML email and workflow tips

We hosted a Google Hangout yesterday featuring our Lead Digital Product Designer, Lee Munroe. In this hangout, Lee took a deep dive into building HTML templates by first taking a step back to look at the state of HTML email as it stands today

Read more

Delivering HTML emails with Mailgun-Go

In this tutorial, I will demonstrate how you can send HTML emails with embedded images with mailgun-go. Before we dive into the code, lets first define the problem space and how we can use Mailgun to enhance the user experience of our application.

Read more

Simplifying the complex concept of email rendering

If you create well-designed emails, you help mitigate the possibility your emails landing in the spam folder.

Read more

Popular posts

Mailgun iconSee what you can accomplish with the world's best email delivery platform. It's easy to get started.Let's get sending
CTA icon Mailgun Icon