This guide outlines coding and design standards for custom HTML emails in Omnisend. Use these best practices to ensure your emails render correctly across Gmail, Outlook, Apple Mail, and mobile devices.
💡 Important resources:
To add custom HTML to your emails: See Add & Configure Custom HTML Item.
To import a full HTML template: See Import Custom HTML Email Templates.
If you're new to HTML, review W3Schools HTML basics first.
Email HTML Coding Standards
Email clients (especially Outlook 2007–2010) use limited rendering engines. Follow these rules to ensure compatibility.
Layout & Tables
Use
<table>for all layouts. Nest tables to create complex structures.Set dimensions with element attributes (
cellpadding,align,width) instead of CSS. This forces a box-model structure.Avoid
<div>,<span>, and CSS positioning (float,position,clear). Email clients strip or ignore these.
CSS & Styling
Use inline CSS only. Omnisend templates include inline CSS automatically.
Keep CSS simple:
Avoid shorthand (
#000→ use#000000)Avoid compound declarations (
font:#000 12px Arial→ split into separate properties)Avoid complex selectors (descendant, child, pseudo-elements)
Images, Buttons & Links
Add alt text to all images. Most email clients block images by default. Alt text helps communicate your message even when images don't load.
Use bulletproof buttons (coded with HTML/CSS) instead of image buttons. Email clients may block images, making image-based buttons invisible.
Host images on a reliable server with absolute URLs (
https://yourserver.com/image.jpg). Avoid relative paths.
Mobile & Interactivity
Make emails mobile-friendly. Use media queries to increase text size on small screens and ensure tap targets are at least 46x46px.
Avoid Flash and JavaScript. Use animated GIFs if you need motion.
Testing
Always test before sending:
Use Omnisend's Preview feature to check desktop and mobile views.
Send test emails to yourself across Gmail, Outlook, and Apple Mail.
Consider email testing services like Litmus for cross-client validation.
Note: Email HTML differs from web HTML; many modern CSS properties aren't supported in email clients like Outlook.
Email Design Best Practices
Follow these design guidelines to improve deliverability and user experience.
Layout & Width
Maximum width: 600–800px (600px recommended). This ensures emails display correctly in preview panes.
Use simple, grid-based layouts. Avoid complex elements that require floats or absolute positioning.
Images & Text
Assume images will be blocked. Design emails that communicate your message even if images don't load.
Avoid image-only emails. A low text-to-image ratio triggers spam filters. Sliced-up images also render inconsistently across email clients.
Fonts
Use email-safe fonts (Arial, Helvetica, Georgia, Times New Roman) or widely adopted custom fonts. See the email-safe fonts guide.
Mobile Design
Check readability on small screens. Can users read your email at arm's length on a phone?
Optimize image sizes to avoid slow load times.
Make links thumb-friendly. Ensure buttons and links are easy to tap.
💡 Tip: Over 50% of emails are opened on mobile. Before sending, preview your email on mobile and send a test campaign to yourself on your phone. Check text size, tap target size (buttons/links), and image loading times.
FAQ
Why does my email look broken in Outlook but fine in Gmail?
Outlook uses the Microsoft Word rendering engine, which has very limited HTML/CSS support compared to Gmail's browser-based engine. To ensure compatibility:
Keep email width at 600px (max 650px).
Use simple table-based layouts (single column).
Avoid background images, border-radius, box-shadow, and flexbox.
Use inline CSS only (no
<style>blocks).Always test in real Outlook inboxes before sending.
Can I control how my email looks in dark mode?
No. Dark mode is controlled by your subscribers' email client and device settings (Gmail, Apple Mail, Outlook, etc.), not by the sender. Email clients decide how to apply color inversion. Learn how to preview and optimize emails for dark mode.
💡 Best practices:
Use Omnisend's Dark Mode Preview before sending (Preview → toggle "Preview in dark mode").
Design for both light and dark themes – test in Full and Partial inversion modes.
Optimize logos and images: Add colored backgrounds or light outlines to prevent disappearing elements.
Keep text simple: Black text on white backgrounds inverts cleanly.
To receive further assistance, please get in touch with our award-winning Support Team via the in-app chat or by emailing [email protected].