General Email Pitfalls

Common mistakes that affect email rendering across multiple clients — regardless of which specific engine they use.

1. Using divs for layout

<div> elements don't behave consistently across clients. For multi-column layouts that need to work in Outlook desktop, use HTML tables. For clients that support flex/grid, you can layer a modern layout on top with CSS, but the table provides the fallback.

2. Relying on external stylesheets

Every major email client strips <link rel="stylesheet">. All CSS must live inline (style="...") or in a <style> block in the <body>. Use a CSS inliner in your build pipeline.

3. Images without alt text or explicit dimensions

Many email clients (especially corporate Outlook) block images by default. Without alt text, your email is meaningless when images are off. Without explicit width and height attributes, layout shifts occur when images load.

<img src="hero.jpg" alt="Summer sale — 50% off" width="600" height="300">

4. Non-web-safe fonts without fallbacks

Web fonts aren't reliably supported. Always declare a fallback stack:

font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;

5. Forgetting image blocking

Corporate email clients often block images by default. Your email should communicate its message even when all images are hidden. Use descriptive alt text and design layouts that don't rely on images to convey critical information.

6. Width greater than 600px

Email preview panes are often narrow. The industry standard is a maximum container width of 600px. Use a centered, fixed-width table or max-width container:

<table width="600" align="center" style="max-width:600px;">...</table>

7. Dark mode surprises

Apple Mail and some versions of Outlook.com automatically invert colors in dark mode if you don't declare dark mode styles explicitly. White backgrounds can become black, making white text invisible. Add dark mode media queries and use color-scheme: light meta tag to opt out of automatic inversion:

<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">

8. Using shorthand CSS properties

Some clients (especially older Outlook) handle CSS shorthand properties poorly. Expand shorthands where possible:

/* Instead of: */
margin: 10px 20px;

/* Use: */
margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;

9. Padding on non-table elements in Outlook

In Outlook MSO, padding on <div> is unreliable. Apply padding to <td> elements instead, or use empty spacer cells.

10. Testing only in your browser

Chrome is very forgiving. An email that looks perfect in Chrome can be broken in Outlook. Always test in multiple clients before sending. Use MailTester to catch issues early, and test in real clients for final validation.

Recommended Email Development Workflow

  1. Design in Apple Mail (most permissive — catches code bugs)
  2. Check MailTester lint panel for compatibility issues
  3. Add Outlook MSO fallbacks (tables, conditional comments, VML)
  4. Inline CSS with a tool like Juice or Premailer
  5. Test in Gmail (web) — check style stripping behavior
  6. Test in real Outlook if possible, or use a service like Litmus for final check