Email DesignBuilt for the inbox, not the deck

Email is not a web page#

Designers who come to email from the web are often surprised by its constraints. Email clients render HTML inconsistently. Some strip styles, some block images by default, some impose their own dark mode, and some older desktop clients use rendering engines that ignore modern layout techniques. A design that looks perfect in a presentation can fall apart in a real inbox.

The right response is not to fight the constraints but to design for them. The best email design is resilient: it degrades gracefully, stays readable when images are off, and still makes the next action obvious on a small screen held in one hand.

The anatomy of a well-built email#

The footer is not decoration. Anti-spam rules in many markets require a clear unsubscribe mechanism and identifying information about the sender, and mailbox providers increasingly expect one-click unsubscribe for bulk mail. Check the current requirements for your markets and providers.

Mobile first, always#

Design for the phone and let the desktop version take care of itself. A single column, generous text size, clear spacing and buttons large enough for a thumb all follow from that choice. Multi-column layouts that look elegant on a monitor usually collapse into awkward stacks on a phone.

• Use a single-column layout for most messages.
• Keep body text large enough to read without zooming, with comfortable line spacing.
• Make buttons tall and wide enough to tap easily, with space around them.
• Keep important content high; few people scroll far on a phone.
• Test on real devices as well as previews.

Live text, not pictures of text#

The single most common design failure is the all-image email: a beautiful graphic exported as one picture, with the headline, offer and button baked in. It looks right in the design tool. In the inbox it may appear as a blank box when images are blocked, it cannot be read by screen readers, it scales poorly and it gives mailbox filters little text to assess.

Put headlines, body copy and buttons in live HTML text. Use images to support the message, not to carry it. Give every meaningful image descriptive alt text, so a reader with images off or using a screen reader still understands the email.

Dark mode and colour#

Many readers use dark mode, and email clients handle it differently. Some leave your design alone, some invert light backgrounds, and some invert selectively. Logos with dark text on transparent backgrounds can vanish; carefully chosen brand colours can shift.

Design defensively. Use logo files that work on both light and dark backgrounds, or add a subtle outline or background tile. Avoid conveying meaning through colour alone. Test your key templates in the main clients' dark modes before you roll them out.

Accessibility is good design, not an add-on#

Accessible email reaches more people and usually performs better for everyone, because the same choices that help a reader with low vision help a reader on a small screen in bright sunlight. Our broader guide to web accessibility covers the principles.

Hierarchy: guide the eye to one action#

Every email has a job, and the design should make that job obvious within a glance. Readers scan rather than read, usually in a top-to-bottom sweep that slows only for headlines, images and buttons. Use that pattern. One dominant headline, one supporting image, a short block of copy and one clearly contrasting button should tell the whole story before anyone reads a full sentence.

Hierarchy breaks down when everything competes. Several buttons in the same colour, three banners of equal size and a navigation bar copied from the website all ask for attention at once. The fix is ruthless ranking: decide what matters most, make it biggest and highest, and let everything else step back. Secondary links can be plain text; tertiary content can move to the footer or to another email.

White space is part of hierarchy, not wasted room. Generous spacing around the headline and the button makes both easier to find on a phone and easier to tap. Crowded emails feel urgent in the worst way, and they are harder to use.

Templates and design systems#

Teams that design every email from scratch spend most of their time on layout and very little on the message. A small set of tested, modular templates, built from reusable blocks such as hero, product grid, text section and footer, frees time for the content that matters.

Treat this as a mini design system: document each block, its rules and its tested behaviour in the main clients. When a block is improved, every email that uses it benefits. When the brand evolves, you update the blocks, not hundreds of emails.

Design supports the words, not the other way round. Pair this guide with email copywriting, and remember that a strong design cannot help a message that never reaches the inbox; see email deliverability.

Design the email for the worst inbox it will land in, and the best inboxes will look after themselves.

Published by Fabulous.Media, a network of specialist marketing agencies. Updated 9 October 2026. Platform features change often; check current official documentation before acting on platform-specific detail.