3. Mailchimp templates as email layouts

Date: 2020-03-16
Driver: Wisen Tanasa

Status

Accepted

Context

We need to reduce the burden of maintaining our transactional email templates. Understanding the difficulty of making emails work on multiple email clients, we are also conscious that we do not want to spend a huge upfront cost to invest in testing.

In total, we will roughly have 12 email templates that we need to maintain.

There are two options that we were looking into:

• Using the HTML generated by Mailchimp templates
• Explore MJML

Decision

• Use Mailchimp templates as email layout.
• We will maintain a contract with the convention of: *|UPMO:VARIABLE_NAME*|

Consequences

We're hitting a middleground solution, where there will still be template generated from Mailchimp, but we're not going to have 12 email templates being maintained there. What we mean by email layout is, we'll be using Mailchimp template purely to generate the base structure of the HTML and replace Mailchimp merge tags programmatically (Think Nuxt.js Layout). This means we will only have a few Mailchimp templates that we maintain, for example:

1. One button layout (most of Auth0 transactional emails will fit here)
2. No button layout
3. Viewing layout

Replacing the merge tags should relatively be straight forward as Mailchimp has quite an obscure syntax for them i.e. *| variable *|. We'll also be maintaining a contract between the layout and our code, to make sure that changes from Mailchimp is not going to break our code.

This decision means that we'll still have an incurred development cost, but it shouldn't be as much as adopting MJML. We have low confidence that MJML is going to work well across multiple email clients, which implies that we'll need to invest more time to test in multiple email clients, which is a cost that we're not willing to pay at the moment.

We were also thinking that it'll be very nice from maintainability point of view if we could share our web pages mixin.scss to our email templates, which is the other upside of using MJML. But it's been proven that there are not many share-able styles there. Taking one example of font-family, we could make the font used in the transactional email consistent with what we've chosen for our web application. However, if we're using Mailchimp for marketing emails, the font-family that we can use is quite limited, which means there will be inconsistencies between our transactional emails and marketing emails.