Email design: mobile, dark mode, and images that can vanish
Email renders in hostile territory — clients that block images, invert colours and cap width. Design rules that survive all of it.
Writing · 3 min read · updated
Design for a phone in a queue
Half or more of your mail is read on a phone, by someone giving it a three-second audition. That sets the rules before aesthetics enter the picture: a single column around 600px wide, body text at 16px or larger, generous spacing, and tap targets at least 44px square with room around them.
Two-column desktop layouts stack unpredictably on small screens. If a message cannot survive being one column, it is carrying more than one message.
Every image is optional — design accordingly
- The blocked-image test. Some clients and many corporate environments do not load images until asked. View your email with images off: if the offer, the CTA or the meaning disappears, the design fails. Real HTML text for everything that matters.
- Alt text on everything. It is what blocked-image viewers and screen readers get. Write it as the message the image was carrying, not a filename.
- Never the all-image email. One big JPEG of designed text is invisible to screen readers, unreadable with images off, unsearchable, and a classic low-quality signal to filters — the technique spammers use to hide words from scanners.
- Weight budget. Compress to double-digit kilobytes per image. Heavy mail loads slowly on mobile data, and Gmail clips messages over ~102KB of HTML — clipping hides your unsubscribe link, which is a genuinely bad outcome.
Dark mode is not optional
A large share of readers run dark mode, and clients handle it three different ways: some leave your colours alone, some invert only light backgrounds, and some — Outlook most aggressively — recolour everything. You cannot fully control the result; you can design to survive it.
- Transparent PNGs betray you. Dark logo, transparent background, dark-mode client: the logo vanishes. Add a subtle outline or padding-colour behind any dark artwork, or ship light-on-transparent.
- Never bake contrast into images. Text inside images keeps its original colours while the background around it inverts — producing exactly the unreadable combinations you were avoiding.
- Test, don't reason. Send seeds to Gmail, Apple Mail and Outlook with dark mode on. Dark-mode rendering is decided by client quirks, not by logic.
Keep the code boring
Email HTML is written for rendering engines that are years behind the web — Outlook still uses Word's engine. Tables for layout, inline CSS, system font stacks with web fonts as progressive enhancement, and no JavaScript (it is stripped everywhere). Boring code is not a compromise; in email it is the craft.
And always ship the plain-text alternative part. Some readers prefer it, some clients fall back to it, and its absence on HTML-only mail is a mild spam signal.
Common questions
What is the right image-to-text ratio?
There is no magic ratio that filters enforce — that is folklore from the same era as banned-word lists. The real rules: meaning must survive images being off, and all-image emails fail multiple audiences at once.
Can I use custom fonts in email?
Some clients honour web fonts, many do not. Use them as enhancement over a system-font stack you have actually looked at, so the fallback is a design choice rather than an accident.
How wide should an email be?
The 600px convention still holds: narrow enough for every desktop client, wide enough to matter, and it scales down to phones cleanly with fluid widths.
Check your addresses now
The free InkPigeon checker runs syntax, DNS, disposable, typo and role-account analysis on any address — instantly, no signup.