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.

Issues using a modular design helps with

  • Last minute requests
  • Reusability of assets
  • Design inconsistencies
  • Reducing work hours from adding up

Designing emails modularly

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.

Using a master template

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:

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 between the header and footer

Components 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.

Example modular techniques

Some elements that make up an email template and how they work modularly.

Modular email template example
Modular email template mobile example

Email design tips

Modular mindset

Using images

Accessibility

Additional modular techniques

Design inspiration

Additional resources

Coding your design for reuse

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.

Coding best practices

Using images

Accessibility

Mobile responsive

Add to global styles to make adjustments:

@media (max-width: 480px) { }

480px breakpoint accounts for mobile devices with larger screens.

Dark mode

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.

Preview text

Add after opening body tag:

<div style="display: none">Short line
of preview text goes here</div>

Advanced features

Improving your development workflow

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

Testing

Email coding courses

Additional resources

Managing your template system for your team

Utilizing the benefits of a modular template for your campaign design and code allows for better management of your overall content production workflow.

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