Overview
Email clients aren't browsers. Gmail, Outlook, Apple Mail, Yahoo, and the dozens of mobile apps people read mail in all interpret your design slightly differently — sometimes very differently. The same template can look polished in one inbox and broken in another, simply because each client decides for itself how to handle widths, fonts, spacing, and images.
The good news is that most rendering issues are predictable. Once you understand the quirks, you can design around them from the start rather than chasing fixes after the fact. This guide walks you through the design principles and settings that make the biggest difference, so you build with consistency baked in.
Most of what we cover starts in the General Settings of your template — the foundation that everything else sits on top of.
Why it's worth the effort
Outlook alone accounts for a huge slice of corporate inboxes, and it's also the client most likely to break your design. Building with client compatibility in mind from the outset saves a lot of rework later — and protects how your brand shows up.
Start in General Settings
Before you drop in a single block, your template's General Settings set the rules for how everything renders. Spending a couple of minutes here pays off across every email you build in the template.
What to set, and why it matters
Here's a quick rundown of the settings that have the biggest impact on cross-client rendering, with our recommended approach for each.
Beyond the settings: design choices that travel well
Settings get you most of the way there, but a few design habits make an outsized difference in how your emails render.
- Lead with a single column. Multi-column layouts often collapse awkwardly on mobile. A single column scales gracefully and keeps your message readable on every screen size.
- Use real text, not images, for your message. Image-only emails fail when images are blocked by default (which is common in Outlook). Keep headlines and body copy as live text so they always come through.
- Always add alt text to images. When images don't load, alt text fills the gap so your message still makes sense. It also helps screen reader users follow along.
- Make buttons look like buttons. Use solid background colours and clear padding so your call-to-action stands out, even when images are off. Avoid image-only buttons.
- Mind the contrast. Aim for high contrast between text and background — it reads better on small screens, in bright sunlight, and for recipients with vision difficulties.
- Think about dark mode. Many clients now invert colours automatically when the recipient has dark mode on. Logos with dark text on transparent backgrounds can disappear — use a version with a light outline or a solid background to stay visible.
Watch out for
Custom fonts, hosted GIFs over 1MB, video embeds, JavaScript, and forms inside the email itself. None of these are reliably supported. If you need any of them, link out to a landing page instead.
Test before you send
No matter how carefully you build, the only way to know how your email actually renders is to send it to a few real inboxes. A quick test pass across the clients your audience uses most will catch issues before they reach your full send list.
- Send a test to yourself in at least three clients — typically Outlook (desktop), Gmail (web), and Apple Mail (mobile). That trio covers most of the rendering quirks you're likely to hit.
- Check on a mobile device. Don't just preview on desktop and assume mobile will be fine. Open the test on your phone and scroll through it end to end.
- Try it with images blocked. Most email clients let you toggle images off — do it, and confirm your message still reads cleanly. This is also a quick sanity check on alt text.
- If you have access to one, run it through a rendering tool like Litmus or Email on Acid for a broader view across dozens of clients in one go.
What's next
Once your foundations are set, you can build with confidence knowing your emails will render reliably for the vast majority of recipients. For more on configuring individual blocks, fonts, and personalisation, head to the Composition Studio guides — they pick up where this one leaves off.