How to Test HTML Email Templates Across Clients

HTML email is one of the most frustrating corners of front-end development. The web moved on to CSS Grid, Flexbox, and modern layout years ago. Email clients are still living in 2005. Gmail strips <style> tags. Outlook uses Microsoft Word as its rendering engine. Apple Mail is reasonably modern but has its own quirks.

Testing HTML email templates before sending is essential. An untested email that looks broken in Outlook — which still accounts for a significant share of business email opens — is a credibility problem.

Why HTML Email is Different from Web HTML

No external stylesheets

Most email clients strip <link rel="stylesheet"> tags. You must use inline styles (style="color: red") for the majority of styling, or embed a <style> block in the <head> (which is respected by some but not all clients).

Limited CSS support

Email clients support a small subset of CSS:

Basic text properties (font-family, font-size, color, line-height) — widely supported
Box model (padding, margin, border) — mostly supported
Background colors and images — mostly supported
Flexbox — NOT supported in Outlook
CSS Grid — NOT supported in Outlook
CSS variables — NOT supported in most clients
Media queries — supported in Gmail app, Apple Mail, Outlook mobile, but NOT in Gmail web

Table-based layout

Because modern CSS layout is unreliable, production-quality HTML emails use HTML tables for layout. Yes, literally <table> elements with <tr> and <td>.

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td style="padding: 20px; background-color: #ffffff;">
      <h1 style="font-family: Arial, sans-serif; color: #1a1a1a;">Your order is confirmed</h1>
    </td>
  </tr>
</table>

Images need explicit dimensions

Always set width and height attributes on <img> tags. Many email clients block images by default, so important information should never be image-only. Provide alt text.

Outlook-specific VML

Some Outlook versions require VML (Vector Markup Language) for features like background images and rounded buttons:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" ...>
<![endif]-->

Using the DevHexLab HTML Email Tester

Paste your HTML email template into the editor. The tester:

Renders a preview of the email in a simulated inbox view
Flags unsupported CSS with client-specific warnings
Checks for common issues: missing alt text, images without dimensions, missing plain-text fallback
Shows mobile preview: how the email renders at mobile viewport widths
Validates links: checks that all href URLs are valid
Reports email size: large HTML emails (over 102KB) are clipped by Gmail

HTML Email Best Practices

Always include a plain-text version

Every HTML email should have a plain-text alternative in the multipart/alternative MIME envelope. Some recipients prefer plain text, and some corporate email filters require it. Most email sending services (SendGrid, Postmark, Mailchimp) support generating a plain-text version automatically.

Inline your CSS

Use a CSS inliner tool to convert <style> rules to inline style attributes before sending. This ensures styles survive even the most aggressive email client stripping.

Test the email-to-phone fallback

Add this to the <head> to prevent iOS from auto-linking phone numbers and dates:

<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">

Use a preheader

The preheader is text that appears in the inbox preview next to the subject line. Add it as the first text in the <body>, hidden with CSS:

<span style="display:none;max-height:0;overflow:hidden;">
  Your order #12345 has shipped and will arrive Thursday.
</span>

Use web-safe fonts with fallbacks

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

Custom fonts via @font-face are supported in Apple Mail and some mobile clients, but fall back to system fonts in most others.

Responsive Email Techniques

Since media queries are unreliable, use fluid layouts with percentage widths and max-width:

<table width="100%" style="max-width: 600px; margin: 0 auto;">

This creates a centered 600px email on desktop that scales down on mobile without requiring media queries.

Conclusion

HTML email development is frustrating but learnable. Knowing the constraints (table layout, inline CSS, limited CSS support) lets you write emails that render reliably. The DevHexLab HTML Email Tester gives you a fast way to preview and validate templates before they reach real inboxes.