You build an email, it looks great in the preview, you send it — and then someone forwards you a screenshot where the layout has collapsed, the text is unreadable, or your logo is a grey box with an X in it.

Email is the most technically hostile environment in digital design. Here's why, and what actually survives it.

Email Clients Don't Agree on Anything

A web browser renders modern HTML and CSS predictably. Email clients do not. Outlook, Gmail, Apple Mail, Yahoo, and dozens of mobile apps each interpret email HTML differently, and several use rendering engines with significant limitations.

The practical consequence: techniques that work fine on a website — modern layout systems, embedded stylesheets, custom fonts, background images — may partially or completely fail depending on where the email lands.

This is why email design leans on approaches that look dated by web standards. They're not dated. They're the ones that work everywhere.

Email clients render HTML inconsistently, and several use engines with major limitations. Modern web layout techniques frequently fail in email, which is why reliable email design uses simpler, more conservative structure than a website would.

Images Are Blocked by Default in Many Clients

This is the one that catches most businesses.

Numerous email clients block images until the recipient chooses to load them. If your email is one large image — a common shortcut, since it guarantees the design looks exactly right — then a meaningful share of your audience opens it and sees nothing but empty boxes.

Two rules follow. Never build an email as a single image. And always write alt text for every image, because that's what displays when images don't load. Alt text is not an accessibility checkbox in email; it's frequently the only thing the reader sees.

The reliable structure: real HTML text for anything essential — headline, offer, call to action — with images as enhancement.

Dark Mode Breaks Things

Many clients now invert or adjust colors in dark mode, and they don't all do it the same way. A logo on a transparent background can become invisible. Black text on white can invert to white on dark, which is fine — until a logo designed for white backgrounds sits next to it and doesn't.

Worth testing in dark mode specifically. The most common casualty is a dark logo on a transparent background disappearing entirely.

Most People Read on a Phone

Which sets some hard constraints:

One column. Multi-column layouts either shrink to unreadable or stack unpredictably.

Bigger text than feels right. Body copy under 14px is uncomfortable on a phone, and many clients enforce a minimum anyway.

Tappable buttons. A text link is hard to hit accurately with a thumb. Real buttons with generous padding convert better.

Front-load the message. Preview panes show very little. The first line has to carry.

Design marketing emails as a single column with body text at 14px or larger and tappable buttons rather than text links. Most email is read on a phone, where multi-column layouts stack unpredictably and small text is uncomfortable.

The Subject Line and Preview Text

Both are part of the design even though neither is visual.

The subject line determines whether anything else matters. Specific beats clever. Front-load the important words, because mobile truncates aggressively.

Preview text — the snippet after the subject in the inbox — is set separately and often ignored, which means it defaults to whatever text comes first in the email. That's frequently "View this email in your browser." Setting it deliberately is one of the cheapest improvements available.

What to Test Before Sending

• Gmail on desktop and mobile
• Outlook desktop, which is the most restrictive common client
• Apple Mail on iPhone
• Dark mode in at least one client
• Images disabled, to see what a blocked-image reader gets
• Every link, clicked

Sending yourself a test and opening it in one place is not testing.

The Underlying Principle

Email design rewards restraint. Every additional layer of visual complexity is another thing that can break somewhere you're not looking.

The emails that perform reliably are structurally simple, text-forward, single-column, and designed so that if every image fails to load, the message still lands.

Questions People Ask

Why does my email look different in Outlook than in Gmail?
Email clients use different rendering engines with different levels of HTML and CSS support. Outlook on desktop is typically the most restrictive, which is why conservative, simple layouts perform most consistently.

Should I build my email as one big image?
No. Many email clients block images by default, so recipients would see nothing. Build with real HTML text for essential content and use images as enhancement.

Why do images not load in marketing emails?
Many clients block external images until the recipient allows them, as a privacy and security measure. This is why alt text matters — it's often the only content a reader sees initially.

What size should text be in an email?
At least 14px for body copy, larger for headlines. Smaller text is uncomfortable on phones, and some mobile clients enforce a minimum size regardless of your setting.

What is preview text in an email?
The snippet shown after the subject line in the inbox. It can be set deliberately, and when it isn't, clients pull whatever text appears first — often something unhelpful like a browser-view link.

How do I stop my emails going to spam?
Authenticate your sending domain, send to people who opted in, keep a clean list, avoid misleading subject lines, and include a working unsubscribe link. Deliverability is mostly reputation and list hygiene rather than design.

Want emails that hold together everywhere they land? Schedule a free consultation at jpetrous.com | contact@jpetrous.com | 586-563-6634.