When working with HTML code blocks in email builders, there are several best practices to ensure your emails look good across all major email clients (like Outlook, Gmail, Apple Mail, etc.). Email clients are notoriously inconsistent in how they render HTML and CSS, so following these best practices will help improve compatibility, deliverability, and design consistency.
Use Inline CSS
Most email clients strip out or ignore <style> tags.
Apply styles inline on each element using the style attribute.
<td style="font-size: 16px; color: #333333;">Hello World</td>Stick to Tables for Layout
Use <table>-based layouts instead of CSS flexbox or grid, which aren’t widely supported.
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center">Content</td></tr></table>
Avoid External Resources
- Don't rely on external CSS or JavaScript—they're blocked by many clients.
- All styles should be included inline.
- Avoid JS completely (email clients will block it).
Keep it Mobile-Responsive
Use fluid tables and media queries carefully (some mobile clients support them, like iOS Mail and Gmail).
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Use width, cellpadding, and cellspacing
- Set fixed widths on your containers (e.g., 600px is a common email width).
- Use cellpadding and cellspacing instead of CSS margin/padding where possible.
Use Fallback Fonts
Use web-safe fonts and define fallbacks.
font-family: Arial, sans-serif;
Alt Text for Images
Always include alt attributes in images for accessibility and clients that block images by default.
Test Your Emails
Always send test emails before sending/scheduling your email broadcasts
Avoid Fancy CSS
No position: absolute, CSS animations, custom fonts, or :hover interactions—they don’t work well (or at all) in many clients.
Don't Use < div > for Layout
<div>s don’t play nice in some older email clients. Use <table>, <tr>, <td> for layout instead.
Rely on built-in tools
- When using the HTML Block, users will be responsible for cross-client compatibility once the design is exported, whereas if they use the standard Text Block / other built-in tools this will be the default.
- The HTML Block is like an advanced fallback that's better used to add things the editor doesn't support with the built-in tools, e.g., a custom iframe, custom CSS, etc. It's not recommended to manually write the email/website content using it. If there's a built-in tool that could do the job, it's recommended to use that instead to guarantee support on different email clients.
Common Pitfalls to Avoid
- Relying on modern CSS frameworks like Bootstrap (not supported).
- Embedding videos (use a thumbnail + link instead).
- Using SVGs (not supported in Outlook desktop).
- Setting background images using CSS (use inline background attributes on <td> or <table>).
