Emails that work on a phone

Many of your members will read your emails on a phone, often in a spare minute: waiting in line, on a train, between meetings. They are reading on a small screen, with one thumb, perhaps in bright sunlight or with the phone set to dark mode. An email designed on a large monitor can fall apart in those conditions. Text shrinks, buttons become fiddly, the important part sits three scrolls down and the link opens a page that is awkward to use.

When that happens, members do not usually come back later on a computer. They close the email and move on. For a membership site, where email is how you bring people back to the content they pay for, an email that fails on a phone is a missed visit every time you send it.

What a phone does to your email

It helps to know exactly what changes on a small screen:

• The subject line is cut short. Only the first few words may show, so the important ones need to come first.
• The first screen is small. A large logo or header image can fill it entirely, pushing your message out of view.
• Multi-column layouts squash or stack in ways you may not expect.
• Fingers are less precise than a mouse. Small links placed close together lead to wrong taps.
• Images may load slowly or not at all, and dark mode may change your colors.

None of this requires a designer to fix. It requires designing for the phone first and checking that the result still looks fine on a computer, rather than the other way round.

Win the first screen

Whatever appears before the member scrolls should tell them what the email is about and what to do. That means a small logo at most, no tall header image and your main point in the opening lines. If the email has a button, it should appear on that first screen for short emails.

Your preview line and subject work together with this first screen; if you have not set preview text, the inbox will show whatever comes first in your email, which is one more reason to start with something useful. Preview text covers that line in detail.

Layout rules for small screens

1. Use one column. A single column reads well on every screen and never stacks badly.
2. Make text big enough to read without zooming. Many designers use body text of at least 16 pixels in email, with generous space between lines.
3. Keep paragraphs short. Three or four lines on a computer becomes a tall block on a phone.
4. Make buttons thumb-sized. A button should be wide enough and tall enough to hit easily, with its text inside it, not beside it.
5. Give links room. Avoid several text links in one sentence or side by side, where a thumb will hit the wrong one.
6. Put important details in text, not images. Dates, times and prices inside a picture vanish when images do not load.

If you use a saved design for your emails, fix these once in the template and every send benefits; a reusable set of email templates explains how to build one.

Images and dark mode

Images are welcome in many emails, but on a phone they should earn their space. Use one strong image rather than several small ones, keep file sizes modest so they load quickly on a mobile connection and always add alt text, the short description that appears when the image does not load.

Dark mode can invert or darken your colors. Logos with transparent backgrounds sometimes disappear against a dark background, and dark text placed on an image can become unreadable. Send yourself a test with dark mode switched on and look for anything that vanishes.

Worked example: a river report, before and after

Imagine a hypothetical fly-fishing club run by Callum, which sends members a weekly river report. His original email opened with a wide banner photo of a river, then a two-column table of water levels, then a paragraph of news, with a small “read the full report” link at the bottom.

On a phone, the banner filled the first screen, the table shrank to tiny text and the link was easy to miss. His revised version reads like this:

Subject: River report: the upper stretch is fishing well

Hi Anneliese,

Short version: levels have dropped on the upper stretch and the fish are rising in the evenings. The lower river is still muddy after the rain.

[See the full river report]

Upper stretch: good, clear water, best in the last two hours of light.

Middle stretch: fair, slightly high.

Lower stretch: poor for now, check back in a few days.

Callum

The key message sits in the first two lines, the button comes before the detail and the table has become three short lines that read well at any width. The banner photo moved to the report page itself, where members who want it can enjoy it.

Check where the tap lands

A mobile-friendly email is only half the job. The page it opens must work on a phone too. Before sending, tap every link on your own phone and ask:

• Does it open the exact page promised, not the home page?
• If I am logged out, can I log in easily on a phone and still reach that page?
• Is the page readable without zooming?
• If the link is a download, is it a file a phone can open comfortably?

Logging in on a phone is a common stumbling point. If members regularly give up at that stage, fixing the login experience may do more for your email results than any change to the email itself.

Your phone-first routine

1. Send every email to your own phone before it goes to members.
2. Check the inbox view: sender name, subject and preview.
3. Check the first screen: is the main point and button visible?
4. Scroll the whole email with one thumb and tap every link.
5. Switch on dark mode and look again.
6. Turn images off, if your email app allows it, and make sure nothing important disappears.
7. Fix any problem in your template, not just in this one email.