Email Design Best Practices: Emails That Look Great on Every Phone

Practical email design tips for small businesses: mobile-first layouts, fonts, images, buttons, accessibility and dark mode — no designer needed.

In short: Use a single-column layout, readable text of at least 16px, one clear button, a few images with alt text and a simple header and footer. Then test on a phone, in dark mode and with images turned off before you send.

You don't need a designer to send beautiful emails. You need a clean template and a few principles. Most of your subscribers will read on a phone, so design for small screens first.

1. One column, mobile first

Single-column layouts read naturally on phones and look clean on desktops. If you use two columns, make sure they stack on mobile.

2. Keep it scannable

Short paragraphs (two to three lines).
Clear headings.
Bullet points for lists.
Plenty of white space.

3. Readable text

Body text at least 14–16 pixels.
Dark text on a light background (or the reverse) — avoid grey-on-grey.
One or two fonts maximum.

4. One main button

Make the main call to action a real button, not a text link, and big enough to tap with a thumb (around 44 pixels tall). Use action words: "Book your table", "Shop the sale", "Read the guide".

5. Images that help, not hide

Use images to support your message, not as the message — some people have images turned off.
Never send an email that's one big image.
Add alt text describing each image.
Compress images so emails load fast on mobile data.

6. Design for dark mode

Many people read email in dark mode, which can invert colours. Test your template in dark mode, use logos with transparent backgrounds (or a light outline), and avoid text baked into images.

7. Make it accessible

Good colour contrast.
Meaningful link text (not "click here").
Alt text on images.
Logical heading order.

Accessible emails are easier for everyone to read.

8. A clear header and footer

Header: your logo or business name, so people recognise you instantly.
Footer: your business name and postal address, a one-click unsubscribe link, and optionally your social links and a "why you're getting this" line. The address and unsubscribe link are legal requirements (CAN-SPAM, CASL).

9. Preview before you send

Always check desktop and mobile previews, test every link, and send yourself a test.

10. Plain text has its place

For personal-feeling messages (a founder's note, a check-in), a simple text-style email can outperform a designed one. Mix both.

A simple email layout that works

Header: logo or business name (small — it shouldn't push the message down).
Headline: the main point in one line ("Our winter menu is here").
Image: one strong photo that supports the headline.
Two or three short paragraphs or a short list.
One button with an action word.
Secondary links (optional): two or three related items.
Footer: business name, postal address, unsubscribe link, social links.

Before-you-send checklist

☐ Looks good on a phone (preview in mobile view).
☐ All text is readable, with enough contrast.
☐ Every image has alt text.
☐ The button is big enough to tap and the link works.
☐ The email still makes sense with images turned off.
☐ Checked in dark mode.
☐ Address and unsubscribe link are in the footer.
☐ Sent a test to yourself.

Brand consistency without a designer

Pick two brand colours, one font for headings and one for body text, and a logo file with a transparent background. Save them in your email platform so every email starts on-brand.

Common design mistakes (and quick fixes)

Text too small on phones. Body text under 14px forces people to zoom. Use 16px for body text and at least 22px for headings.

Buttons that are hard to tap. A small text link squeezed between other links is frustrating on a touchscreen. Use a real button at least 44px tall with space around it.

Too many fonts and colours. Stick to one font (two at most) and your brand colours. Consistency looks professional; variety looks messy.

Important text inside images. If the offer, date or price only exists in an image, people with images off never see it. Put key information in real text.

No space to breathe. Crowded layouts are hard to scan. Add padding around sections and keep paragraphs short.

Light grey text on white. It looks elegant on a big monitor and is unreadable in sunlight on a phone. Keep enough contrast — dark grey or black on white is safest.

Wide images that don't scale. An image wider than the email breaks the layout on phones. Use images sized for the email's width and let them scale down.

Forgetting the preview text. If you leave it empty, inboxes show whatever text comes first — often "View in browser". Write it on purpose.

A quick test routine

Before every send, check the email on your own phone, switch your phone to dark mode and look again, then view it with images turned off. These three checks catch most design problems in under five minutes.

In Reepio

Reepio's drag-and-drop editor builds responsive, accessible emails without code, with free templates, saved brand colours and fonts, desktop and mobile previews side by side, and automatic footers with your address and unsubscribe link. Start free.

Frequently asked questions

What is the best width for an email?

Around 600 pixels is the long-standing standard for desktop email layouts, with single-column designs that scale down on phones.

Should I use plain-text or designed emails?

Both have a place. Designed emails suit promotions and newsletters; plain-text style emails feel personal and work well for notes from the owner or check-ins.

How do I make emails look good in dark mode?

Use transparent logos or logos with a light outline, avoid text inside images, test your template in dark mode, and don’t rely on background colours to carry meaning.