Back to Blog

Email Coding Best Practices for Client Compatibility

A comprehensive guide to building email templates that work across all major email clients. Learn the tricks, workarounds, and testing strategies that actually work in production.

May 28, 2025
8 min read
Email Development
HTML
CSS
Web Development
Best Practices
Outlook
Technical

Email Coding Best Practices for Client Compatibility

Email coding is like web development's evil twin—what works perfectly in your browser might completely break in Outlook 2016. After building countless email templates and debugging rendering issues across dozens of clients, here's what actually works.

The Foundation: Tables Are Your Friend

I know, I know. It's 2024 and we're still using tables. But email clients are stuck in the early 2000s, especially Outlook (which uses Word's rendering engine—yes, really).

  • Use nested tables for complex layouts instead of divs
  • Set explicit widths on table cells
  • Always include cellpadding="0" and cellspacing="0" on tables
  • Use table-based responsive design with media queries as fallback

CSS That Actually Works

Not all CSS properties work across email clients. Here's what you can rely on:

Safe CSS Properties:

  • background-color (but not on body tag for Outlook)
  • border and border-collapse
  • color and font-family
  • font-size and font-weight
  • line-height and text-align
  • padding and margin (with caveats)

Avoid These:

  • flexbox and grid (Outlook will laugh at you)
  • position: absolute/relative
  • float (unreliable across clients)
  • CSS animations and transitions
  • Web fonts (stick to web-safe fonts)

The Outlook Problem

Outlook deserves its own section because it's the bane of every email developer's existence:

  • Use VML for background images in Outlook
  • Add mso-specific CSS for Outlook-only fixes
  • Test in multiple Outlook versions (2016, 2019, 365)
  • Use table-based buttons instead of CSS buttons

Mobile Responsiveness

Mobile-first isn't just a web dev concept—it's crucial for email:

  • Use fluid tables with percentage widths
  • Stack columns on mobile with media queries
  • Make touch targets at least 44px
  • Use 14px+ font sizes for mobile readability
  • Test on actual devices, not just desktop previews

Image Best Practices

Images are blocked by default in many clients, so plan accordingly:

  • Always include alt text that makes sense without the image
  • Use background colors behind images as fallbacks
  • Don't rely solely on images for important information
  • Optimize image sizes for faster loading
  • Host images externally and use absolute URLs

Testing Strategy

Testing is where most email campaigns fall apart. Here's my approach:

  • Test early and often during development
  • Use tools like Litmus or Email on Acid for comprehensive testing
  • Send test emails to real accounts (Gmail, Outlook, Apple Mail)
  • Check dark mode compatibility (increasingly important)
  • Validate HTML with email-specific validators

Code Structure Template

Here's a basic structure that works across most clients:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Your CSS here */
    </style>
</head>
<body style="margin: 0; padding: 0;">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center">
                <table cellpadding="0" cellspacing="0" width="600">
                    <!-- Your content here -->
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Final Tips

  • Keep it simple—complex layouts break more easily
  • Use inline CSS for critical styles (some clients strip head CSS)
  • Include a web version link for fallback
  • Consider accessibility—screen readers are used for email too
  • Document your workarounds—you'll forget why you did something

The Reality Check

Email coding isn't glamorous, and it's definitely not cutting-edge. But when your email renders perfectly across 40+ email clients while your competitor's looks broken in half of them, you'll appreciate the extra effort.

The key is accepting that email development lives in its own universe with its own rules. Once you embrace the constraints instead of fighting them, it becomes much more manageable.

Happy coding (and good luck with Outlook)!

Interested in working together?

I'd love to hear about your project. Drop me a message and let's discuss how I can help.