Master Android: Gmail App for Android Now Available for Testing

[ 0 By

As mobile opens continue their climb towards 50% market share, many designers are left wondering just how their emails look on mobile devices. Is text legible? How do images look? Are CTAs easy to touch?

Litmus offers testing for a wide variety of native email clients on mobile devices, including Android, BlackBerry, iPhone, iPad, Symbian and Windows Phone. However, many users prefer to read their email in a third-party app or via webmail in a mobile browser. While these choices are great for smartphone users, it can offer quite the headache for email designers. We try to ease that pain by offering testing in a variety of mobile environments. For example, over the summer we introduced testing for web-based email in the Android browser. For these previews, emails are shown how they will render if an Android user opens the message in a webmail environment by visiting Gmail or Outlook.com directly in their smartphone’s browser.

Today, we’re excited to announce a new addition to that list. Testing is now available for the Android Gmail app.

android-test

Android testing in Litmus

A LOOK AT ANDROID MAIL APPS

As of October, Android accounts for approximately 11% of total opens—a 44% increase since January. Due to the prevalence of image blocking across email apps on Android, it’s likely that opens are much higher. Android smartphones are arguably more popular than iOS device, accounting for 81% of all smartphone shipments in Q3 this year.

Android owners have a wide variety of email applications to choose from. Below are just a few options:

  • Native email client, which varies based on Android version
  • Gmail app
  • Yahoo! app
  • Gmail in the Android browser
  • Outlook.com in the Android browser

Not considering the Android Gmail app, all of these clients offer a wide range of experiences for users and a huge difference in rendering capabilities.

App Media queries Image blocking ALT text Styled ALT Preview text Scaling
Native (Email app) Android 4.x
Android Yahoo! app * *
Gmail (Android browser)
Outlook.com (Android browser) * *

* Turns images on by default – cannot disable images

It’s a lot to consider when designing for an Android audience. We recommend always optimizing for images off, using mobile aware techniques, and keeping your important information and calls to action on the left side of emails.

native app
gmail browser

Native app

Gmail in browser

RENDERING IN THE ANDROID GMAIL APP

A study by BrightWave Marketing found that twice as many Android owners use the Gmail app compared to the default mail app, making it the most popular Android email client. Over the summer, Gmail began rolling out major changes, many of which affected the app. So, depending on whether your subscribers are using an older version or newer version of the app (Gmail app version 4.5+), they may be seeing very different emails.

The most notable change is the introduction of Gmail tabs, which auto-filters emails into four tabs: Primary, Social, Promotions and Updates. These tabs have introduced yet another barrier for email marketers to get their subscribers to open emails. Since the introduction of tabs at the end of May, we’ve seen a 27% decrease in Gmail opens. However, anecdotal evidence suggests that engagement is up and unsubscribes are down—a silver lining and indication that perhaps change isn’t so bad after all.

More importantly for email designers, there are rendering differences between older versions of the Gmail app and this newest version.

App Media queries Image blocking ALT text Styled ALT Preview text Scaling
Android Gmail app (4.5+)
Android Gmail app (older versions)

While the new version of the app still doesn’t support media queries or enable images by default (fingers crossed this will be in a future update!), it does auto-scale emails, which is a major improvement.

old app
new app

Old app

New app

However, Lauren Bell from WhatCounts, pointed out that not all emails are rendering properly with this new “auto-fit” feature. Lauren explains:

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.

WhatCounts’ client, Navy Federal Credit, discovered that adding a transparent spacer image with a fixed-width forces 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.”

Check out their code before:


<table class="button" cellpadding="0" cellspacing="0">
  <tr>
    <td height="10"></td>
  </tr>
  <tr>
    <td align="center" width="160" height="35" bgcolor="#ff9f3b" background="http://media.nfcu.org/navyfederal/templates/orange-button.jpg">
      <a href="https://www.navyfederal.org/products-servicees/loans/auto/auto-loans.php?enFUPA%%$builtin.juliandate%%" style="color: #ffffff; font-family: arial; font-size: 14px; font-weight: bold; text-decoration: none;">Start saving today!</a>
    </td>
  </tr>
</table>

And then after:


<table class="button" width="260" cellpadding="0" cellspacing="0" style="display: block;">
  <tr>
    <td colspan="2" height="10">
      <img src="http://media.nfcu.org/navyfederal/TestFiles/wireframe-template/spacer.gif" width="260" height="10" alt=""
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle" width="160" height="35" bgcolor="#ff9f3b" background="http://media.nfcu.org/navyfederal/templates/orange-button.jpg">
      <a href="https://www.navyfederal.org/products-servicees/loans/auto/auto-loans.php?enFUPA%%$builtin.juliandate%%" style="color: #ffffff; font: bold 14px/35px arial; text-decoration: none;">Get started!</a>
    </td>
    <td width="100"></td>
  </tr>
  <tr>
    <td colspan="2" height="10"></td>
  </tr>
</table>

GET TESTING!

Testing in the Android Gmail app is now available for everyone with an active Litmus subscription. Not a Litmus user? Sign up today for a free 7-day trial.

ADDITIONAL RESOURCES