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.