DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

HTML Email Development Is Like Web Development from 2003 (And That Is Not Changing)

#webdev #html #email #tutorial

If you have ever built a web page with modern CSS -- flexbox, grid, custom properties, media queries -- and then tried to build an HTML email, the experience is jarring. Email clients render HTML using engines that range from reasonably modern (Apple Mail, iOS Mail) to ancient (Outlook using the Word rendering engine). The result is that HTML email development requires techniques that web development abandoned two decades ago.

Why email HTML is stuck in the past

The rendering engine landscape:

  • Apple Mail/iOS Mail: WebKit-based, supports most modern CSS
  • Gmail: Strips <style> blocks in many contexts, requires inline styles
  • Outlook 2007-2019: Uses Microsoft Word's HTML rendering engine, which does not support float, flexbox, grid, or even basic CSS positioning
  • Yahoo Mail: Inconsistent CSS support, strips some properties
  • Outlook.com: Different engine from desktop Outlook, better CSS support but still limited

Because Outlook (desktop) uses Word's renderer, you cannot use:

  • display: flex or display: grid
  • float (unreliable)
  • position: absolute/relative
  • background-image on divs (only on <table>, <td>, <th>)
  • CSS border-radius (ignored)
  • max-width (ignored on some elements)

Tables are still the answer

The only layout method that works reliably across all email clients is HTML tables. Yes, in 2026, email developers are writing table-based layouts:

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
  <tr>
    <td style="padding: 20px; font-family: Arial, sans-serif; font-size: 16px; color: #333333;">
      Your content here
    </td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

The role="presentation" attribute tells screen readers to treat the table as layout rather than data. The inline styles ensure Gmail does not strip them. The explicit cellpadding="0" and cellspacing="0" prevent Outlook from adding unexpected spacing.

Inline styles are mandatory

Gmail's web client (used by 1.8 billion people) strips <style> blocks from emails in certain contexts. The only reliable way to style email HTML is inline:

<!-- This might get stripped -->
<style>
  .header { color: #333; font-size: 24px; }
</style>
<h1 class="header">Title</h1>

<!-- This always works -->
<h1 style="color: #333333; font-size: 24px; font-family: Arial, sans-serif; margin: 0;">Title</h1>
Enter fullscreen mode Exit fullscreen mode

Writing inline styles by hand is tedious. Most email developers write CSS in a style block during development and then use an inliner tool to convert it to inline styles before sending.

Responsive email techniques

Since you cannot use media queries reliably (Gmail strips them), responsive email uses a technique called "fluid-hybrid" or "spongy" layout:

<!--[if mso]>
<table role="presentation" width="600"><tr><td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
  <!--[if mso]>
  <table role="presentation" width="100%"><tr>
  <td width="300" valign="top">
  <![endif]-->
  <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
    Column 1
  </div>
  <!--[if mso]>
  </td><td width="300" valign="top">
  <![endif]-->
  <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
    Column 2
  </div>
  <!--[if mso]></td></tr></table><![endif]-->
</div>
<!--[if mso]></td></tr></table><![endif]-->
Enter fullscreen mode Exit fullscreen mode

The <!--[if mso]> conditional comments provide Outlook-specific table markup. Modern clients ignore these and use the <div> layout, which stacks on small screens because display: inline-block elements wrap when they exceed the container width.

Testing email HTML

You cannot test email HTML by opening it in Chrome. You need to test in actual email clients. Services like Litmus and Email on Acid render your email across dozens of clients and show you screenshots. At minimum, test in:

  1. Outlook (desktop) -- the most restrictive
  2. Gmail (web) -- the most popular with style stripping
  3. Apple Mail -- the most permissive (do not assume all clients behave this well)
  4. Mobile (iOS Mail and Gmail app)

I built an HTML email builder at zovo.one/free-tools/html-email-builder that helps you construct email-compatible HTML with table-based layouts, inline styles, and Outlook conditional comments built in. Preview the result in real time and export production-ready email HTML. Saves the headache of debugging Outlook rendering issues from scratch every time.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)