- Best Practices
Make Email Accessibility Your New Year’s Resolution
Dyspatch is an email production platform that helps Enterprise organizations create and change transactional and triggered emails faster.
There’s no getting around the fact that transactional emails are complicated. Unlike a web page, where you can usually count the number of browsers you need to support on one hand, coding any kind of email can be a nightmare when you consider the vast array of email clients and devices that have to be taken into account. But add to that the complexity of coding dynamic content, specific to each customer and each transaction, and it becomes clear that transactional emails can be very, very hard.
Simplifying that complexity can be easier than you think. Too often developers and designers believe any process that makes creating transactional emails quick and easy comes at the expense of the dynamic content essential to personalized email. It doesn’t have to be that way. Instead of coding HTML emails from scratch, a template-based process using a templating language that allows for powerful customization makes creating (or updating) transactional emails both fast and easy.
A good place to start is with an understanding of the basic coding elements that go into a typical transactional email. There are many different email templating languages to choose from, including Django (Python), Twig (PHP), and Nunjucks (JavaScript), among others. But we’ll use Jinja here, for illustration purposes, and a great email example from Sephora.
Variable replacement is used to insert user-specific content into an email. At the bare minimum, you should be addressing the customer by name, i.e.:
<p> Hi {{ first_name }} {{ last_name }},</p>
Including the customer’s name is just good manners. But it’s also a good way to avoid having your transactional messages end up in the Promotions folder of the customer’s Inbox.
Variable replacement is also used to transmit more sensitive information to a user, things like password reset links and multi-factor authentication (MFA) tokens.
The Sephora email receipt we’re using as an example starts out with variable replacements for the customer’s name and the purchase date:
<p>Hi {{ first_name }}, here’s the receipt from your visit on {{ purchase_date }}</p>
Loops, or iteration, are similarly used to display user-specific data points but typically more than one and in a ‘loop’, which essentially means on repeat, as many times as necessary, rather than one at a time the way a simple variable replacement does. A good example is an order confirmation/receipt, where the data points are the item details (product, price, quantity, etc.) and where the number of items can be virtually unlimited.
Here’s a simple example using just item name and price.
{% for item in items %}
<span>{{ item.name }} - ${{ item.price }}</span>
{% endfor %}
And here’s a rendered example:
<span>Hair clips – $4.99</span> <span>Duotang – $2.99</span> <span>Shirt – $12.99</span>
The input string can also include additional details, such as {{ item.image }}
, {{ item.quantity }}
, or {{ item.description }}
.
Iteration can also be used to send customers’ ‘saved searches’, such as a list of real estate listings or a list of favorited vacation packages from recent searches.
The ‘Transaction Details’ section of Sephora’s email is a combination of a loop (for the item list) and variable replacement (for subtotal, taxes, and total).
Here’s the loop to display the items purchased (note the HTML output is simplified here for illustration purposes):
1{% for item in items %}2 <span>{{ item.image }}</span> 3 <span>{{ item.name }}</span> 4 <span>{{ item.number }}</span> 5 <span>Price: ${{ item.price }}</span> 6 <span>Qty: {{ item.quantity }}</span> 7 <span>C${{item.total}}</span> 8{% endfor %}
Plus variable replacement for subtotal, taxes, and total:
1<span>Subtotal: ${{ order_subtotal }} </span> 2<span>BRITISH COLUMBIA PST (7%): ${{ tax_bcpst }}</span> 3<span>CANADA GST/TPS (5%): ${{ tax_gst }}</span> 4<span><b>Total: ${{ order_total }}</b></span>
Conditionals are used to display alternative or additional content to a customer based on a set of variables. A couple of simple examples might include:
Showing a specific offer on a user’s birthday:
{% if is_birthday %}
<p>Happy Birthday! Use the coupon code BIRTHDAY10 to receive 10% off your next order.</p>
{% endif %}
Showing a specific upsell offer b
ased on a user’s original purchase:
{% if subscription_plan == “standard” %}
<p>Upgrade to Unlimited today and receive 20% off your first month.</p>
{% endif %}
Conditionals can be used in A/x testing to display different content to different audiences, to determine which offers perform better.
In Sephora’s case, they use a conditional to display a dynamic offer that either promotes their loyalty program or their customer survey:
Here’s the conditional to display the birthday gift offer:
1{% if loyalty_member == false %}23 <h1>THE 2019 BIRTHDAY GIFT</h1>4 <p>Celebrate by choosing a <b>FREE</b> gift of minis from… </p>56{% else %}78 <h1>WANT a $250 SEPHORA GIFT CARD?</h1>9 <p>Tell us about your shopping experience and it could… </p>1011{% endif %}
If loyalty member status is “true”, then the ‘else’ option is displayed:
This list is far from exhaustive, but it covers the most common elements of great transactional email. If you find a templating language that fits your requirements and master the basics of variable replacement, loops, and conditionals, you’ll be well on your way to simplifying the complexity of creating and updating these business-critical communications.
An email production platform like Dyspatch can help you create great emails, with smart, dynamic content, fast. Dyspatch combined with Mailgun’s powerful sending infrastructure will allow you to ensure every customer receives the right email at the right time.
It's easy to get started. And it's free.
See what you can accomplish with the world’s best email delivery platform.
Last updated on August 28, 2020
Make Email Accessibility Your New Year’s Resolution
What is Transactional Email? The Basics
Email Copy Suggestions That Don’t Suck For Your Deliverability
Mailchimp + Shopify Split – What Do You Do Now?
When Transactional Email Preps 4 Million Contracts For E-Signature Every Month
Taking Flight – Mailgun And Customer.Io Announce Their Partnership
Mailgun + Dyspatch: Building A Bridge Between Developers And Marketers
Epic Rep Battle – Marketing Versus Transactional Emails
Sending Millions Of Job Alerts 24/7 With The Mailgun Email API
Building Email Lists Of Contacts That (Actually) Want To Hear From You
Mailpets: For The Love Of Animals
Make Email Accessibility Your New Year’s Resolution
Sunset Policies: Allowing Unengaged Recipients to Ride Off into the Sunset
Email's Best of 2020
Catch-All Domain Support Is Now Available In Email Validations
The Best Time To Send Emails: Cracking The Code
Tips for Building Better Holiday Email Templates
Happy Festivus: Email Deliverability For The Holiday Season
The Basics of Email Subdomains
A Word of Caution For Laravel Developers
Make Email Accessibility Your New Year’s Resolution
Sunset Policies: Allowing Unengaged Recipients to Ride Off into the Sunset
Email's Best of 2020
How To Improve Email Open Rates
Preparing Your Email Infrastructure Correctly
4 Tips To Improve Your Email Deliverability In 2020
COVID-19 Email Communications Dos and Don’ts
How To Use Parallel Programming
Mailgun’s COVID-19 Plan of Action
Password Meters Are Not For Humans
Always be in the know and grab free email resources!
Mailgun is committed to protecting your privacy. Please read ourPrivacy Policybefore providing us with your details.