Email Design Best Practices: Emails That Look Good Everywhere

An email can have a great message and still fail if it looks broken. Fonts that do not load, images that do not show, buttons too small to tap — every design flaw costs readers. Good email design is not about looking fancy. It is about making sure your message is easy to read on any device, in any inbox, even when images are switched off. The good news is that the rules are simple, and most of them come down to restraint: one column, one message, one clear action. This guide covers the practices that keep your emails looking professional wherever they are opened.

Design Mobile First, Because Most Readers Are on Phones

Most emails are now opened on a phone, so design for the small screen first and let the desktop version take care of itself. That means a single-column layout: no side-by-side blocks that squeeze into unreadable strips on a narrow screen. Use a readable font size — body text around 16 pixels is a safe minimum, and headlines clearly larger. Leave generous space between paragraphs and around buttons, because cramped emails feel hard to read even when the words are good. Keep your email width modest, around 600 pixels, which displays comfortably on desktop without forcing phone readers to scroll sideways. Before you send anything, preview it on an actual phone, not just in your design tool. A layout that looks polished on a wide monitor can fall apart on a small screen, and your readers will judge the email in two seconds.

One Message, One Visual Path

Every email should guide the reader’s eye along one path: headline, short explanation, action. Put the most important thing at the top, because many readers never scroll past the first screen. Use headings to break up the text, and keep paragraphs short — three or four lines each — so the email feels scannable rather than dense. If you include images, use them to support the message, not to carry it. A common failure is an email that is one giant image: when images are blocked, the reader sees nothing but a blank box. Always include real text for your headline, your offer, and your call to action, so the email still makes sense with images off. And limit yourself to one main action. Secondary links are fine in the footer, but a second big button in the middle competes with the first and splits the reader’s attention.

Buttons People Can Actually Tap

A button is the most important design element in a sales or action email, and it is often the worst designed. Make buttons large — at least 44 pixels tall — with enough padding that a thumb can tap them without hitting the wrong thing. Use a contrasting colour that stands out from the rest of the email, and put real button text on it: “Download the checklist” tells the reader what happens next, while “Click here” does not. Build buttons from text and background colour rather than from an image, so they still show when images are blocked. Repeat the main button once near the end of a longer email, so readers who scrolled do not have to hunt back to the top. Finally, test every button before sending: a beautiful button that links to the wrong page is worse than no button at all.

Images, Alt Text, and the Images-Off Problem

Images make emails attractive, but they also cause the most breakage. Many inboxes block images by default, and some readers have slow connections, so every image needs a job and a fallback. Keep images reasonably sized — large photos slow loading and get clipped on phones — and compress them before uploading. Always write alt text: a short description that appears when the image does not load, and that screen readers use for accessibility. Alt text like “Photo of the new planner open on a desk” is useful; alt text like “image1.jpg” is not. Never put essential information only inside an image — no prices, dates, or calls to action that exist nowhere else. If your email still makes sense with every image removed, your design is robust. If it becomes a blank page, redesign it. A good rule is that images should make up less than half of your email’s content by area.

Fonts, Colours, and Dark Mode

Email inboxes support a limited range of fonts, so stick to safe, widely available choices like Arial, Georgia, or Verdana rather than exotic web fonts that will be replaced anyway. If your brand font matters, use it in a logo image, not in body text. For colours, keep the palette small: one main colour, one accent, and neutral text colours. High contrast between text and background is essential — light grey text on a white background may look elegant on your monitor but is unreadable on a phone in sunlight. Also consider dark mode, which many readers now use. Inboxes invert colours in dark mode, which can turn a dark button invisible or make light text disappear. Test your email in dark mode before sending, avoid pure black backgrounds, and use transparent images where possible so logos do not sit inside an ugly white box when colours invert.

The Footer Is Part of the Design

The footer is the least glamorous part of an email, and one of the most important. It must include a working unsubscribe link, your business name, and a postal address — these are legal requirements in many countries, covered in our guide to GDPR and CAN-SPAM compliance. Beyond the legal basics, a good footer builds trust: a link to your preferences page lets readers reduce frequency instead of unsubscribing entirely, and a short line explaining why they received the email reminds them they signed up. Keep the footer visually quiet — smaller text, neutral colours — so it does not compete with your message, but never hide it. An unsubscribe link that is hard to find does not keep subscribers; it turns them into spam complaints, which damage your deliverability far more than an unsubscribe ever would.

Test Before You Send, Every Time

No design survives contact with every inbox unchanged. Gmail, Outlook, Apple Mail, and Yahoo all render emails slightly differently, and Outlook in particular has a long history of breaking layouts that look fine elsewhere. Before every send, preview your email in at least two or three major inboxes, and on both a phone and a desktop. Check that images load, buttons work, links point to the right pages, and nothing overlaps or overflows. Send a test email to yourself and open it on your phone — the device your readers most likely use. This five-minute habit catches most design failures before your audience ever sees them. If you write your emails with strong copy, our guide to email copywriting that sells pairs with this one: good words in a broken layout still lose, and a beautiful layout with weak words does not sell either.

Frequently Asked Questions

Should I use a template or design from scratch?

Use a template. A well-built template handles the tricky parts — mobile layout, inbox compatibility, dark mode — and lets you focus on the message. Customise the colours, fonts, and header to match your brand, but do not rebuild the structure unless you know email code well.

How many images should an email have?

Fewer than you think. One strong image near the top, plus your logo, is enough for most emails. Product emails may need more, but every extra image adds loading time and breakage risk. When in doubt, cut one.

Conclusion

Good email design is restraint applied consistently: a single column, readable text, one clear action, images with fallbacks, and a footer that builds trust. Test every email on a phone and in a couple of inboxes before sending. Do that, and your emails will look as professional as they read — wherever your subscribers open them.