HTML email: what still works in mail clients

Writing HTML for email means coding for around thirty rendering engines, none of which follow the same rules as browsers. Outlook on Windows still uses Microsoft Word’s rendering engine. Gmail rewrites styles. Apple Mail applies system preferences. Here is what actually works in 2026, and what to keep avoiding.

#Tables remain the reference structure

The predicted disappearance of layout tables has not happened. Desktop versions of Outlook on Windows still rely on the Word engine, which ignores float, display: flex and display: grid. A layout built on those properties collapses into a single column — sometimes acceptably, often not.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="padding: 24px 16px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px;">
          Content
        </td></tr>
      </table>
    </td>
  </tr>
</table>

The role="presentation" attribute is not decorative: it tells screen readers the table carries layout rather than data, which prevents a cell-by-cell reading.

#What is genuinely available

#Dark mode, the main recent change

This is the topic that produces the most unexpected results. Three behaviours coexist: clients that honour prefers-color-scheme, those that automatically invert light colours, and those that apply nothing. A hard-coded white background with black text can therefore become a dark background with the text still black — unreadable.

<style>
  :root { color-scheme: light dark; supported-color-schemes: light dark; }

  @media (prefers-color-scheme: dark) {
    .body     { background-color: #14181d !important; }
    .text     { color: #e8edf3 !important; }
    .logo-light { display: none !important; }
    .logo-dark  { display: block !important; }
  }
</style>

Two practical rules limit the damage: never use a black transparent PNG logo (it disappears on a dark background — supply a light version), and avoid extreme contrasts that inverting clients treat aggressively.

An email is designed to stay readable even when every one of its CSS rules is ignored. Whatever remains must still work.

#Images: necessary, never essential

A significant share of recipients read messages with images blocked by default. Three operational consequences:

• An alt attribute on every image, written to be read — it is the text that appears instead.
• No essential information in an image alone: a call to action must remain an HTML-styled link, not a clickable image.
• Explicit dimensions (width and height attributes) to avoid reflow on display.

#The button, a textbook case

The bulletproof button remains the reference technique: a styled link inside a table cell, with a conditional fallback for Outlook.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr><td bgcolor="#0a6cff" style="border-radius:6px;">
    <a href="https://example.com/"
       style="display:inline-block; padding:14px 28px; font-family:Arial,sans-serif;
              font-size:16px; color:#ffffff; text-decoration:none;">
      Read the article
    </a>
  </td></tr>
</table>

#Checks before sending

1. Total HTML weight under 102 KB: beyond that, Gmail clips the message and shows a “view entire message” link, which breaks both tracking and layout.
2. A plain-text version supplied: its absence is a negative signal for filters.
3. Rendering verified on at least Outlook Windows, Gmail web, Gmail mobile and Apple Mail — that quartet covers most of the divergence.
4. Absolute links over HTTPS, images included.
5. A visible, working unsubscribe link, in addition to the List-Unsubscribe header.

#What to take away

HTML email is not converging on web HTML, and betting on that convergence produces broken messages for a share of recipients. The method that holds is to write a table structure, style inline, handle dark mode explicitly, and treat every CSS improvement as a bonus that may vanish.

#Also on Mail Studio

• SPF, DKIM and DMARC: the authentication baseline
• CSS design tokens: a maintainable light/dark theme