Does Gmail’s New Auto-Fit Message Feature Help or Hurt Your Email Layout?

Gmail has been busy over the past few weeks releasing updates that affect how subscribers interact with email on their desktop and mobile devices. Some features, such as the New Tabbed Inbox, are getting a lot of attention. Other features, such as the Auto-Fit Message feature— which is enabled by default in the new versions of the Gmail App for iPhone and Android—haven’t been getting very much buzz, but is worth discussing.

What does the Auto-Fit Message do to email?

Before the release, many Gmail App users were only shown the upper lefthand corner of an email message.


Now, with Auto-Fit Message enabled, Gmail is automatically resizing the message so that the email shrinks to fit the screen dimensions of the device. My Living Social email below is a great example of how this feature optimizes the users experience by eliminating the need to scroll left to right.


We applaud Gmail for working to optimize the email experience for users. However, unlike media queries which give the Email Marketer the flexibility to decide the layout, Auto-Fit Message has its own undocumented guidelines specified by Gmail—not the marketer.

Uh oh! My Email is Not Auto-Fitting properly!

However, not all emails play nice with the new Auto-Fit feature. We noticed multiple instances of content sections collapsing causing the email to not display as intended.

Here are a few examples of this happening:


The culprit appears to be how the Gmail App renders the <table> tags. Many of us use the width attribute in <table> or <td> tags to format our emails. After the upgrade, it appears that table width attributes (set as either a percentage or a fixed value) are now ignored*, causing the size of the table to be controlled by elements within the cells, or external elements such as images. With your dimensions ignored, the results could be less than desirable.

*This could indicate a shift to html5, as the width attribute within <table> tags is no longer supported.

WhatCounts client, Navy Federal Credit Union, found a quick fix!

While QA testing emails last week, the digital media team at Navy Federal Credit Union, a WhatCounts client since 2007, stumbled across this issue. The Gmail App Version 4.5 had just been released and their templates didn’t look the way they did just days earlier. The digital media team, with help from WhatCounts, began to strip out code and send email tests to identify the issue.

Code before the fix:


Once it was determined that the table width was the culprit, the Navy Federal team found that adding a transparent spacer image with a fixed width would force the table to keep its size and prevent the collapsing of the content. This enabled the Gmail App to properly Auto-Fit their emails, while still maintaining the design integrity in desktop and mobile email clients.

Code after the fix:



The team found that this helped fix the layout so that they could continue providing relevant information and offers to their members. However, as with all great coders, they are continuing to try new tactics to help optimize their templates to be flexible to future changes.

Keeping Email Marketers on their Toes!

Gmail’s updates put pressure on Email Marketers to not just know how email renders across various browsers, but also how they look on different devices, apps, and versions of Gmail. And since this is such a relatively new issue, it’s not yet clear if Gmail will provide any insight regarding potential fixes.

This week, take some time to find out how your email renders in the new Gmail App. And please share any updates, code fixes, etc. in the comments below.


Lauren Bell
Senior Services Account Manager, WhatCounts


Share on LinkedIn21Tweet about this on TwitterShare on Facebook2Share on Google+0

free ebook download

Click Here To Download
4 Responses to "Does Gmail’s New Auto-Fit Message Feature Help or Hurt Your Email Layout?"
  1. Rob says:

    This article is a bit outdated now. I ran multiple test and found that the spacer GIF will often get re-sized. However, if you add STYLE=

  2. Jay says:

    I am frustrated as a layperson just trying to read my gmail from the android app. I have not found any articles on what to do on my samsung galaxy grand prime device to make my gmail readable without having to scroll and turn my phone. I’m not asking as a coder or web developer, which all the articles I’ve found are written for, & I have spoken to several email senders who claim they have optimized their newsletters for mobile. But the issue remains a problem for me trying to just read my gmail.

  3. Jay says:

    You can just use min-width attribute, ran into this problem today for the first time and I’ve been building emails for several years.

    style=”min-width: 600px;”

Leave a Reply

Your email address will not be published. Required fields are marked *