Email Template Guide

Use a design system for your branded email templates to send out more quality campaigns

We wrote this guide to give you an overview of the benefits of using a design system for your branded marketing emails. It's written for all email marketing professionals and #emailgeeks, including email designers, developers, digital marketers, and marketing technology officers. If you're new to email marketing, have been doing work in the industry for a while, or are a long-time veteran, you will get something out of this guide.

Why use a design system?

A design system takes a modular approach to email design and code and offers a reusable framework for a more efficient workflow. It improves the quality and consistency of your campaigns while saving you time to focus more on marketing strategies and quality of interaction with your customers.

This guide is an overview of what's involved in developing a design system for your email campaigns with links to in-depth walkthroughs for each aspect of the process.

Each step offers ways to develop a framework for your emails for reuse and efficiency. Setting up a design system requires some up-front work, but saves you a lot of time, and simplifies your workflow, in the long term.

Common issues using a design system helps with

  • Last minute requests
  • Lack of flexibility in making regular updates
  • Being dependent on a developer for updates
  • Reusability of assets
  • Design inconsistency
  • Work hours adding up

Invite a team member to use the template guide!

Note: Email addresses you enter will only be used to send this one-time invite email

Planning campaign guidelines

Review icon

Email is a direct connection with your reader and should be about building a relationship with them. Make sure to keep in mind their perspective on the emails they receive from you. Make sure what you send is relevant and valuable to them. Consider each email as part of an on-going conversation with your audience.

Starting a campaign

Before getting into design and code, think about what you're trying to accomplish with your emails.

Set a goal

Every email should have a goal. To educate, get sign-ups, referrals, purchases, etc.

Who are you sending to?

  • Do you have an email list?
  • Is it segmented?
  • Is the message appropriate to them?

What do you want them to do?

  • What is the message?
  • Why should they care?
  • What are their next steps?

Measure success

  • What are the actions needed for your goal?
  • Is proper tracking in place?

Ensuring an open

Preflight checklist

Using a template to improve email production

Having an email template allows you to reuse components and make your process more efficient, allowing you to build more emails, faster. A template should use modular self-contained pieces, typically consisting of:

Marketing email template pieces
  • Modules in an email template Sections - stackable modules that go between the header and footer
  • Layouts in an email template Regions - columns and rows of content areas
  • Components in an email template Components - resuable assets like buttons and titles
  • Styles in an email template Pieces - content text and images

Keep this approach in mind and introduce the concept to your team as you design and build your templates. Having an underlying foundation allows everyone to better organize what they're already doing and essentially speak the same language throughout your email's workflow.

Additional resources

Invite a team member to use the template guide!

Note: Email addresses you enter will only be used to send this one-time invite email

Designing a modular email template

Design icon

Your company brand should have a style guide for all communications, both visually for your creatives and verbally for your copy. An email template would utilize the style guide and go even further in keeping your campaigns consistent in tone, quality, and overall user experience.

Elements that make up a good email template

These are tried and true parts of a standard email template. For a deeper dive into individual email campaign design tips and content considerations, see the additional resources below.

Modular email template example
Modular email template mobile example

Email design tips

Modular mindset

Using images

Additional resources

Invite a team member to use the template guide!

Note: Email addresses you enter will only be used to send this one-time invite email

Coding a template for reuse

Development icon

There are many different ways to code your email template. Choose which way you're most comfortable with as that will become the most efficient way to do it over time. Learn by example by looking at other people's code. Take advantage of libraries, template systems and frameworks.

Different approaches to coding

Getting started with code

Email coding courses

Essential code snippets

Reset styles – add to global styles:

img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

Client-specific styles – add to global styles:

body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }

Preheader/preview text – add after opening body tag:

<div style="display: none; max-height: 0; overflow: hidden;">
Short line of preview text goes here

Guidelines for using images


Improving your development workflow

More options: Frameworks, templates, tools, and workflows to build better emails →

Additional resources

Invite a team member to use the template guide!

Note: Email addresses you enter will only be used to send this one-time invite email

Managing emails based on your template

Team icon

Utilizing the benefits of a modularized template for your campaign planning, design and code allows for better management of your overall content workflow. Your framework acts as a model and you begin to better visualize your campaigns and develop a set of guiding principles to focus your content production around.

Tips to writing good copy


CTAs include buttons, links and highlighted text that give the reader an action to take.

  • Use clear and concise text
  • Have them relate to the goal of the campaign
  • Don't have too many in a single campaign
  • Make them stand out

Going further with your content


Ways to personalize emails, normally by using variables/fields from list data.

  • Use reader's name
  • Based on reader's recent behavior
  • Use location-related data
  • Show/hide specific content areas based on data, using advanced techniques


For further personalization, translate your content into multiple languages.

  • Use correct special characters: Special Character Conversion
  • Consider culturally-appropriate images
  • Keep in mind buttons text length
  • Send based on local times

Using an editor to update content

It is not recommended using an editor to build your emails unless it works around your template code. Here's why:

Email service provider editor

  • Constrained design
  • Messy output
  • Clunky interface

Free-form template builder

  • Overwhelming interface
  • Too many options for us non-designers

Translating your design into a builder wastes a lot of time having to figure out how to get the design to work around the editor's limitations, ultimately compromising the design

Editing based on your template


You design and build a template based on best practices and enable content editing options that you control and fit around your template's structure

Related: Blocks Edit, an editor that works around your template code →

Additional resources

Invite a team member to use the template guide!

Note: Email addresses you enter will only be used to send this one-time invite email