Designing HTML email templates for transactional emails

What is a transactional email template? 

First things first: transactional emails are automated messages sent to recipients in response to a specific action. When someone does something on your website, like requesting a password reset or purchasing a product, they’ll receive a transactional email.

These emails differ from promotional emails or marketing emails in two ways. The first is about content. Transactional emails contain factual, straightforward information and usually don't further a marketing goal or pitch an upsell. Secondly, as opposed to marketing messages, which require someone to subscribe or opt in to receive them, transactional emails don’t need permission from the recipient.

Transactional emails are sent immediately after the user takes an action and provide information related to that action. Let’s take a look at some examples of transactional emails, for clarity’s sake:

• Order confirmation email: If someone makes an eCommerce purchase, they might receive an email confirming their purchase that also provides details like an order number, payment method used, and estimated delivery date.

• Notification email: Another example might alert the recipient that something about their order, transaction, service request, or something else, has changed recently.

• Shipping confirmation email: This might be triggered when a customer’s order has been picked up by the shipping carrier.

• Abandoned cart email: This type of email would be sent when a customer adds something to their cart but doesn’t complete the purchase. It might contain an incentive such as a discount code to encourage them to proceed.

• Password reset email: If someone forgets their password and requests a password reset, they might receive an email with a link to reset their password.

There are more examples, of course, but this generally describes what we’re talking about here. Transactional emails are an important part of any organization’s customer service strategy. Not only do they provide people with important information about the product or service they purchased – as well as system messages and alerts – they also help to build trust and provide reassurance about actions taken.

The basic structure of any transactional email template should include:

• Sender name and address

• The recipient's name and address

• A clear subject line

• A spot for primary information about why the recipient is receiving this email

• Links to relevant tools or web pages related to the transaction (a cancel page, customer service, support, etc.).

• Contact info

So, a transactional email template is a pre-built layout that email developers can use to streamline the creation of customized transactional emails for their company or client.

By using a transactional email template, you can ensure that your messages check all the required boxes and share the same look and feel. This is important for customer trust. Transactional email templates also make it easier to focus on customizations without wasting time developing foundational elements.

Best practices for designing transactional HTML email templates

Email design for transactional messages should be designed with care to ensure they’re effective. Here are some best practices for designing templates for your automated emails:

Build to a standard size

Transactional emails need to get straight to the point. It’s not the time to take risks, try new things, or attempt to “wow” subscribers. Make sure you build your transactional emails to a standard size and don’t go beyond 800 pixels wide. If you use Mailgun’s transactional email templates, you shouldn’t have any issues with this one.

Make sure it’s responsive

With the increasing use of mobile devices to access email, it's crucial to ensure your transactional email templates are optimized for different screen sizes. This allows recipients to easily read and interact with the message. Again, this isn’t the time to cross your fingers and hope for the best. Make sure to utilize an email testing tool to see how your email appears in various situations.

Don’t attempt to get promotional

Transactional emails are not the place to promote your brand or products. Stick to the purpose of the email and maybe a simple CTA, and avoid adding additional marketing messages that could distract the recipient from the primary message.

Ensure you have fallbacks for all GIFs, specialty fonts, and images.

To ensure your transactional emails are accessible to everyone, it's important to have fallbacks for all GIFs, specialty fonts, and other design elements that may not display correctly in all email clients. This will ensure that all recipients can view the content of your email, regardless of the email client they’re using. An image validation tool for email makes it simple to ensure you’ve covered this best practice.

Consider accessibility

When designing transactional email templates, it's essential to consider accessibility, especially with EAA around the corner. Make sure your email is easy to read and navigate for people with impairments, including those who use screen readers or other assistive technologies. Use alt text for images and make sure your color choices provide enough contrast for people with visual impairments. Test for email accessibility and make corrections until it’s perfect for everyone.

Accessibility isn’t always top of mind, but it is important. We’ve just released Mailgun Inspect to help. Using templates with inspect will make sure your messages land in the inbox and are accessible to all your subscribers.

• Make content more inclusive with semantic HTML checks.

• Flag missing alt text, poor contrast, or structural issues.

• Reach every subscriber, regardless of ability or device.

Include fields for personalization

Personalized transactional emails can be more effective in engaging your audience. Consider including fields for personalization, such as the recipient's name or order details. This will help to create a more personal connection between the recipient and your brand. It can also help assure recipients that they’re viewing accurate information.

Test before you send

You’ve probably picked up on a theme from all of these best practices – test, test, test. It’s not enough to assume your email is good to go. Sending it to your colleague across the hall isn’t proper due diligence, either. Use an email testing tool to check for display issues, typos, accessibility, and even deliverability (transactional emails should never go to spam).

Mailgun’s transactional email templates

Sinch Mailgun offers several customizable transactional email templates to help you get started quickly. These templates are built for common use cases like order confirmations, password resets, and account alerts. Each one is lightweight and easy to customize, making it simple to add your branding and tailor the content to your needs.

Personalization fields are built in, so you can quickly set up triggered messages like password resets or confirmation emails while keeping recipients informed.

Here are a few standout features you should be aware of:

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 responsive email templates include media queries for responsive design. It’s 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 Mailjet’s email engagement report, 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 this writing, 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.

Example transactional email templates: Download free HTML transactional email templates 

Just because we’re nice, we’ve removed some of the pain by open-sourcing and improving a collection of common HTML email templates for transactional messages. You can either download the templates as a zip file or view them on GitHub.

These email examples are free and open source, 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.

These templates aren’t for email marketing, since the content can vary widely depending on what you're sending. For example, an email newsletter can change with each new addition, while marketing emails need to be designed based on individual campaign goals and subscriber segments. So keep in mind that these templates are best suited for transactional emails only – not your next marketing campaign. 

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    

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

Most popular types of transactional email templates

Transactional HTML email templates are essential for enhancing customer experience and streamlining business operations through automation. Among the most popular types are invoice email templates, which provide pricing details to help ensure customers understand their charges and account activity. These templates often integrate seamlessly with various CRM and billing systems, allowing for real-time updates and personalized communication. Automated invoice emails not only save time but also reduce the risk of human error, contributing to a more efficient workflow.

Order confirmation templates are another vital type, offering customers instant assurance that their purchase has been processed. Shipping notification templates keep customers informed about the status of their deliveries, adding a layer of transparency that enhances trust and satisfaction. Password reset email templates ensure a smooth and secure process for customers to regain access to their accounts, crucial for maintaining a positive user experience. Each of these templates can be customized to reflect the brand's identity, fostering a consistent and professional impression that significantly improves the overall customer experience.

This brings us to a great point, transactional emails are the unsung heroes of customer experience and optimizing and personalizing them with html not only makes them more manageable and accessible, but more impactful in terms of building brand trust and community with your customers.

Final thoughts

Whether you build your templates from scratch, or take advantage of our library, keep in mind that short, streamlined templates work best for transactional messages. Creating and managing multiple templates for your needs is easy with a strong API and an easy email editor.

We’re all about giving you useful information, tools, and templates, but we also provide great service for your emails and for the humans that send them. Check out our transactional email services to learn more about what we do.