Costs
Part of A field guide to email design that survives every inbox
The email design questions worth asking before anything else
Common email design questions cover width, mobile-first layouts, image-only messages, fonts, dark mode, links, automated accessibility tests, and plain text.
What to take away
- Cap the content column at about 600px, put breakpoints near 480px and 600px, and confirm the layout survives a 320 CSS pixel viewport.
- Use font stacks that already exist on the recipient's deviceArial, Helvetica, sans-serif; Verdana, Geneva, sans-serif; Georgia, Times New Roman, serif.
- Treat dark mode as a per-client problem. Apple Mail, the Gmail apps and Outlook.com each handle color differently.
- Keep the sender, offer, price, terms, action and unsubscribe as live text. An image cannot carry any of it.
- Automated scans find missing alt attributes and weak contrast. Keyboard, zoom and screen-reader passes find the rest.
Set the width and the breakpoints before the layout
Start with a content column of about 600px. That fits most desktop preview panes without a sideways scroll.
On phones the column becomes the screen width minus a 16px to 24px gutter. Text holds a comfortable measure instead of stretching across the display.
W3C's Reflow explanation expects content to work at 400% zoom on a 1280px screen, which equals a 320 CSS pixel viewport. Test it by shrinking a browser window to 320px and reading the message like a page.
Set the width and the breakpoints
| Breakpoint | What changes | What to check |
|---|---|---|
| 320px to 480px | Single column, 16px side gutters, stacked buttons | No sideways scroll, tap targets at least 24px |
| 481px to 600px | Two columns for short blocks only | No table cell overflows its container |
| 601px and up | 600px content cap, centered, wider outer padding | Line length between 45 and 75 characters |
A fixed 600px image inside a 320px viewport is the usual cause of sideways scroll. Set images to a maximum width of 100%.
The field guide to email design covers the table structures that hold up when a client strips your style block, which is where these breakpoints fail first.
Choose fonts that already sit on the device
Web fonts load inconsistently. Outlook on Windows renders through Word and discards many font requests, and some mobile clients strip style blocks. A stack that ends in a generic family always resolves to something readable.
- Arial, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- Georgia, Times New Roman, serif
- Courier New, Courier, monospace, for codes and order numbers
Set body copy at 16px with a line height between 1.4 and 1.6. Anything under 14px becomes hard work on a phone and under zoom. Test the stack with the smallest text in the message, because legal footnotes and superscripts break the layout first when a fallback font runs wider.
Line length and contrast usually matter more than the family itself, a case the rebuilding email design around how people actually read piece makes with reading research.
Dark mode differs from client to client
Apple Mail on iOS and macOS reads the color scheme setting and adjusts backgrounds and text. The Gmail apps on iOS and Android ignore it and partly invert light backgrounds, so white cards can turn grey. Outlook.com respects the setting but guards some brand colors. Outlook on Windows renders through Word and applies its own inversion.
Declare a light and dark scheme in the head so clients know both are supported. Then fix the parts inversion breaks.
- Keep body text contrast at 4.5:1 or better in both modes.
- Give logos a solid background so they survive a dark panel.
- Never signal state with color alone.
These behaviors shift with app updates, so re-check after a major release.
Live text carries the message, images do not
Outlook blocks images from unknown senders by default, and corporate filters do the same. Screen readers skip an image when alt text is missing. W3C's Images of Text explanation says text should stay real text unless a narrow exception applies, such as a logo or lettering inside a photograph.
Keep the sender, offer, price, terms, action and unsubscribe as live text. If the opt-out is baked into a banner image, the message may fail its legal duty. The FTC's CAN-SPAM compliance guide sets that requirement for US commercial mail, and Canada's CASL applies a similar rule for Canadian subscribers.
Example: a button that names the action
Weak: "Click here" and "Learn more." Strong: "See the restock list" and "Track my order."
The label should still make sense when a screen reader lists every link out of order. Add the plain URL beneath the button for clients that strip styling, and keep the target at least 24 by 24 CSS pixels.
Labels carry the offer, so they follow the same rules as subject lines and opening lines. The copywriting practices that make email offers easy to trust piece shows how much of that work sits in a handful of words.
Checks that tools cannot run
- Tab through the whole message with the keyboard. Focus should move in reading order.
- Zoom to 200% and narrow the window to 320px. Nothing should clip.
- Read the alt text aloud. If it repeats the heading, rewrite it.
- Open the message in Windows High Contrast Mode. Background colors often drop out.
- Collect the link text on its own. Five lines of "Read more" tell a screen-reader user nothing.
Scanners catch missing alt attributes, weak contrast and empty links. They cannot judge whether alt text is meaningful or whether the reading order makes sense. Run both, and note which faults each one misses.
The copy side of the same audit is worth doing at once, and the email copywriting checklist sets out the lines to review before the template is frozen.
