Skip to content
Modular Mail Docs

Collaborating with Designers & Developers

Modular Mail works best when a technical user (developer or email coder) sets up a template system that non-technical users (marketers, content writers) can use to build campaigns.

The workflow

Section titled “The workflow”

1. Design

Section titled “1. Design”

A designer creates a visual mockup of the email, identifying which elements are repeatable. This could be in Figma, Sketch, or another design tool.

2. Development

Section titled “2. Development”

A developer codes the email into a single HTML file. They should test it thoroughly using a tool like Litmus or Email on Acid to ensure it renders correctly across all major email clients.

3. Implementation in Modular Mail

Section titled “3. Implementation in Modular Mail”

The developer splits the HTML file into the header, footer, and modules.

  1. Create a new template in Modular Mail
  2. Upload the header, footer, and module code
  3. Add mm-editable and mm-label attributes to define exactly what the end user can change

This is the most important step for creating a brand-safe system. See Template Best Practices for detailed guidance.

4. Handoff to marketers

Section titled “4. Handoff to marketers”

The developer shares the completed template with the marketing team.

5. Campaign creation

Section titled “5. Campaign creation”

Marketers create campaigns using the template. They can add, remove, and reorder modules. They can edit content in the fields the developer defined. They cannot accidentally break the underlying design.

Tips for template creators

Section titled “Tips for template creators”

If you are setting up templates, think of yourself as building a tool for your team. Your goal is to provide flexibility for content while maintaining brand and layout consistency.

Use clear labels. Write descriptive mm-label names. “Main Headline” is better than “Text Block 1”.

Group related fields. Use mm-group to organize fields that belong together in the editor sidebar.

Provide variety. Give your team a good selection of modules to choose from so they can build different campaign layouts.

Document your system. Consider creating internal documentation that explains which modules to use for different types of campaigns.

Test before handoff. Create a test campaign using your template. Edit every field. Preview at all device sizes. Export and check the HTML in an email testing tool.

Section titled “Related resources”