The Modern Marketing Blog covers the latest in marketing strategy, technology, and innovation.

What Gmail's new 'grid view' means for marketers

Last year Gmail mixed things up by releasing tabs, which automatically sorts email within users’ inboxes. The release introduced new things to consider — how your email is perceived by sorting algorithms, whether people would even see promotional emails, and how to market in this new user experience.

Gmail has done it again this year, introducing the new “grid view” feature (via an open beta) to their promotions tab. This effectively gives the user a visual preview of what the email they might be opening is about. In addition to the the headline and sender information, grid view displays a "featured image" either sourced from content in the email or an image defined by the sender.

Here's what it will look like:

How to display grid view in the promotions tab

Welcome to the new grid view: your inbox, but now far more visceral and visual. A quick scan with the eyes yields far more information and than a list of headlines by representing emails as preview tiles, with a large image above the sender information and headline.

What control do marketers have over this?


[caption id="" align="alignnone" width="304"]Anatomy of grid view frame (source: Google) The anatomy of a grid view frame[/caption]

<script type="application/ld+json">  {    "@context": "http://schema.org",    "@type": "EmailMessage",    "publisher": {      "@type": "Organization",      "name": "Google Play",      "url": "https://play.google.com",      "url/googlePlus": "https://plus.google.com/106886664866983861036"    },    "about": {      "@type": "Offer",      "image": "http://www.example.com/product_image.jpg"    }  }  </script>

There are several layers of information shown at a glance in the new grid view — we have the featured image (representing what’s in the email, ideally), the sender image and sender name, as well as the classic subject line. The sender has control over all of the properties by placing Javascript Object Notation (JSON) script or Microdata within the email itself. Let’s dive into each of these in detail — we'll be demonstrating the JSON version as we've found it to be more elegant and easier to understand. Keep in mind that since this feature is in a trial stage, some of the details below are likely to change.

Featured Image

Featured Image

The most apparent change with grid view is the array of featured images shown when the promotions tab is clicked. The sender defines the featured image in the HTML using a previously hosted file (as in it cannot be a local file). This image can be independent from the email, giving the sender the opportunity to design specifically for it. If no featured image is defined, then Gmail uses an algorithm to pick an image out of your email to put in its place.

The algorithm used for choosing what image to display is unknown, however it tends to be the largest image, typically the main image display at the top of the email (aka the “hero”). Gmail won’t try to squeeze the image it chooses for you into the center of the frame like it does when you do define a featured image, instead it chooses to target the top-left corner of the image. If you do define a featured image but it does not meet the dimension requirements, instead of just displaying the image it would otherwise choose for you, it displays the alt text of that image.

Finally, the dimensions of the image file must be at least 580px tall and 400px wide to show, although I’ve discovered that Gmail tends to play along better with images that are slightly larger than 580x400 —  sometimes exact dimensions wouldn’t show up for me. To sum up the requirements neatly:

  • Featured image must be 580x400px JPG, PNG, or GIF
  • Animated GIFs do not play, instead renders first frame
  • No way to track if your image was previewed in the promotions pane
  • Featured images are cached the same as all images sent to Gmail
  • Featured image can be sourced from outside of the email

Now that we know what the featured image is...

How do we actually implement this into our email?

Google has made it very simple! Just copy this entire snippet and paste it in between the <head> tags of your email, then replace your image source in the area highlighted in red below!

<script type="application/ld+json">  {    "@context": "http://schema.org",    "@type": "EmailMessage",    "publisher": {      "@type": "Organization",      "name": "Google Play",      "url": "https://play.google.com",      "url/googlePlus": "https://plus.google.com/106886664866983861036"    },    "about": {      "@type": "Offer",      "image": "http://www.thisistheplaceyourimagesourcegoes.com/yourimage.jpg"    }  }  </script>

Sender Image

Sender Image

Contrasted with the featured image, the sender image is not defined directly by the sender but rather by the verified Google+ account associated with the sender. If no verified account is defined in the markup, it merely displays a bland character pulled from the first letter of the Sender’s name.

This is a clever way to invite more companies to have a serious G+ presence while giving the user visual feedback of where their emails are coming from helping to prevent phishing and spam. At first this seems like a very political move in the social networking strata, but I find it to be a natural way to help the user to scan through the grid and build some brand recognition.

Subject Line/Sender

Sender Name/Subject

The subject line and sender information are pulled in from the email as usual. In grid view, you are allotted a hard limit of 20 characters for the sender name and 75 characters for the subject line — anything longer will be truncated without the addition of an ellipses It's important to note that anything shorter than 75 characters will not pull in any extra copy like the non-grid view, so make sure the subject line translates well between both views.

So how do we actually get our emails working with grid view? The first step is to enable promotions tab, and then request access to the field trial so you can begin experiencing it yourself. It took me several days to have my request accepted, where it automatically appeared as an option in my Promotions tab without notification.

From there developing the markup is actually quite simple — Litmus even has a handy little tool for easily inputting all the info you need and outputting the code to copy and paste right into the tag of your HTML. If you want to dig a little deeper into what the markup is actually doing, I recommend checking out Google’s developer site.


This TOUCH OF MODERN promotional email sums up the content simply by displaying products that are mentioned in the headline, as well as announcing there is a sale. Notice the consistency of brand identity through font and colorway.

TOUCH OF MODERN Gmail Promo tab

Another great example from TOUCH OF MODERN demonstrating the effectiveness of "show" instead of "tell":

Another great example from TOUCH OF MODERN demonstrating the concept of "show" instead of "tell"

This Disney example displays a centered featured image and a straightforward & related headline that highlights an article within the email. The sender image supports the offer with iconic Mickey Mouse imagery.

Disney Gmail Promo Tab

Though missing the G+ integration, we loved the way this People For Bikes offer framed the featured image while succinctly communicating the purpose for opening the email.


Ultimately, this feature is still a field trial with kinks to work out. Despite this, it’s important to note that Gmail currently has a market share of over 10% putting them in the top five email clients, as well as the most popular web client. It’s vital that marketers keep up with Google as they dictate the landscape of the default user experience.

Many companies are incorporating the markup in their emails to utilize the new Promotions tab to its fullest extent. We're curious — have you seen particularly clever use of this feature so far? Are you taking the time to design for this new feature specifically? We would love to hear what you think of this newest change.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.