How to create an Email Master Template step-by-step

You might be looking to make a Email Market Template for your email marketing. In this post I’ll show you the approach reviewing and re-creating a specific master template. I’ll take you through the process and the steps I took during a particular project, which tends to cover a lot of elements from simple starting with need, all the way to advanced email modules.

What is a Email Master Template?

A ‘Master Template’ in this instance is an HTML email that contains a collection of modules/blocks (also called a modular email design system) all of which can be chosen, edited (in various levels of complexity) and used by the client to create their email marketing.

Regardless if the client is using Adobe, Salesforce, Eloqua, Braze and so on, a master template sits within the Email Editor / ESP, where the user can quickly, and consistently build emails from that template – knowing they’re on brand, but with the flexibility of a developer.

To begin I am going to give you an insight of the type of thing I’ve been doing for the last few years…. and a typical process I like to go through, thought processes etc… whether they are orthodox methods, or not.

An Email Master Template is an HTML Email template that contains the complete collection of modules/blocks and variations for marketers to create all their emails.

As an example for the process, let’s take the Channel 4 email master template. I was tasked re-working, re-designing, re-building and re-structure it.

C4 have had master template with us for a few years. It had been updated, changed, tweaked over that time a few times and regularly.

But with a rebrand coming, and new functionality possibilities within the template, and several updates to different inboxes, and a change to different ESP it was time we gave it a new email template.  This is how we went about that, and what was changed.

The Review stage of Master email template design

Review is an important part of the process. This is best chance to gather information on what currently exists, from all key stakeholders and make plans for the overall needs.  With a look at the new brand, gathering as much information for the planning stage as possible.

1. Current Template modules — what works, likes, dislikes, used, less-used.
2. The new brand, visuals, wants, needs.

This is a personal preference, I like to do a lot of work at this stage with paper and pencil. It’s a quicker process, leaves things open, and gives you a quick framework with rough notes.

By all sitting down in a room and going through the template together, we can quickly get feedback, reactions and feelings. To collaborate and establish key needs and get this together as quickly as possible, precisely, without miscommunication. How it looks on paper or how it is recorded doesn’t matter.

We quickly found that although there is a rebrand, and a rebuild we don’t need a full redesign to achieve it. But we do need to visualise key elements based on the requests.

Key Requirements that we defined:

1. Background images with different image ratio options
2. Flexibility to adjust space between each module
3. Granular level modules. Headline text, body copy, CTA, etc…
4. New brand elements
5. Re-balance the functionality of certain modules. Less toggles, and menus.
6. Layout Ratio of 2 columns Left/Right for greater flexibility of content.
7. Ways of watching icons
8. Cleaner, simpler overall layout with new options: explore galleries, animations, overlays and advanced elements. But with consistency within inboxes, and ease of use within the platform.

The Planning stage of Master Email Template creation

After we decided what would be kept (but rebuilt), and what would go, we split the project in to two parts;

1. The visual elements.

This sets a visual base to work from, related to the new brand. The visual elements influence everything within template, and keep a clean, simple high contrast design.

2. Scamp/Sketch/Rough ideas for new modules

based on my experience of working with C4, and email and discussion during review.

There were early, rough sketches of some elements. Those became more useful and specific elements I particularly felt suited their needs and hit the brief. I looked closer and started to tie them to the brand, and makes some notes thinking about the functionality and considerations — Many of these were then all done in build.

Creates diagrams/wireframes/scamps — whatever it is you want to call them (it’s just planning) I find working on paper helps me to be more creative. It keeps things fluid, and helps me to see the bigger picture. Also, when it comes to building, allow me to start from a better place.

The Build stage of Master Email Template creation

We split the build up in to three parts, which featured rebuilding the core of the template, with the new designed style elements and ensuring functionality.

Phase 1 of the Build

This phase would be the core of the new email template. Largely standard, simple approaches to modules and the priority would all be around functionality, allowing C4 users to familiarise with the new layout and set-up and begin using it.

We made a guide for this part to support the client.

Some key features:

1. On/Off switch for Braze rulesets for a variety of pre-set dynamic elements
2. Font-sizes and different web font options.
3. Left and Right 2 column modules with ratio variants (50/50, 60/40, 70/30) and options to to how they display on mobile. This gives C4 a wide range of options in consistent layouts, also suiting their range of differing image ratio and experimenting with images in email.
4. A standard pre-stacked 2 column option (image, text, button), that I was surprised wasn’t already part of their templates
5. Background header image — This has three pre-defined ratios, which the we can control in the editor. It allows up to change any element based on menus, and the logo to sit on top of the background, and still be dynamically driven.

Phase 2: More advanced elements

The next step we introduced some of the slightly more advanced elements.

The intention with advanced elements is that the priorities should be be clean and simple, and fallback cleanly. For example this includes variants on the standard two column.

I like to work from the angle of progressive enhancement with email. The slightly more enhanced elements should fallback to something close as possible to the ‘Standard Two Column’ where functionality isn’t supported

Email Image Galleries

I’ve never been a fan of image galleries in email, in fact if there weren’t more important things in the world I would actively lobby against them. So here’s my take when used at the correct time, in the correct email, with the correct planning and content for a purpose they can be. So it’s good to have one up your sleeve.

Here we have two options:
1) A simple gallery where the ‘tab-image’ is being pulled from the main image used. Which keeps things simple in the studio, and keep it’s speedy.
2) Use icons instead, where the tabs are completely editable to the content.

A key thing to note here is that the content is entirely single column which helps keep the code weight in something like this down.

Ordinarily I feel this something like this would then fallback (where interactive emails are not supported) into 3 individual pieces on content. I feel this makes an email too long.

So the fallback here would be the 3 tab images showing as normal images (no green overlay as per the image below), and then a focus on more of a generic text applicable to all three images.

And what I like most about this is, we’re able to toggle between them in the editor itself. So I coded it in a way we could switch between both versions with one switch (to an extent).

Gallery Fallback — Editor example

Phase 3: Adding Animation

Here I began to look at animation, and exploring the brand elements such as these. Where I made an attempt to make a nod to the animated element of the new brand where content flies in from the left, and either stops or flies out to the right.

The first place was adding simple animation to the logos, to slide in to the email. The key being that it would be barely noticeable and subtle. And I applied an optional animation to the heading image.

So where supported the content flies in behind/after their own animated colour/angle fly in and out. Leaving the content behind.

This fallbacks to simply a static image as you would normally see. I then expanded on this and applied it to a gallery. This also falls back to one static single image. 

I thought this might be good to use for a new series, or characters, or a box-set for example.

Of course once it’s built we have testing, client test, further reviews, adjustments, and ongoing support, I created a guide to support them through.

Overall outcomes of master template redesign

The template is significantly cleaner, simpler, and more consistent across the board.

The key parts for all emails (in my opinion) is:
1) Good/Relevant content
2) Simplicity for any recipient of that email to engage with the content.

The important thing for any email template is:
1) User/marketeer can create good content, quickly and easily without difficulty or having second guess themselves.
2) Flexible to allow for creativity, email testing, and to empower the user, without them needing to be a developer or designer.

This was very much a team effort from everyone from the team at CACI and the team at Channel 4, and communication and flexibility is a big part of what makes projects go smoothly. In my experience there is no template for that as each client and relationship is different.