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.

• 1. Designing emails modularly
• 2. Coding your design for reuse
• 3. Managing your template system for your team

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.

Email design tips

• Structure your campaign for easy reading: Make it scannable by breaking it apart with headlines, images, buttons, bullet points, etc.
• Make it mobile friendly: At least 40% of email opens are on mobile devices (and increasing with time). Optimize for all screen sizes to ensure your readers convert.
• Function over form, but don't forget the form: A good mix of visuals motivates a person to take action and reduces their anxiety towards action.
• Alleviate the paradox of choice: When people have too many similar options, they struggle making a decision and end up not making a choice at all.
• Focus your message and be concise: Reduce the length of your email until you can simplify no more. Some of the most effective emails have one clear message.

Modular mindset

• Stackable sections
• Headlines that break up content
• Repeatable areas like a listing of items
• Consistent button, type, and link formatting

Using images

• Don't use too many images over text
• JPGs - bigger photos and illustrations
• PNGs - graphics that need transparency
• GIFs - simpler graphics with transparency and animations

Accessibility

• Ensure you're using good color contrast
• Make sure text links stand out
• Keep text size at 14px minimum

• Really Good Emails →
• Email Love →
• bettr.email →

• Milled →
• Email Tuna →
• Milky Mail →

Using images

• Avoid using text in an image, especially for titles as images might take a while to load
• Be sure to include alt text for all images
• Spam filters look at the ratio of images to text with a higher spam rating, usually the more images there are
• Keep in mind file sizes for images and make sure to compress them
• Video doesn't work in most clients, consider using animated GIFs as a backup
• For background images, include a background color as a fallback

Accessibility

• Include alt text for all images - be descriptive, try not to repeat the same text
• Set presentation role for tables: role="presentation"
• Use semantic code — header for titles (h1, h2, h3, etc) and paragraph tags (p)
• Set the language attribute (ex: lang="en") — languages reference
• Make sure to encode special characters
• Don't set titles on links (title="")
• Use the accessibility checker

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>