The email rendering nightmare
Email clients are not browsers. Outlook 2019 uses Microsoft Word's rendering engine. Gmail strips <style> blocks and rewrites class names. Yahoo ignores media queries. Samsung Mail has its own quirks. An email that looks perfect in Chrome will almost certainly break in at least one major client.
The traditional approach — sending test emails to a dozen real accounts — is slow and expensive. MailHog's HTML compatibility checker gives you per-client analysis instantly for every captured email.
What MailHog checks
For every HTML element and CSS property in your email, MailHog shows support across these clients:
The top 5 rendering traps
CSS Flexbox & Grid
Not supported in Outlook. Use table-based layouts instead.
Breaks in: Outlook, AOLWeb fonts
Only Apple Mail and Thunderbird support @font-face. Use web-safe font stacks.
Breaks in: Gmail, Outlook, YahooBackground images
Outlook needs VML fallbacks. Gmail strips background-image on some elements.
Breaks in: Outlook, GmailMedia queries
Gmail and Yahoo strip @media rules. Design mobile-first with fluid widths.
Breaks in: Gmail, YahooCSS animations
Stripped by virtually every email client. Use GIF for motion.
Breaks in: All except Apple MailRecommended workflow
- Design your email template using table-based layouts and inline CSS
- Send a test email to your MailHog inbox
- Open the HTML Check tab — review warnings per client
- Fix flagged issues and re-send until all clients show clean
- Check the Spam tab to verify deliverability before production