E-mail Designs

Designs and Templates

A design is the wrapper; a template is the message. Most confusion about e-mail here comes from conflating them.

Where to find it

Architect Panel → Layout & Pages:

• E-mail Designs — the wrappers
• E-mail Templates — the messages

What a design holds

Three parts: what goes above the content, a default body treatment, and what goes below. In practice that is your header, your styling and your footer — logo, colours, address, unsubscribe line, small print.

What a template holds

The message itself — the subject and the words specific to that communication, with whatever merge fields it needs.

Why the separation earns its place

Because the wrapper changes for reasons that have nothing to do with any individual message. A rebrand, a new logo, a change of registered address, a legally required line in the footer.

With one design, that is one edit. Without the separation, it is every template you have — and you will miss some, so a proportion of your mail carries the old address indefinitely.

Keep layout out of templates

The discipline that makes it work. If a template carries its own header and footer, it has stopped using the design and will not follow the next change.

Templates should be content. When you find layout creeping in, that is a sign the design is missing something the author needed.

Designs are configurable

A design can expose its own fields, so the same wrapper can vary — a colour, a logo, a strapline — without duplicating the whole thing. That is usually better than a second design.

How many designs?

Usually one. Occasionally two, where you genuinely have distinct identities — a customer brand and an internal one, or two trading names.

A design per department or per message type is a mistake that reveals itself at the next rebrand, when there are nine to update instead of one.

The footer is where obligations live

Company registration details, unsubscribe links, regulatory statements. Holding them in the design means they are on every message by construction, rather than depending on whoever wrote each template remembering.

Worked example

An organisation runs one design carrying its logo, colours, registered address and unsubscribe line, with a configurable accent colour. Forty-odd templates carry only their own content. When the registered address changed, the edit took two minutes and every future message was correct — including templates nobody had looked at in two years.

Recommendations

• One design unless you have genuinely separate identities.
• Keep templates to content, layout in the design.
• Put obligations in the footer, not in each template.
• Use design fields rather than creating a second design.

Building a Design

Building a design means writing the header, the default treatment and the footer that will wrap every message you send.

Where to find it

Architect Panel → Layout & Pages:

• E-mail Designs — the design and its fields
• E-mail Templates — what it will wrap

Architect Panel → Activity:

• E-mail Log — confirming what was actually sent

E-mail is not a web page

The constraint everything else follows from. Mail clients support far less than browsers, inconsistently, and some strip or ignore styling entirely.

What works on a website will not necessarily survive. Keep the structure simple, keep styling conservative, and expect the result to look plainer than a web design would.

Design for a phone first

Most mail is read on one. A design that only works at full width fails for the majority — and the failure is not subtle, it is horizontal scrolling and unreadable text.

Single column, generous text size, tappable links with space around them.

Images will not always load

Many clients block remote images by default. A design whose header is one large image shows a blank space to a meaningful proportion of recipients, and if that image contains your name, the message arrives anonymous.

Put anything essential in text. Use images to decorate, not to carry meaning.

Dark mode

Increasingly common and it can invert your careful colour choices. A design assuming a white background may become white text on white. Worth checking rather than assuming.

What belongs in each part

• Top — identification. Who this is from, recognisably, in text as well as image.
• Default — the body treatment: font, size, spacing, link colour. Restrained.
• Bottom — your address, registration details, unsubscribe, and anything you are obliged to include.

Test in real clients

Not in a preview. Send a real message to accounts on the clients your recipients actually use — at minimum a desktop client, a webmail service and a phone — and look at each.

This is the step that catches the problems, and it is the one most often skipped because the preview looked fine.

Test with a real template

An empty design looks fine. A design wrapping an actual message with a long subject, a table and a link is where spacing and width problems appear.

Change it rarely

Because it affects every message, a design change is a change to all of your outgoing mail at once. Test it as such, and avoid making cosmetic adjustments to something that works.

Worked example

A design is built single-column with the organisation's name in text beside the logo, a plain body treatment and a footer carrying the registered address and unsubscribe link. It is tested by sending a real appointment reminder to four accounts including two phones — which caught the logo being unreadable in dark mode, fixed before launch.

Recommendations

• Single column, phone first.
• Never carry meaning in an image.
• Test in real clients with a real template.
• Change it rarely — it affects everything.