Gmail now reads the style rules that let a newsletter rearrange itself on a phone. Templates built for phones will finally work there, so test yours in the Gmail app before the next send.

What Gmail used to do

For years, a newsletter built to rearrange itself on a phone did so in some mail apps and not at all in Gmail.

In the iPhone's own mail app, three columns stacked into one, the text grew and the buttons stretched across the screen.

In the Gmail app, the same email arrived as the desktop version shrunk to fit: small text, cramped columns and buttons too small for a thumb.

In the middle of this month Google announced that Gmail would start reading the styles responsible, on its website, in its iPhone and Android apps and in Google's Inbox app.

The change is reaching accounts gradually from the end of September, and addresses from other providers read in the Gmail app may wait longer.

What has actually changed

An email can carry its styling in two places: written onto each element, such as a heading or a button, or in a block of rules at the top of the message.

The rules that change a layout on a phone, called media queries, can only live in that block. In effect they say: on a screen narrower than this, stack the columns and enlarge the text.

Gmail kept the styling on the elements and threw the block away. Now it keeps the block, so Gmail readers will see the phone version of templates that have had one all along.

Which templates it affects

The second is the one to look at first. A phone layout your Gmail readers have never seen is also one nobody has had reason to check on them.

A phone layout nobody has looked at

Until now, the phone version of a template was seen mainly by people reading on iPhones. If the designer tested it at all, it was there.

Faults that sat unnoticed for years can now reach far more of your list: images that refuse to shrink and push the email wider than the screen, a sidebar stacked above the offer, buttons sized for a mouse.

If your sending service shows which mail programs opened your last campaign, and Gmail is near the top, this change is worth an hour before the next send.

Workarounds that may now misfire

Some designers gave up waiting and wrote around Gmail, fixing column widths directly onto elements so it could not squash them.

Those fixes still apply, but Gmail now also reads the phone rules. Where the two disagree, the result can be a column that refuses to stack or doubled space between sections.

That is not something to diagnose from the inbox. Whoever maintains your template should find anything written specifically for Gmail and test whether it is still needed.

A worked example

A bubble tea shop across the road from a community college sends a monthly email to customers who signed up at the counter for its loyalty offers. Most read it on their phones.

The template, designed three years ago, shows three new drinks side by side, a coupon code and a button. On the owner's iPhone it had always stacked neatly into one column.

Staff and customers using the Gmail app saw three tiny columns and a code too small to read at the till without zooming. The phone rules existed; Gmail had been removing them.

Tested in the Gmail app this week, the template stacked, but the coupon box had a width fixed inside it, an old Gmail fix, and ran off the right edge of the screen.

The designer removed the fixed width, made the button span the screen on phones and enlarged the code. The October email will go out only after a test on two phones and a laptop.

Testing in the Gmail app

Send a test to a real Gmail address and open it in the Gmail app on an Android phone and on an iPhone, and in each phone's built-in mail app as well.

Check that the sections stack in a sensible order, that the text reads without zooming and that every button can be tapped with a thumb.

Then open it in Gmail on a computer, to make sure the desktop layout survived the change.

If the app still shows the shrunken version, the change may not have reached that account yet. Test again next week before rebuilding anything.

What has not changed

Desktop Outlook on office computers still lays out email using Word, which ignores much of what a modern template does. A layout that now works in Gmail can still fall apart there.

And a layout that displays properly is not yet an email people act on. The subject line, the first lines and one clear thing to do still carry most of the weight.

When a rebuild is the answer

A template with no phone rules at all gains nothing from this change. Gmail readers will go on seeing a shrunken desktop layout, like everyone else on a phone.

It needs rebuilding as a responsive template, and the case is stronger this month, because one of the most widely used mail apps now displays the result properly.

Email code is fiddly, built from tables and styling written element by element, so the rebuild is worth having done by someone who tests in every major mail program.

The counter-case

Not every list needs attention this week. A short note in one column with a single link already reads well everywhere.

A list of trade customers who read at a desk in Outlook may barely touch the Gmail app, and your sending service's reports will show it.

For most lists, though, the advice stands: Gmail is now showing your phone layout, so look at it there before your customers do.

Before the October send

  1. Send a test to a real Gmail address.
  2. Open it in the Gmail app on two phones.
  3. Check the stacking order of every section.
  4. Tap each button with your thumb.
  5. Ask about old Gmail fixes in the template.
  6. Check desktop Outlook on an office computer.
  7. Retest next week if nothing has changed.

Step two matters most, because the Gmail app is where the change shows and where many of your readers will meet your phone layout for the first time.

Why contact forms that send in a customer's Gmail name are at risk is covered in website forms that send from the customer's Gmail address.

Frequently asked questions

What did Gmail change this month?

Gmail now reads the block of style rules at the top of an email, including the rules for narrow screens, instead of removing it. Newsletters built to rearrange on phones finally do so there.

Which parts of Gmail get the change?

Gmail's website, its iPhone and Android apps and the Inbox app, reaching accounts gradually from the end of September. Addresses from other providers read in the Gmail app may wait longer.

Will an old fixed-width template improve?

No. A template with no phone rules looks the same as before, shrunk to fit the screen. It needs rebuilding as a responsive template, which Gmail will now display properly.

Why might the change reveal problems?

Gmail readers have never seen the phone layout, so nobody noticed its faults: images wider than the screen, an odd stacking order, small buttons, or old Gmail workarounds clashing with the rules.

How should I test a newsletter now?

Send it to a real Gmail address, then open it in the Gmail app on two phones, one Android and one iPhone. Look at the section order, the text size and every button.

Does desktop Outlook still need checking?

Yes. Desktop Outlook on office computers still lays out email using Word, so the desktop version of any template still needs testing there before it goes out.

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.

Newsletter template older than your phone?

Send us a recent campaign. We will test it in the Gmail app and tell you what the change reveals.

Start a Conversation