Template best practices

A good template makes the right thing easy and the wrong thing impossible. These habits come from setting up templates for many teams.

Mark the content, not the layout

Put markers on the smallest element that holds the content: the <h1>, the <img>, the <a>. Leave tables, rows and cells unmarked unless a colour, choice or toggle needs them.

<!-- Good: the content is marked, the layout isn't -->
<td style="padding:32px">
  <h1 data-mm="headline">Our autumn edit</h1>
</td>

The exception is rich text, whose marker goes on the <td> or <div> that holds its paragraphs.

Write labels and help text for marketers

Labels are what your team sees. “Headline” beats “h1”, and “Button” beats “cta-link”. Use help text for anything a marketer would otherwise ask you:

• image sizes: “Shown 600 wide. Upload it at 1200 × 600 for sharp screens.”
• tone or rules: “One line. No exclamation marks.”
• merge tags: “Your ESP’s unsubscribe tag, such as *|UNSUB|*.”

Set character limits

Limits protect your layout. A headline that wraps to four lines on mobile breaks the design as surely as broken HTML. Test the longest text you allow at mobile width, then set the limit there. Buttons usually want 20 to 30 characters, headlines 40 to 80.

Use choices for brand rules

If marketers should only use brand colours, offer them as a choice rather than a free colour field. A choice can also bundle several styles into a preset, so “Dark” changes the background and the text together and the result is always readable.

Use toggles for optional parts

Rather than making two near-identical modules, add a toggle. “Show button”, “Show heading” and “Show badge” keep the module library short and easy to scan.

Keep modules independent

Each module must close every tag it opens and look right next to any other module. Avoid modules that only work in pairs, such as a “section start” and “section end”. Test a few unusual orders in a campaign before you publish.

Write realistic sample content

New modules start with the template’s own content. Use real-looking copy and images, at realistic lengths, so marketers see what a finished module looks like and the thumbnails in the campaign list are meaningful.

Use groups on long forms

Five fields don’t need groups. Fifteen do. Group by what marketers think about together: “Content”, “Button”, “Style”.

Test in real inboxes

The preview shows your HTML in a browser. Before you roll a template out, build a campaign with every module, send a test and check it in the email clients your audience uses, especially Outlook for Windows, Gmail and Apple Mail.