Skip to main content
Design specs for HTML email. Current as of 7 August 2026. Referenced from the email campaign brief and used alongside the email copy template.

​
Layout

Single column is the default. Multi-column layouts need table-based markup to survive classic Outlook, and stack unreliably on mobile without media query support.

​
HTML weight

The clipping threshold applies to HTML weight only. Images are referenced by URL and loaded separately, so they don’t count toward it. What pushes an email over the limit is markup: long inline styles, repeated table nesting, and copy-pasted blocks from a builder.A clipped email hides the unsubscribe link, which is a compliance problem as well as a rendering one.

​
Images

Format support, as of August 2026: JPEG, PNG, and GIF are the universally safe set. WebP renders in Apple Mail and recent Outlook builds but fails in older Outlook desktop versions. AVIF is essentially unsupported across the major clients. Every image needs alt text. Several clients block images by default, and an email that only makes sense once images load will not make sense to those readers.
Never put the offer, the price, or the call to action only inside an image. With images blocked, that email says nothing. Keep every critical message in live text.

​
Dark mode

Dark mode handling varies more between clients than any other part of email rendering, and there is no setting that produces consistent results. What holds up across all four:
  • Export logos as transparent PNG with an outline or stroke that stays visible against both a light and a dark background.
  • Add 20 to 30 px of background padding around logos and icons, so an inverted background doesn’t sit flush against the mark.
  • Avoid pure white (#FFFFFF) and pure black (#000000) as large fills. Both invert to the most jarring possible result.
  • Avoid text baked into images. Inverted backgrounds behind fixed-color text is the most common dark mode failure.
  • Test in light and dark before every send. It is in the email pre-send checklist for a reason.

​
Rendering engines

Classic Outlook sets the floor. Build with tables and inline styles, and treat modern CSS as progressive enhancement rather than as the base layout.

​
Accessibility

  • Contrast ratio of at least 4.5:1 for body text against its background.
  • Semantic heading structure, not text sized up to look like a heading.
  • Descriptive link text. “Start your free trial” rather than “click here”.
  • Alt text on every image, empty (alt="") on purely decorative ones.
  • A single-column layout at mobile widths.

​
Working notes

  • Inline every style. Gmail strips <style> blocks in several contexts, and an email that depends on a stylesheet will lose its formatting there.
  • Set preview text explicitly. Left unset, it falls back to whatever text comes first in the HTML, which is usually a “view in browser” link or an image alt tag.
  • Build the email to work with images off. Not as a fallback, as the base case.
  • Test on real devices. Platform previews render approximations and miss client-specific failures, particularly in Outlook and in dark mode.
Last modified on August 10, 2026