Collaborating with Designers & Developers

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

The Ideal Workflow

1. Design: A designer creates a visual of the email, paying attention to what elements are repeatable. This could be in Figma, Sketch, or another design tool.
2. Development: A developer codes the email into a single, high-quality HTML file. They should test it thoroughly using a tool like Litmus or Email on Acid to ensure it renders perfectly across all major email clients.
3. Implementation in Modular Mail: The developer then splits the master HTML file into the Header, Footer, and Modules.
   • They upload these pieces to a new Template in Modular Mail.
   • They carefully add mm-editable and other data-mm- attributes, defining exactly what the end-user can and cannot change. This is the most critical step for creating a “brand-safe” system.
4. Hand-off to Marketers: The developer hands off the completed template to the marketing team.
5. Campaign Creation: Marketers can now create campaigns using this template. They can add, remove, and reorder modules, and edit the content in the fields the developer defined, but they cannot accidentally break the underlying design.

The Role of the Template Creator

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

• Be thoughtful with labels: Use clear data-mm-label names. “Main Headline” is better than “Text Block 1”.
• Lock what’s essential: Use the editor’s settings to lock modules that should not be removed, like a legal footer.
• Provide a variety of modules: Give your team a good “toolbox” of modules to choose from so they can build a variety of campaign layouts.