Design email for a single column at around six hundred pixels wide, keep it legible with images switched off, use real text rather than text inside images, and test in dark mode. Simple designs perform better and break less, and in email those are the same property.
Nearly every rendering disaster comes from treating email like a web page.
Assume images are off
Many clients block images by default, and some people never turn them on. If your message lives inside a picture, those readers receive a blank rectangle.
So the rule is that the email must make sense as text alone. Put the headline, the offer and the call to action in real text. Use images to support the message, never to carry it.
Write alt text on every image, which shows when the image does not, and is also what a screen reader announces.
Dark mode is not optional
A large share of readers use dark mode, and clients handle it inconsistently: some invert your colours, some invert only some of them, some do nothing.
The common failure is a black logo on a transparent background disappearing into a dark backdrop, or dark text on a background that inverted while the text did not.
Test in dark mode before sending, use logos with a visible outline or a solid background, and avoid pure white backgrounds behind pure black text, which is the combination clients most aggressively rewrite.
Structure that survives
The constraints are old-fashioned and they are still real.
- One column. Multi-column layouts break in ways you cannot predict and are unreadable on a phone
- Around six hundred pixels wide, which is the safe width across clients
- Buttons as styled table cells with a text label, not as images
- Font stacks with real fallbacks, since custom fonts do not load in several major clients
- Tap targets large enough to hit, which in practice means at least forty-four pixels tall
Plain text is a real option
For newsletters and anything written by a person to a list, plain or lightly styled text often outperforms designed templates.
It looks like a message rather than a broadcast, which raises replies. It renders identically everywhere. And it avoids the image-heavy pattern that filters treat with suspicion.
Designed templates earn their place for ecommerce, where the product image is the message. Outside that, ask whether the design is doing work or just looking professional.
The accessibility basics
These are quick and most templates fail them.
Enough contrast between text and background. A logical heading order rather than styled paragraphs pretending to be headings. Link text that describes the destination rather than saying click here. And a language attribute set, so screen readers pronounce it correctly.
All of these also improve readability for everyone, which is usually how accessibility work goes.
Test before every large send
Send yourself the email and open it on a phone, in dark mode, and in at least one desktop client that is not the one you use.
Check the preheader text, which is the line shown after the subject in the inbox and is the most wasted piece of copy in email. Left unset, it shows the first words of your template, which is often the words view in browser.
Common questions
- How wide should a marketing email be?
- Around six hundred pixels, single column. Multi-column layouts break unpredictably across clients and are unreadable on a phone.
- Do I need to design for dark mode?
- Yes. A large share of readers use it and clients handle it inconsistently. The classic failure is a black logo on a transparent background disappearing into a dark backdrop. Test before sending.
- Is plain text email better than HTML?
- Often, for newsletters and anything written by a person to a list. It looks like a message rather than a broadcast, renders identically everywhere, and avoids the image-heavy pattern filters treat with suspicion.
Keep reading