What Can and Can’t Be Sent in an Email #
When designing emails in our platform, you’re working within the limitations of how email clients interpret code, not how a browser would. Even though our email editor (powered by Unlayer) simplifies things with drag-and-drop design, what gets sent is still HTML and CSS behind the scenes, and that comes with restrictions.
This guide explains what to expect when designing emails, what features may not behave consistently, and how to avoid common rendering issues.
Why Email Is Different from Web Design #
Web pages are rendered by modern browsers with full CSS and JavaScript support. Emails, on the other hand, are rendered by inbox apps like Outlook, Gmail, or Apple Mail, each with their own quirks and limitations. These clients block or ignore many modern web features.
Even though our editor prevents you from adding unsupported content like scripts or external stylesheets, there are still things that can go wrong depending on the inbox.
What You Can and Canʼt Do in the Editor #
| Feature | Supported in Editor | Email Client Support | Notes |
| ✅ Responsive layouts | Yes | Varies | Most clients support mobile-friendly layouts, but Outlook can struggle |
| ⚠ Custom fonts | Limited | Rare | Most clients fall back to system fonts. Stick with web-safe fonts where possible |
| ❌ Videos | With block | No | Video blocks appear as a fallback image with a play button, real video playback is not supported in most inboxes |
| ⚠ Background images | Yes | Inconsistent | Gmail and Outlook have patchy |
| support, use with a fallback background color | |||
| ⚠ Dark mode | No preview | Varies | Some clients force color inversion. Emails may look different depending on the userʼs settings |
| ❌ Interactivity (hover, animation) | No | No | Email clients block scripts and donʼt support advanced interactivity |
Design Tips for Consistent Results #
Keep layouts simple. Use the built-in layout blocks, these are tested across common email clients.
Avoid complex nesting. Try not to embed too many columns within columns.
Test your email. Always preview your email using the editor’s preview and send test emails to yourself before launching a campaign.
Stick to web-safe fonts. Fonts like Arial, Helvetica, Georgia, and Tahoma are supported almost everywhere.
Use background colors, not just images. Background images may be hidden or ignored, make sure text is still readable.
Minimise image-only content. Emails with only images and no text often land in spam. Add real text where possible.
Dark mode testing. The editor doesnʼt currently offer dark mode preview. Test your email manually in Apple Mail or Gmail to ensure it still looks okay.
A Note on Dark Mode #
Many modern inboxes now offer dark mode, which can automatically invert text and background colors in your email, even if your design was made with a light background in mind. While our editor doesn’t have a built-in dark mode preview yet, hereʼs what to keep in mind:
Avoid using black or very dark text on light backgrounds. Some clients will invert colors automatically, making dark text unreadable on a dark background.
Transparent images or logos may disappear in dark mode. Try to use images with solid backgrounds when possible. Some clients will override design choices there’s not much that can be done about this.
Summary #
| Do | Donʼt |
| ✅ Use layout blocks and test before sending | ❌ Add videos expecting them to play in inboxes |
| ✅ Stick to safe fonts and real text | ❌ Design with interactivity or hover effects |
| ✅ Keep a fallback background color | ❌ Rely solely on background images |
| ✅ Check for readability in dark mode | ❌ Assume it will render the same everywhere |
By understanding these limitations, you’ll be able to create professional-looking emails that render well across devices and inboxes. If in doubt, keep it simple, test thoroughly, and use our pre-tested layout blocks.
