D-12 · CONTENT · RENDERING
HTML vs plain-text rendering and spam filters
Image-only HTML with no text twin is the fastest route to spam. This scenario defines multipart discipline and client-proof template rules.
Symptom
A beautifully designed campaign renders as a broken-image icon in Outlook, a clipped wall in Gmail, and a spam-folder resident almost everywhere. The template is one large sliced image with linked hotspots, no plain-text part, and remote fonts plus scripts that clients strip. Dark-mode users see white text on white; Outlook users see Times New Roman chaos. Engagement craters and complaints rise from users who cannot find the unsubscribe link hidden in an image footer.
Transactional templates inherit the same builder, so password resets carry promotional fingerprints — heavy images, link farms — and start missing inboxes too.
Cause
Email clients render a 1999-era HTML subset: table layouts, inline CSS, no external stylesheets, spotty max-width support, and Outlook’s Word-engine quirks. Filters treat image-only mail as suspicious because spammers use images to evade text analysis; missing plain-text parts, low text-to-image ratios, and mismatched visible-vs-href links all score badly. Accessibility failures (no alt text, no semantic structure) correlate with the same shortcuts filters penalize.
AI-generated templates amplify the pattern: verbose HTML, exotic CSS, and decorative images without fallback discipline, shipped without client testing.
Fix
Send genuine multipart/alternative with a real plain-text twin — not an auto-stripped afterthought. Design to a 60:40 text-to-image guideline, keep total message size small, use table layouts with inline styles, bulletproof buttons (not image CTAs), system font stacks, and alt text on every image. Test across Outlook, Gmail, Apple Mail, and dark mode with screenshots before any bulk send, and keep transactional templates spartan: one purpose, one primary link, minimal branding.
Fix link hygiene simultaneously: visible domains matching href domains, no shorteners, authenticated tracking domains aligned with the sender.
Prevention
Lint templates in CI: multipart presence, size budgets, image counts, link-domain allowlists, and plain-text parity. Maintain two design systems — promotional and transactional — with a hard rule against cross-contamination. Re-test quarterly as clients change rendering, and treat accessibility checks (contrast, alt text, logical reading order) as deliverability work, because the underlying discipline is identical.
Worked example
A startup ships an AI-generated launch email: one 900KB hero image, script-driven countdown, custom webfont, no text part. In Outlook the font falls back to Times, the countdown shows a broken box, and the single-image body triggers spam classification at two major providers. Dark-mode testers report white-on-white headlines. The campaign “sends” to everyone and reaches far fewer.
The rebuild uses table layout, inline styles, system fonts, a 60:40 text-to-image ratio, bulletproof buttons, and a genuine plain-text twin — total 68KB. Screenshot tests across five clients pass before send. Inbox placement recovers, clicks rise because the CTA works with images off, and screen-reader users finally get a logical reading order. Constraints turned out to be the design system, not its enemy.