# 3. Mailchimp templates as email layouts
Driver: Wisen Tanasa
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
- Use Mailchimp templates as email layout.
- We will maintain a contract with the convention of:
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:
- One button layout (most of Auth0 transactional emails will fit here)
- No button layout
- 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.