Emails That Read Well in the Gmail App

Designed at a desk, opened on a phone

A newsletter is usually designed on a desktop screen and approved in the email service's preview, which looks like a desktop screen too.

Most people on the list will open it on a phone, many in the Gmail app. It comes with most Android phones, where it handles other addresses too, and plenty of iPhone owners install it.

The app makes its own decisions about how an email appears. It shrinks a wide one to fit, cuts the subject line short in the inbox, and may hide the bottom of a long message behind a link.

An email survives all of that if it is built for the phone first.

What the app does to a desktop email

• Wide layouts are shrunk to fit the screen, text and all.
• Subject lines are cut after the first few words in the inbox list.
• The first text in the email becomes the preview line.
• Long emails are clipped, with the rest behind a link.
• Newsletters usually land under Promotions where tabs are on.

The fourth is the one senders rarely see. When Gmail clips an email, everything below the cut, footer and unsubscribe link included, waits behind a View entire message link that few people tap.

Text you can read without zooming

An email built at desktop width and shrunk to fit a phone shrinks its text in proportion. Body text that was comfortable at a desk becomes small print.

A single column that narrows with the screen, with images that scale to fit, needs no shrinking, so its text arrives at the size it was set. Set body text at about sixteen pixels, and headings larger.

Keep the contrast strong. Pale grey text on white looks elegant on a bright monitor and fades on a phone outdoors.

And keep paragraphs short, since three lines at a desk become eight on a phone.

Buttons a thumb can hit

A link in the middle of a sentence is easy to click with a mouse and easy to miss with a thumb.

Make the main action a button at least forty-four pixels or so tall, wide enough to tap without aiming, with space around it.

Keep separate links apart. Two links on consecutive lines are a coin toss for a thumb, and a reader who lands on the wrong page rarely comes back to try again.

Write phone numbers in full, as plain digits, so the app recognises them and a tap starts the call.

Subject lines that survive the cut

In the inbox list, only the first few words of a subject line show on most phones. The rest is cut off.

Put the specific thing first: the offer, the date, the new item. Words true of every issue, such as the business name or an issue number, waste the space, and the sender name already says who it is from.

Read each subject line as if only its first five words existed, because on a phone that is close to the truth.

The preview line

Under the subject, the app shows the first text it finds in the email. In many templates that is "View this email in your browser", or the description of a logo.

That line is a second chance to say why the email is worth opening. Write it on purpose: one short sentence at the very top of the email, saying what is inside.

Most email services have a box for it, usually called preview text. Where yours does not, the opening line of the email does the job.

A worked example

A gift basket company working from a light-industrial unit sends an email before each holiday, listing its baskets and the order cut-offs for delivery.

Its Thanksgiving email last year used a three-column template: nine baskets, each with a photograph, a name, a price and an order button.

In the Gmail app the template shrank to fit, and the prices became too small to read.

The subject began with the company's name and the word newsletter, so the occasion never showed. The preview line asked whether the reader was having trouble viewing the email.

The email was also long enough to be clipped, and the order deadline sat in the footer, below the cut.

This year's version is one column, one basket per row. The subject starts with Thanksgiving baskets and the order date, the preview line names the delivery areas, and the deadline sits at the top.

Clipping and the missing footer

Gmail clips any message whose code runs past roughly a hundred kilobytes. Images do not count, since they load separately, but a heavy template's code does.

Drag-and-drop email editors produce a lot of hidden code, so an email with many sections passes the limit sooner than its length on screen suggests.

Below the cut sits the footer, with the address and unsubscribe link CASL requires, and often the tiny image that counts opens. A clipped email can undercount its own opens.

Fewer sections, lighter code and important details near the top keep the email whole.

Test in the app itself

The preview in an email service is not the Gmail app. Send a test to a Gmail address and open it on an Android phone and an iPhone.

Look at the inbox first: how much of the subject shows, and what the preview line says. Then read without zooming, tap every button, and scroll to the bottom to see whether anything was clipped.

The counter-case

Some lists still read mostly at a desk.

A business selling to offices, whose readers open email at work in Outlook, should test there as carefully as on phones, since its readers' habits may differ from the general pattern.

A short, plain letter with a single link already reads well in the Gmail app and needs little of this.

For everyone else: build for the phone first, then check it still looks right at a desk.

Before the next send

1. Move to one column that narrows with the screen.
2. Set body text around sixteen pixels.
3. Make buttons big enough for a thumb.
4. Start the subject with the specific thing.
5. Write the preview line on purpose.
6. Move deadlines to the top.
7. Test in the Gmail app on two phones.

Step six guards against clipping and impatience at once. A deadline at the top is read by everyone who opens the email; one in the footer is read by almost nobody.

Who should be receiving the email at all is covered in one customer list in three different places.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.