Email Design and Templates

Why Email Rendering Is Difficult

Email clients each interpret HTML and CSS differently. Outlook on Windows uses the Word rendering engine. Gmail strips certain styles. Apple Mail behaves closest to a browser.

The practical consequence is that reliable email HTML uses table-based layouts and inline CSS — techniques abandoned on the web years ago. Modern approaches work in some clients and break in others.

Test in the clients your list actually uses. The distribution is visible in your analytics and varies substantially by audience.

Plain Text Versus HTML

HTML email supports branding, imagery and structured layout. Plain text renders everywhere, loads instantly and often reads as more personal.

Plain-text-styled HTML — minimal formatting, no images, left-aligned — frequently outperforms designed templates for one-to-one style communication and for B2B. Heavily designed templates suit retail promotion and newsletters.

Always send a genuine plain text alternative alongside HTML. Its absence is a mild spam signal.

Images and Text Balance

Many clients block images by default. An email that is one large image displays as an empty rectangle with no message.

Keep meaningful content in live text. Use images to support rather than carry the message, always set alt text, and check the email makes sense with images disabled.

Very high image-to-text ratios are treated as a spam signal by some filters, which is a secondary reason to avoid image-only emails.

Dark Mode

A growing share of recipients read in dark mode, where clients invert colours with varying degrees of competence. Logos with white backgrounds become visible boxes, dark text on transparent backgrounds disappears, and brand colours shift.

Mitigations: use transparent PNGs with strokes that work on both backgrounds, avoid pure white and pure black, and test explicitly in dark mode rather than assuming it will work.

Accessibility

Accessible email is also better email: semantic heading structure, sufficient colour contrast, descriptive link text rather than "click here", alt text on every image, and a single-column layout that reflows on small screens.

Font size below fourteen pixels is difficult to read on mobile and is a common cause of immediate deletion.

Testing Across Clients Without Losing a Week

Email rendering is inconsistent enough that testing is not optional, and thorough testing is expensive. The compromise is a tiered approach.

Tier one — test every send. The two or three clients that account for most of your list. Look at your own analytics rather than industry figures; the distribution varies enormously by audience.

Tier two — test on template change. The next several clients, plus dark mode, plus one narrow mobile viewport.

Tier three — accept degradation. Old desktop clients with known limitations. Make sure the email is readable there, not that it is beautiful.

Two habits that prevent most problems. Build from a template you have already tested rather than designing fresh each time — the failures come from new structures, not new copy. And send a real test to real accounts on the main clients, because a rendering preview and an actual inbox differ in ways that matter, particularly around image blocking and clipping on long emails.

Accessibility, Which Also Fixes Deliverability

Accessible email is better email for reasons that have nothing to do with compliance, and the overlap with deliverability is large enough to be the practical argument.

Real text, not text in images. Screen readers cannot read an image of text, image blocking hides it, and an image-only email is a recognised spam pattern. One change solves three problems.

Semantic structure — actual headings rather than large bold paragraphs — so the email can be navigated rather than only read top to bottom.

Alt text on every image, describing function rather than appearance. This is also what a recipient with images blocked sees, which is a large share of your list.

Sufficient contrast, checked rather than eyeballed, and tested in dark mode where many clients invert colours unpredictably.

Descriptive link text. Read the pricing guide rather than click here, which is unusable out of context and is also the pattern filters associate with bulk mail.

And a real text-to-image ratio. Not a myth exactly, but the underlying point is sound: an email that is one large image is worse on every axis at once.

Sources

What each claim on this page rests on. Entries are typed so you can see which are primary.