Styling HTML email templates is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, and various device sizes are all things that influence your email template. Should any inbox service provider (ISP, that’s Gmail) or email service provider (ESP, that’s Sinch Mailgun) struggle to receive or send your emails, your campaigns will fail to generate engagement.
It’s no surprise that developers don’t want to deal with transactional email templates when there’s a backlog of more important priorities.
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:
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:
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.
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:
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.
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.
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.
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.
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.
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.
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).
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:
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.
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.
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:
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.
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.
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.
