Email design guide — layout, images, colour, mobile rendering and a pre-send checklist

Key takeaways

• Email is not the web: mail apps differ widely in the HTML and CSS they support, so simpler layouts are more reliable, and a single column is the safest.
• Never send the whole email as one big image; put key information in text, give images alt text, and load them by link rather than as attachments.
• Build the palette on your brand colours with enough contrast; W3C’s accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text.
• Some mail apps’ dark modes change your colours automatically, so test logos and images on a dark background.
• Before sending, check sender, subject, links, images, unsubscribe and mobile rendering, and send tests to several mailboxes.

However good the content, a newsletter loses much of its effect if the layout breaks on a phone, images fail to load or the button cannot be tapped. This guide covers the essentials of email design: layout, images, colour and dark mode, how rendering varies across phones and mail apps, and a pre-send checklist.

First: email is not the web

Web pages are rendered by browsers that support standards fairly consistently. Email is rendered by mail apps — Gmail, Outlook, Apple Mail and others — that each decide which HTML and CSS they support, and strip some code for security. The same message can look very different across apps and devices.

So the first rule of email design is reliability over flourish:

• A single column is the most reliable layout. Multi-column designs tend to squash on narrow screens.
• Build from blocks: header (logo), hero image, body copy, call-to-action button, footer (contact details and unsubscribe), keeping each block’s image and text together.
• A width of about 600 pixels is common, and easy to handle on desktop and mobile; it is a convention, not a rule.
• Leave white space. Room between blocks reads better than a packed layout.

The drag-and-drop editors and ready-made templates in email marketing platforms usually handle most compatibility issues for you, which is far safer than hand-coding HTML from scratch.

Using images

Never make the whole email one big image. It is the most common mistake, for three reasons:

1. many mail apps block images by default, so recipients see a blank message;
2. filters cannot read text inside images, and image-only messages with little text are more likely to be treated as spam — see How to keep your email and newsletters out of the spam folder — a complete guide for business senders;
3. text inside an image cannot be copied or searched, and screen readers cannot read it.

Using images well:

• Put key information in text: offer details, dates, addresses and prices should never exist only in an image.
• Give every image alt text, so readers still know what belongs there if it does not load.
• Load images by link, not as attachments; attachments bloat the message and are a common tactic in malicious mail.
• Compress images. Oversized files load slowly; for high-resolution screens, use images at roughly twice the display size and scale them down so they stay sharp.
• Put the hero image at the top, so readers see the main point first.
• Use real HTML buttons, not images of buttons — if images are blocked, an image button disappears.

Colour

Build on your brand colours and stay consistent. Using the same palette and template in every issue helps readers recognise you. Save your logo, main colours and button style as a template to reuse.

Keep enough contrast between text and background. Light grey on white is hard to read on a phone, let alone outdoors. W3C’s Web Content Accessibility Guidelines recommend a contrast ratio of at least 4.5:1 between normal text and its background (W3C: Understanding Contrast (Minimum)) — a sensible reference for email too.

Do not rely on colour alone to carry meaning. Marking “sold out” only in red may be invisible to colour-blind readers; add the words as well.

Mind dark mode. Many people read with dark mode on, and some mail apps automatically darken backgrounds and lighten text, changing your colours. Common problems include a dark logo vanishing on a dark background and white-background images turning into glaring white boxes. To avoid them:

• prepare a transparent-background version of your logo and test it on dark backgrounds;
• do not depend on background colour to convey information;
• check the message on a phone with dark mode on before sending.

Rendering on phones and across mail apps

Many recipients read email on a phone, so design for mobile first:

• Keep text large enough to read without zooming;
• Make buttons big and easy to tap, with space around them to avoid mis-taps;
• Put important content near the top, since not everyone scrolls to the end;
• Responsive design (layouts that adapt to narrow screens) improves mobile reading, but not every mail app fully supports it, so a single-column layout remains the safest base;
• Include a web-version link, so readers can open the message in a browser if it renders badly.

The only way to know how a message will look in recipients’ mail apps is to test it. At minimum, check Gmail (web and mobile app), Outlook and Apple Mail.

Pre-send checklist

Before pressing send, check each item:

Sender and subject

• Sender name and address represent your brand — not noreply@
• Subject line is clear and typo-free; preview text is set and does not repeat the subject (see How to write email subject lines that get opened — preview text, personalisation and A/B testing)
• Personalisation fields (such as first name) have fallback text

Content

• The point is made in the first two lines; there is one main action (see How to write email marketing copy — ABC and AIDA frameworks, value-first content and calls to action)
• Dates, prices, offer terms and addresses are correct
• A colleague has proofread it

Links and images

• Every link has been clicked and goes to the right page; tracking parameters are correct
• Every image has alt text; the message still makes sense with images off
• Images are compressed and not attached

Compliance

• Company name and contact details are included
• A reason for receiving the message and a working unsubscribe link are included
• The list contains only people who agreed to receive it, with unsubscribes and bounced addresses removed

Testing

• Tests sent to Gmail, Outlook and Apple Mail accounts land in the inbox, not spam
• Layout, buttons and dark mode checked on a phone
• The web-version link works

FAQ

How much should be images and how much text?
There is no fixed ratio. The test is whether readers can still understand the point and the action from the text with images off; images should support and attract, not replace the words.

Can I use animated GIFs?
Yes, but keep the file size down and make sure the first frame carries the message — some mail apps show only the first frame.

Which fonts should I use?
Most mail apps can only display fonts installed on the reader’s device, so custom web fonts may not appear. Use system fonts and set fallbacks.

Do I need to write HTML myself?
Not necessarily. Drag-and-drop editors and templates in email platforms handle most compatibility issues; if you do customise, test in several mail apps.

---

UFOSEND’s EDM email marketing service includes a drag-and-drop editor with ready-made templates, and keeps your mail in the inbox with SPF/DKIM/DMARC alignment, dedicated IP warm-up and Postmaster monitoring.