Design that reads on a phone: plain text or templates

You will be able to decide between plain text and a designed template, and check that your email works on a small screen.

Open the last marketing email you sent on your phone, in the email app you use every day. Scroll through it once and note anything you have to pinch, squint at or tap twice. Most people read email on a phone. Some have images turned off, and some use dark mode. An email that looked fine on the designer's laptop can still fail on the phone where it is actually read.

The failures are usually the same few. A grey box with a small icon appears where an image should be. The text is too small to read without pinching. A layout of three columns gets squeezed into a narrow strip. Buttons sit so close together that the reader taps the wrong one. A reader who has a bad experience like this may close the email and not open the next one.

Choosing between plain text and a template

There are two broad styles of marketing email. A plain text email looks like a message from a person. It has little or no formatting, perhaps a link or a simple button, and maybe a logo. Most email tools actually send these as lightly formatted emails and not true plain text, but they look plain to the reader. Plain emails feel personal, load fast and display much the same everywhere.

A designed template has a header, colours, images, buttons and sometimes several sections. Templates suit businesses whose product is visual or who need to show several items, such as a shop showing new arrivals.

Neither style is better in general. You choose by what the email needs to show. If the email is mostly your words, keep it plain. If people need to see the product, use a template and keep it simple. Priya sends a fortnightly maths tip newsletter built around one idea from one person, so plain is usually the better choice for her. Mei Ling sends a monthly email with a photo of a new design, and that works well in a simple template.

Building for one column and a thumb

Phone screens are narrow, so design for one column. Content stacked from top to bottom reads naturally as the reader scrolls. Side-by-side columns either shrink until they cannot be read or rearrange themselves in ways you did not plan. Most modern templates in email tools stack automatically on phones, but older templates may not, so check yours.

Text should be readable without zooming. Your email tool's default body text size is usually a sensible starting point. If you have to squint at the preview, your readers will too.

Buttons should be big enough for a thumb and have space around them, so readers do not hit a nearby link by mistake. Put the main button where people can reach it without hunting. In a long email you can repeat the same link near the top and near the bottom, as lesson 5.3 allowed.

Making sense when images do not load

Many email apps block images until the reader chooses to show them, and some readers keep images off to save data or protect their privacy. Your email has to make sense with no images at all. Two habits take care of this.

The first habit is to never put important words only inside an image. If your banner says "Two Saturdays left in December", put that sentence in the text of the email as well.

The second habit is to give every image alt text. Alt text is a short description of an image. Screen readers read it aloud for people who cannot see the picture. Whether an email app shows the alt text when images are blocked depends on the app, so do not count on it appearing. Email tools have an alt text field on every image. Good alt text describes the image, for example "Corgi-shaped birthday cake with a red bow". A blank alt field, or a file name like "image1.jpg", tells the reader nothing.

Most email apps let you turn images off in settings. Do this at least once, view your email, and confirm that the message, the offer and the button all still work.

Checking and fixing dark mode

Many people set their phones to dark mode. This setting makes email apps change your email's colours, sometimes in ways you would not choose. Dark text on a transparent background can disappear against a dark screen. A logo with a white box behind it can show up as a bright rectangle. Light grey text can become hard to read.

Plain emails usually survive dark mode best because there is little to go wrong. If you use a template, preview it in dark mode on a real phone, look for text that disappears or images with ugly boxes, and adjust. Most dark mode problems go away if you save your logo with a transparent background and use text colours with good contrast.

Testing on your own phone before every send

Your email tool's preview is a useful first look, but it only approximates the real result, and real email apps vary. Before every send, run this check:

Send a test email to your own phone. Open it in the email app you use every day. Scroll through the whole email. Tap every link and button. Switch to dark mode and look again. If you can, open it in a second email app too.

Priya runs this check on her phone during her lunch break before every send. In the first month it caught a button too small to tap and a link to the wrong worksheet, and each fix took a minute.

In the activity below you will run that check on your own newsletter: send a test to your phone, look at it in light and dark mode, and write down anything that breaks or reads badly.

Send a test of your newsletter to your own phone. Look at it in light mode and dark mode, and write down anything that breaks or is hard to read.

Course

Junxiong-WFG Organisation is an authorised representative of AIA Financial Advisers Private Limited (Reg. No. 201715016G).