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.
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.
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:
Content
Components
Regions
SectionsComponents 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.
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.
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.
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; }
Mobile responsive – add to global styles to make adjustments:
@media (max-width: 480px) { }
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:
role="presentation"h1, h2, h3, etc) and paragraph tags (p)
lang="en") — languages referencetitle="")Related: Accessibility checker →
Define the expected support in the meta:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Make adjustments in your CSS using a media query:
@media (prefers-color-scheme: dark) { }
Outlook has to be special, so you’ll need to include an additional prefix for the elements you target:
[data-ogsc] h1 { }
More options: GitHub resource of frameworks, templates, tools, and workflows →
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.
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.