The Developer’s Guide to Designing and Testing Triggered and Transactional Emails

[ 0 By

Litmus Email Previews and Interactive Previews are already the go-to tools for developing marketing emails and newsletters — a task generally performed by marketers and designers. As Lauren noted last year, triggered and transactional emails don’t tend to get as much love, despite having a significantly higher rate of return. Part of the reason for this is that these dynamic emails are generally created by developers, who only seldom create such emails, and don’t know what tools they have available to them, let alone a defined workflow for developing triggered emails.

Luckily, the developers at Litmus have been on both sides of the coin — we have developed tools for creating triggered emails, as well as the emails themselves, and we are excited to share our workflow with you!

How is developing a triggered email different?

A marketing email with dynamic content is typically a static HTML email with simple tags for recipient-specific information that get merged with customer lists. These emails are then sent in bulk by an Email Service Provider (ESP). A triggered email, on the other hand, is HTML generated by combining a custom template with user data around a specific event, and then sent directly through an ESP (like Mandrill, Postmark, or SendGrid) to that user.

Since the data between users can vary so drastically, the HTML can also be very different depending on who it is generated for and why. For example an order confirmation email might have a varying-length list of the items that a user purchased, as well as a call-to-action to buy a related product for some customers, or a special support number for high-value customers. Because it only ever exists as a template, developing and testing these emails is a different process than designing marketing emails, as you can’t just open your HTML in your favorite browser to see your progress.

Our triggered email workflow

Get a basic layout for your email

The layout is essentially a mockup, in HTML with static sample data, and designed much like a marketing email. If you have the opportunity, have your marketing and design teams design this. Triggered emails deserve just as much love as marketing emails and it’s also good to keep branding and quality consistent. If you are making the layout yourself, don’t be afraid to start with a responsive template that you find on the internet — no need to make designing a triggered email more complicated than it already is!

Some of our favorite responsive templates are:

  • Antwort: Responsive templates that render well in all major email clients.
  • Responsive email patterns, courtesy of Brian Graves.
  • ZURB: Lots of great responsive templates (just keep in mind that they don’t play nice with Outlook 2007+).
  • MailChimp & Campaign Monitor: These email platforms provide responsive or mobile-friendly templates in their tools. You don’t have to send from them; you can build your email and export the HTML.

Templatize the layout

Using the templating language of your choice (or whatever your development stack supports), remove any static or repeated data from your layout, and replace it with the appropriate tokens. Don’t worry about getting everything perfect. You can do this later in the process using Interactive Previews.

Develop a testing application

It will save you a lot of time if you do this from the beginning. Develop a simple application that easily takes sample data that you give it, formats the template of the email, and sends it through your ESP to a specified address. In C#, we use unit tests to do this since it’s then one click to test an email. In the video, we wrote a few lines of node.js.

Start a test with Litmus Email Previews

Click “New Email Test” inside Litmus, select your clients, and then send an email using your testing application to the address provided.

Open Interactive Previews and “Hide” the editor

We recently added a new feature that makes the process of developing a transactional email much faster. If you collapse the editor in an Interactive Previews session, it reveals an email address. Sending an email to that address instantly refreshes the client with the HTML and subject line of that email. This works best in a client that updates rapidly, like Outlook. Use this process to iteratively edit your template and quickly see the changes that you’ve made.

interactive-transactional

Run one final Email Previews test

Since you were using Interactive Previews to test the layout of your email, and not the compatibility across clients, make sure you run one more retest of the email to make sure that all of your recipients see how beautiful it is. Also, since your triggered email sending infrastructure and ESP are likely different than the ones you use for marketing emails, make sure you run a Spam Filter Test as part of your final Email Previews test.

That’s it!

See it in action

Want to see our workflow in action? In need of some additional information about how this works?

Learn more →

Have any questions?

We hope this workflow helps take the pain out of developing a triggered or transactional email. If you have any questions or suggestions, feel free to email us at developers@litmus.com.