Email Design for Mobile: Readable on Any Phone

The newsletter looked lovely on your laptop. Then a customer showed you their phone: tiny text they had to pinch to read, three columns squashed into slivers, a big banner image that had not loaded, and a “Book now” button so small they tapped the wrong link twice.

Many of your subscribers will read your email on a phone, often standing up, often in a hurry. Good email design for mobile is less about looks than about making the email easy to read and act on with one thumb. This guide covers layout, text, buttons, what happens when images do not load, dark mode, whether plain text is a better choice, and how to test before you send.

Email design for mobile starts with how people read

People reading on a phone scroll quickly, scan for anything relevant and decide in seconds whether to stay. They may be on a slow connection or have images turned off. They will not zoom in, and they will not hunt for a tiny link.

So the design has three jobs:

• Make the main point obvious within the first screen.
• Keep every line readable without zooming.
• Make the next step easy to tap.

Design for the phone first, then check it still looks reasonable on a computer. The reverse order is where most problems come from.

One column, top to bottom

A single column is the safest layout for email. It reads the same on any screen, and nothing needs to rearrange itself.

• Put the most important thing first: the news, the offer, the date.
• Follow with a short explanation, then one clear button.
• Add secondary items below, each with its own short heading.
• Finish with your contact details, address and unsubscribe link.

Multi-column layouts can work if the template “stacks” columns on small screens, but not every mail app respects that. If you use a template with side-by-side product boxes, test it on a real phone before trusting it.

Keep the overall width modest. Most email templates are built to a narrow fixed width for exactly this reason. Do not paste in wide tables or images that force sideways scrolling.

Text you can read without zooming

• Size: use the template’s body text size or larger. If you have to squint at your own test email on your phone, it is too small.
• Short paragraphs: two to four lines on a phone screen. Long blocks look like a wall and get skipped.
• Headings: short and descriptive, so scanners can find the part that concerns them.
• Contrast: dark text on a light background, or the reverse. Grey on grey, or text over a photo, is hard to read in sunlight.
• Fonts: stick to common fonts or the template’s defaults. Custom fonts often fall back to something else in many mail apps anyway.
• Left-aligned body text: easier to read than centred paragraphs.

Buttons a thumb can hit

The button is where the email turns into a visit, a booking or a sale. On a phone, small text links are easy to miss and easy to mis-tap.

• Use a proper button for the main action, with enough padding around it to tap comfortably.
• Write what happens when tapped: “Book your service”, “See the new range”, “Reply to reserve a place”. Avoid “Click here”.
• Keep one main button per email, repeated at the end if the email is long.
• Leave space between links so a thumb does not hit two at once.
• Make the phone number a tappable link if you want calls.

Use buttons built from code and text, which most email editors create, rather than a picture of a button. A picture disappears when images are blocked.

Wherever the button leads should work just as well on a phone. A slow or awkward landing page wastes the tap; our free speed test tool gives a quick idea of how a page performs.

When images do not load

Some mail apps and some readers block images until the person allows them. Others load them slowly on a weak connection. Design so the email still makes sense without them.

• Never put the whole message in one image. An image-only email shows as a blank box, and filters cannot read it either, which can count against it.
• Add alt text to every meaningful image, describing it briefly: “New monsoon range of umbrellas”. Mail apps show it when the image is blocked.
• Put important words in real text, not inside the image: the date, the offer, the address.
• Keep image files small, so they load quickly on mobile data.
• Use real photos of your products, place or team where you can. They do more than stock images.

Test by turning off images in your own mail app and reading the email again.

Plain text vs HTML email

Not every email needs a designed template. A plain-text email, or one that looks like plain text with minimal formatting, can suit a small business very well.

Many platforms send a plain-text version alongside each HTML email automatically, for apps that prefer it. Check that version occasionally; automatic conversions can be messy, with long raw links and stray symbols.

A middle path works well for many small businesses: a simple template with your logo, one column of text, one button and perhaps one photo.

Dark mode

Many people use their phone in dark mode, and some mail apps then invert or adjust email colours. Results vary between apps, so you cannot fully control it, but you can avoid the worst problems.

• Use a logo with a transparent background and check it is still visible on dark grey. A black logo can vanish.
• Avoid text baked into images with a white background; it shows as a bright rectangle.
• Avoid relying on very light or very dark colours alone to carry meaning.

Testing on real phones

Preview tools in email platforms help, but real devices tell the truth. Before each campaign:

1. Send a test to your own phone and at least one other, ideally one Android and one iPhone.
2. Read it in the main mail apps your subscribers use, such as the Gmail app and Apple Mail.
3. Turn images off and read it again.
4. Switch on dark mode and look at the logo and any images.
5. Tap every link and button, including unsubscribe.
6. Check the subject line and preview text as they appear in the inbox list.

Writing the words at the top well matters too; our guide to subject lines and preview text covers that part. Layout is one task in a longer list set out in our email marketing for small business guide. And since the same customers see your posts and ads on the same phone, our overview of digital marketing services is worth a look for keeping the message consistent across them.

Frequently asked questions

Should I use the platform’s templates or have a custom design made?

For most small businesses, a platform template adjusted with your logo, colours and fonts is enough, because these templates are usually tested across many mail apps. A custom design makes sense when you send often and want a distinct look, but it must be built and tested for phones carefully.

Can I put a video in a marketing email?

Playing video inside email is unreliable across mail apps. The usual approach is a still image from the video with a play symbol, linked to the video on your website or a video platform. Add a text link as well, so people with images blocked can still find it.

Why does my email look different in Outlook?

Some versions of Outlook render email differently from phone and web mail apps, and can ignore parts of a template’s styling. Simple, single-column templates built by established platforms usually hold up. If many of your subscribers use Outlook at work, include it in your tests.

Do GIFs work well on phones?

Animated GIFs display in most mail apps, though some show only the first frame. Make sure that first frame makes sense on its own, keep the file small so it loads on mobile data, and avoid putting important information only in the later frames.

If you would like a simple email template set up that reads well on phones and fits your brand, our email marketing services include templates and testing on real devices.

Next in this series: Transactional vs Marketing Email: Keep Them Apart