HTML Email Development for Enterprise Clients: A Frontend Dev's Guide

Why Email HTML Is Still Painful

The web has moved on. CSS Grid, Flexbox, custom properties — standard tools that work reliably in all modern browsers. Email clients are not browsers. Outlook on Windows renders HTML using Microsoft Word's rendering engine. Not a browser. Word.

This means Flexbox doesn't work, CSS Grid doesn't work, and even simple properties like max-width behave unexpectedly. You're back to writing table-based layouts in 2026.

Outlook 2019 uses Microsoft Word's rendering engine. Everything you know about CSS layout is irrelevant.

Writing the HTML

A robust HTML email looks nothing like modern web HTML. The outer container is a table with a fixed width — typically 600px. Every content row is a tr with td cells. Text uses inline font-family, font-size, and color.

<table cellpadding="0" cellspacing="0"
width="600" style="border-collapse:collapse;">
<tr>
<td style="font-family:Arial,sans-serif;
font-size:16px; color:#1a1a1a;
padding:24px 32px;">
Email content here.
</td>
</tr>
</table>

Testing Across Clients

Before any campaign goes out, we test in Gmail web, Gmail mobile, Apple Mail on iOS, Outlook 2019, Outlook 365, and Outlook.com. For enterprise clients like PLDT and Solaire, the corporate Outlook install rate is high — so Outlook fidelity matters most.

Practical Tips

• Inline your CSS before you think you need to — don't rely on style block rules for anything critical
• Write alt text for every image — many enterprise clients block images by default
• All tables need cellpadding=0 cellspacing=0 as HTML attributes, not just CSS
• Test the plain-text version — extraction from table-heavy HTML can produce garbled output
• VML-based fallbacks for rounded buttons in Outlook