Skip to main content

What you need to know about Gmail’s Grid View

Gmail Grid View

Google made headlines last week after announcing the new Grid view for their Promotions tab. While it’s still in field trials, Grid view will inevitably present a new challenge for your emails.

To prepare for Grid view going mainstream, and to make sure your emails look great for any customers trying it out, you should develop your strategy for Grid view ASAP.

Here’s what you need to know to make sure your emails continue to succeed in Grid view.

You can still view promotions in a traditional list

Even when Grid view is made available to the public, your customers will still have the option of toggling back and forth between it and the more traditional list view:
Gmail Grid Field Trial GIF

This means you’ll have to optimize your emails for both experiences, since you won’t know how your customers are choosing to structure their inbox.

Subject lines and From names are shorter

In Grid, your subject lines will be limited to 75 characters max. Google also notes that sender names should be limited to 20 characters to avoid being “truncated.”

If you’re sending from a person in your company, their name might get cut off in Grid even if it looks fine in the traditional view. For example, my sending name, Nora from Customer.io, looks fine now…

Name in traditional inbox view

…but it’s cut off in Grid view:

Grid View From Name Cutoff

This is a little tricky. We’ve seen also longer From names displayed on larger screens:
Non-truncated Gmail Grid From Name

but they get cut off on smaller screens. As a best practice, keep your sender name at or below 20 characters.

Since it’s your From name and not the address that’s cut off in this view, you will probably want to consider changing it. As long as the name is still recognizable as coming from your company, it should not affect your emails or cause your message to get routed to spam.

Preheader text is eliminated

Preheader text is the opening text of your emails that displays in the inbox after the subject line. Savvy emailers use this text to draw readers in.

Inbox Preheader Text example

In the sample above, Jeff Goins uses his header text to continue the message of his subject line, which flows seamlessly into the email. It’s a compelling tactic to get me to open his message and continue reading.

In Grid view, this text will be replaced by a feature image.

As you begin to think about what images might propel your readers into your messages, don’t forget about list view. Since Grid limits your subject lines to 75 characters, you’ll still need to include stellar header text for users who stick with the traditional inbox.

Grid view features infinite scrolling

Unlike the other tabs in Gmail, the Promotions tab in Grid view will feature infinite scrolling.

Infinite scrolling means you really need to stand out from the crowd, since it’s become much easier for people to just scroll past you. It might also impact the timing of your emails.

Being at the top of the Promotions list when your customer is checking their email is the best way to put your message front and center. Tell your subscribers what time to look for your emails; if you’re providing value, they’ll make sure to check their emails around that time to get your content.

However, if you do miss the top of the list cutoff, all is not lost. Since scrolling is easier, and people don’t have to open new pages to see older content, your message still has a shot even if it’s later in the queue. Despite being further down, endless scrolling might make it easier for people to find you. But your images will need to stand out to capture attention.

Your images will directly impact the “open or delete” decision

Gmail introduced Grid view to help people use images to “quickly pick out the deals and offers that interest them most.”

In the new grid view, there are four components you’ll have to account for:

Gmail Grid View Featured Images

Your sender name and subject line are carried over from traditional mail.

The sender image is pulled directly from your Google + profile or company page. If you don’t have one, go and set one up with your logo as the profile image. When you code your emails for Grid view, Google will use your logo as your sender image.

You can, and should, carefully select the image to display as your featured image each time you send a new email.

People are going to judge your messages almost exclusively on their appearance. Subject lines and from addresses are still important, but the image has become king.

Broken images, images that aren’t properly aligned or formatted, or no images at all will make your emails are much more likely to get automatically deleted. If you don’t include any images, Gmail will grab text from your email and display it in a blank space:

Blank Text in Gmail Grid View

Simply having images in your emails isn’t enough either. Your emails will need to be formatted properly with HTML code to tell Google how to render your feature image. If you don’t specify your feature image with code, Google will put your email through an algorithmic washing machine. They might show one of the images in your email, but crop it incorrectly, like this:

Broken Image Gmail Grid View example

Even if you have images in your email, Google’s algorithm might also select a random piece of text from anywhere in the email message and use that as your “feature image.” But don’t worry, this kind of mess is easy to avoid.

How to optimize for Grid view with Customer.io

You’ll have to implement specific markup, called a schema, into the HTML of each email. This can be included at the header of your emails and changed for each subsequent message you send.

Litmus has a great tool for building the HTML snippet you’ll need with your own information. You pass in your company name, company site, company Google + page, and your feature image.

Copy the HTML that Litmus generates into your emails using Customer.io’s HTML (source) view. If you go back to the WISYWIG editor to make more changes, send another test email to confirm nothing’s been changed.

You could also visit Gmail’s developer tools for Grid view. Just make sure to switch the code view from JSON to Microdata. Customer.io’s editor won’t support the JSON code.

Copy the microdata code into the header of your emails (using HTML view) and fill in your identifying information. This method takes more legwork, so I’d recommend Litmus’ tool if you’re looking for an easier solution.

The recommended image size is 580 X 400 pixels. If you don’t have the resources to create a new image from scratch each time, you could also crop and resize an image from your email to feature in the Grid.

Your feature image does NOT need to be included in the actual email you send. You could design an image optimized for the Promotions tab that really stands out, and still maintain the relevancy of the images in your email.

Go big and go bold with your Promotions images, like Airbnb, Gilt, and Uber:

Good Grid Email Images Example

You’ll need make a splash, and everyone is competing with you for people’s attention.

If you haven’t signed up already for the trial, go to Google and enter in an address you’ll use for testing. You’ll be alerted if you’re chosen for the trial. The best way to test how your emails look in Grid view will be to send to this address, or the address of someone you know with Grid view enabled.

Grid view will support feature images as GIFs, PNGs, and JPEGS (though animated GIFs will be rendered into a static image by Grid view). It will also change the way your emails look depending on their status. An unread email looks like this:
Unread email Gmail Grid View

While a read email looks like this:

Read Email Gmail Grid View

You could also test if your emails actually end up in the Promotions tab. But even if testing shows your emails aren’t landing in Promotions, optimize your messages for Grid view. You never know if someone will switch your messages over, and you don’t want them to have a bad experience as a result.

Don’t forget to test your images, your subject lines, and your sender names to find what works best with this new challenge.

The future of your emails in Grid view

It’s too soon for anyone to have concrete data on the impact of Grid view on your emails’ success. But to stay ahead of the game, you should code for a new image each time you send out an email.

One of the really nice changes of Grid view is you can let your personality shine into the inbox. While it might mean a little more work now, designing a new, relevant image for each email will keep your readers even more engaged. Ultimately, Grid view is another interesting way for you to deliver value to your customers.

So tell me, have you made any changes to your emails because of Grid view? What are some of the challenges you’re facing, and how are you trying to overcome them? Please let me know in the comments below.