Email rendering best practices
Write HTML emails that display consistently across Gmail, Outlook, Apple Mail, and mobile clients
Table of Contents
Email clients render HTML differently. An email that looks correct in Gmail may break in Outlook or display poorly on a phone. These practices help you avoid the most common rendering issues.
Use inline CSS
Many email clients strip <style> tags from the email head. Apply CSS directly on each HTML element with the style attribute so your styling survives regardless of the client.
Use tables for layout
Modern web design uses <div> elements, but HTML emails are more reliable with <table> elements for layout. Outlook in particular ignores many CSS layout properties but handles table-based layouts consistently.
Avoid background images
Background images don't display in all email clients. Use solid background colors instead. If you need a graphic, add it as an inline <img> element rather than a CSS background.
Design for mobile first
Build your emails to be responsive — use fluid widths and stack columns on narrow screens. A mobile-first approach ensures readability on smaller devices, then scales up for desktop. Most email opens happen on mobile.
Test across clients before sending
Send test emails and check rendering in multiple clients before publishing your Workflow. For quick checks, use the built-in test email feature and send to accounts on different providers.
For more thorough testing, tools like Litmus and Email on Acid let you preview how your email renders across dozens of clients simultaneously.