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.

before-auto-fit-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.

after-auto-fit-message

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:

auto-fit-message-display

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:

code-before-auto-fit

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:

code-after-auto-fit

 

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
@laurenamberbell

Download our latest eBook

Your email list is your most valuable asset. Learn 57 tips for building it today!

Download
Share on LinkedIn21Tweet about this on Twitter4Share on Facebook2Share on Google+2

2 Comments

  1. 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=

    Reply
    • Interesting

      Reply

Submit a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>