HTML email best practices: build emails that work everywhere
Email apps use older, more limited rendering than web browsers, and they all behave a little differently. These rules keep your emails looking right.
Use tables for layout
Modern web layout tools such as flexbox and grid are not reliable in email. Tables are still the safest way to build layout that holds up in Outlook, Gmail and Apple Mail. Keep the structure simple.
Put styles inline
Some email apps remove or ignore style blocks in the head of an email. Writing the styles directly on each element is the most dependable approach. Our builders do this for you.
Keep the width around 600px
A 600px wide email fits most desktop previews, and it shrinks well on phones. Use a single column for most of your content and stack extra columns on small screens.
Handle images carefully
- Host images online and use full https addresses. Images stored on your computer cannot be shown to recipients.
- Always add alt text, because many people have images off by default.
- Set a width on every image and keep file sizes small.
- Do not put important text only inside an image.
Use bulletproof buttons
Buttons made from images disappear when images are off. Build buttons from text with a background color, and use Outlook-specific code so they still look right in Outlook. The builders include this.
Design for mobile and dark mode
- Use readable font sizes. 14px to 16px for body text works well on phones.
- Make buttons easy to tap.
- Some apps invert or dim colors in dark mode. Avoid relying on pure white or pure black backgrounds, and test in dark mode.
Watch the size
Gmail clips messages over about 102 KB of HTML and hides the rest behind a "View entire message" link. Keep your HTML lean.
Test before you send
Send yourself a test and open it on desktop and phone, in the apps your audience uses. Support differs by feature, and the caniemail.com site lists which email clients support which HTML and CSS features.