One of the biggest challenges of maintaining multiple products is avoiding the pitfall of duplicate effort. A “simple change” that requires manually updating four different code bases is no longer “simple”. It’s time-consuming and inevitably leads to things falling out-of-sync.
For our marketing and customer success teams, this is a real issue. Our products are different enough that we rarely need to make the same change to all of them at once, but for marketing materials like landing pages and email newsletters these universal changes are far more common.
We’re on a mission to simplify our systems so that maintaining resources for multiple different products no longer requires manually duplicating changes. Eugene recently wrote about how we’ve moved our marketing websites to Craft to make them easier to manage. Next in the firing line was our email templates.
In this post, I’ll explain how we’ve overhauled our disjointed and outdated email templates by developing a system that allows us to generate templates for each of our different products with ease.
Designing a modular newsletter template
We started by designing a completely new email template from the ground up. Rather than creating a pixel-perfect representation of what our newsletters would look like, we opted to design a library of modules that could be used to construct the final template. This gave us the ability to develop a single master template that contains everything we need to construct the final newsletters in Campaign Monitor.
The modular system gives our team more control over the visual style and layout of the final newsletter. Rather than shoe-horning content into a fixed template, we can adapt the template to fit the content. An important step on the road to building a truly flexible system that we can reuse across all of our different products.
Developing the templates using MailMason
With the design all sorted, the next step was to code up the master template. To make life easier, we used our open-source email toolset MailMason. MailMason is a Grunt-based framework that allows you to use Sass and Handlebars templates to streamline the development of email templates.
Out-the-box MailMason compiles handlebars templates into individual HTML files, ready for you to import into your email marketing software. This works great, but to avoid creating duplicate handlebars templates for each of our products we needed to make some modifications.
We started by creating a JSON file which contained all the product-specific data we needed for the templates.
{
"postmark": {
"sender_name": "Rian from Postmark",
"product_name": "Postmark",
"product_url": "https://postmarkapp.com",
"blog_url": "https://postmarkapp.com/blog",
"feed_url": "https://postmarkapp.com/blog/feed.atom",
"formal_company_name": "Wildbit, LLC",
"address_line_1": "225 Chestnut St.",
"address_line_2": "",
"city": "Philadelphia",
"state": "PA",
"country": "United States",
"phone": "123-456-7890",
"logo_file": "postmark-logo@2x.png",
"logo_width": "141",
"twitter_url": "https://twitter.com/postmarkapp",
"facebook_url": "https://www.facebook.com/postmarkapp/",
"twitter_icon": "twitter-dark@2x.png",
"facebook_icon": "facebook-dark@2x.png",
...
},
"deploybot": { ... },
"beanstalk": { ... },
"wildbit": { ... }
{Extracting all the product data into a separate file allowed us to keep the main handlebars template generic. We could then use handlebars expressions to pipe the relevant product data into the template on-the-fly during compilation.
With a few modifications to MailMasons build task we created a system where the master template was compiled multiple times to generate templates for each of the different products. We could now generate four different templates while only having to maintain a single master template. Success!
We added the product name as a class to the <body> within the template, allowing us to apply product-specific colors and typography where needed.
Integrating with Campaign Monitor
Once we had the MailMason setup sorted, integrating with our email marketing software, Campaign Monitor, was pretty straightforward. Taking advantage of Campaign Monitors Repeater and Layout blocks we made each of the newsletter modules into a reusable component. This gives the team the freedom to add, remove and re-position modules to fit the content of the newsletter.
We placed Campaign Monitors template markup directly into our handlebars templates. Once compiled, this markup would make its way into the final templates for each of the product newsletters. All we had to do then was upload the templates to Campaign Monitor.
Taking control of the sign-up experience
In addition to developing a new set of email templates, we also looked at the newsletter sign-up process as a whole and identified areas were we could be doing a better job of delighting readers.
The confirmation pages that a reader sees after they’ve signed up and confirmed their email address are often dull and uninviting. We thought we could do better.
We set out to design three new landing pages to accompany our new email templates.
- A confirmation page that readers will see when they first sign up to the mailing list.
- An activation page that readers will see once they’ve confirmed their email address.
- An unsubscribe page to confirm that a reader has been removed from the mailing list.
Armed with these three page designs we once again developed a system to automatically generate branded pages from a set of master templates. Again, we extracted all the product-specific data into a JSON file and then created a simple Gulp-framework for compiling the final pages.
These new landing pages help to give us more control over the sign-up experience. For many, it’s the first glimpse into the extraordinary care that goes into the work we do and we want to make a great first impression.
In conclusion
Between the revamped email templates and new landing pages we’ve put together a system that makes it easier for us to manage the marketing efforts of three separate products. By embracing automation, we’re able to save valuable time that can now be spent improving our products and producing great content for our readers.