Agent WranglersLayout and accessibility
Build email that every client can show and every reader can use. Semantic HTML, live text, clear contrast, small files and a test send to each major client.
- Required 8
- Recommended 4
Email clients render HTML with very different engines. Classic Outlook on Windows uses the Word engine, Gmail removes some CSS, and Apple Mail supports nearly everything. Data on which client supports what is published at caniemail.com. Plain-text-only mail passes this chapter, because it has no layout to break.
Required
Mark up the message with meaning
RequiredUse headings, paragraphs and lists, and mark every layout table with
role="presentation", so screen readers announce content and not table cells.Describe every image
RequiredGive every meaningful image an
altthat says what it shows or does, and give decorative images an emptyalt="".Use contrast and more than colour
RequiredMeet the contrast in colour contrast and never show meaning by colour alone, as not colour alone says.
Make email text easy to read
RequiredSet body text to at least 16 pixels, with a line height of at least 1.4 and a content column no wider than 600 pixels.
Send text instead of pictures of text
RequiredPut every important word in live text. Never send a message that is one large image.
Fit every screen
RequiredMake the message work on a phone first, with fluid widths and media queries only as an extra.
Make buttons easy to tap
RequiredBuild each call to action as a link styled as a button, at least 44 by 44 pixels, with clear words.
Test in the clients your readers use
RequiredSend every new template to the main email clients before it goes to people, and check it in light and dark mode.
Recommended
Build layout that Outlook can show
RecommendedBuild the outer layout with tables and fixed widths where classic Outlook on Windows needs them, and use modern CSS only as an extra.
Inline the CSS and plan for it to fail
RecommendedPut the CSS that matters inline on each element, and make sure the message still reads if a client strips the rest.
Plan for dark mode
RecommendedDesign for clients that switch to dark mode, so text stays readable and logos stay visible.
Write a preheader
RecommendedSet the short text that inboxes show after the subject, so it adds to the subject instead of repeating it.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility.