Email template design guide

Use a modular template system for your branded marketing emails

An email template 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.

This guide covers what's involved in developing a modular template system for your email campaigns. From design, to code, to managing updates to it.

Each step offers ways to develop a framework for your emails for reuse and efficiency. While setting up a template system requires some up-front work, it simplifies your workflow, saving you a lot of time in the long run.

Common issues using a template system helps with

  • Last minute requests
  • Flexibility in making regular updates
  • Reusability of assets
  • Design inconsistency
  • Reducing work hours from adding up

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.

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
  • Content pieces in an email template Content
    Text pieces and images
  • Components in an email template Components
    Reusable, standalone elements like buttons and titles
  • Layouts in an email template Regions
    Groups of Content and Components
  • Sections in an email template Sections
    Stackable containers of Regions, between the header and footer

Components are the building blocks of your content and should work by themselves in a range of contexts. Regions, also referred to as modules, are content pieces and Components arranged in a specific way. And, Sections have one or more Regions and are full-width horizontal containers stacked on top of each other to create an overall layout.

Keep this hierarchy in mind and introduce it 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.

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

Accessibility

Additional resources

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.

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
</div>

Related resources:

Using images

Accessibility

Related: Accessibility checker →

Advanced features

Improving your development workflow

More options: GitHub resource of frameworks, templates, tools, and workflows →

Testing

Additional resources

Managing emails based on your template

Team icon

Utilizing the benefits of a modularized template for your campaign design and code allows for better management of your overall content workflow. You begin to better visualize your campaigns and develop a set of guiding principles to focus your content production around.

Maintaining your template

This guide has been put together by the Blocks Edit team. Having a modular template designed and coded, Blocks Edit is a visual editor that makes your template editable so your content team can build and edit email campaigns on their own. It works around your template's structure and code, allowing you to set only editing options that follow brand guidelines and don't mess with your code.

Share this guide

Tweet | LinkedIn post | Facebook post | Email a team member

Other tools and resources from Blocks Edit