Modular email design guide
Use a modular template system for your branded marketing emails
Modular email design takes a master template approach to your email's 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 on common, repeatable email production workflows.
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 modular template system requires some up-front work, it simplifies your day to day 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. A modular 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 of your email's design 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 are content pieces and components arranged in a specific way. And, Sections 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.
Some elements that make up an email template and how they work modularly.
Choose the approach for coding your master email template that you're most comfortable with. Learn by example by looking at other people's code. Take advantage of libraries, template systems, and frameworks.
role="presentation"h1, h2, h3, etc) and paragraph tags (p)lang="en") — languages referencetitle="")Add to global styles to make adjustments:
@media (max-width: 480px) { }
480px breakpoint accounts for mobile devices with larger screens.
Tell email clients your preferred dark mode settings, for the ones that follow it:
<meta name="color-scheme" content="light dark">
light dark means both are supported.light only means only light styling is.
And within the CSS:
:root {
color-scheme: light dark;
Then make adjustments in your CSS using the dark mode media query:
@media (prefers-color-scheme: dark) { }
Note that some email clients, like Outlook and Gmail, force dark mode by automatically inverting background colors and text and ignore these declarations.
Add after opening body tag:
<div style="display: none">Short line
of preview text goes here</div>
More options: GitHub resource of frameworks, templates, tools, and workflows →
Utilizing the benefits of a modular template for your campaign design and code allows for better management of your overall content production workflow.
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.