How to optimize the “Preview” for mobile

What is “Preview”?

The preview is what is displayed in the inbox before an email is opened. In other words, it’s the feed of emails received in your account.

3 Elements

It has 3 elements:

  • From name
  • Subject line
  • Pre-header text

Parts of the preview text

How are each one of these elements displayed depends on the app and the platform. The image above, for example, is Gmail on an iPhone 6.

Remember this experiment?

I did this back in module 2 to show the importance of the pre-header text by the amount of real estate it takes in the inbox.

heatmap of the preview text

Today, we’re not exactly talking about the pre-header text, although it is one of the components, but I still want to perform the same exercise so you can see how much space each element takes.

So, here is the mobile version of the same exercise…

preview text

There are 2 important considerations when it comes to the preview of your email on mobile environments:

  • Who supports what?
  • How long should your preview text be?


Where is preview supported?

In most cases, the default will be that from name and subject line are always displayed, but pre-header text will not always be present. Here is where pre-header text is supported:

  • Android apps
  • iOS apps
  • Windows phone

As of today, the only environment where pre-header text is not supported is Backberry. In other words, nothing to worry about. 😉

Word count

Desktop vs. Mobile

The difference between desktop and mobile is this:

On Gmail desktop, for example, the pre-header text is pushed by the subject line. Depending on how long your subject line is and how much real estate is left, that’s how long your pre-header text is going to be.

There is a chance your pre-header text will not even display if the subject is too long.

On mobile, it’s a whole different story, because the subject line and the pre-header text are completely independent from each other.

Is this good or bad?

Well, it depends. This also means that while your subject line gets the priority on desktop, on mobile it will be cut off if it’s too long.

It comes down to knowing how to write them and be aware of how they are going to be displayed.

The word count is also important because while you’re looking at your email on an iPhone app and it looks great, turns out a different app is displaying half of it.

This is when the “mobile-first” approach comes into play. Optimize for mobile first.

Let’s look at a couple of examples:

Example 1

This is a campaign from PhotoShelter.

Desktop preview

and this is the mobile version of the preview:

preview on mobile

What can we learn?

  • With such limited space, maybe mentioning the brand 3 times is excessive
  • The subject line is short, so it displays perfectly in both cases
  • I think they were not careful enough with the pre-header text and that’s just the first line of text found in the body – That’s what I think needed to be optimized

Example 2

This one is from SingleGrain:

desktop preview

and this one is on Apple Mail

mobile preview

What can we learn?

  • The subject barely makes it on desktop, there is no room left for the pre-header (which is not important)
  • But then the subject is cut off on mobile because is simply too long
  • There was no thought about preparing for the pre-header text, “We hope you have had a wonderful week!” is a terrible line for the preview
  • It’s just picking up from the body

The word count

You would think that I could just give you an exact count, right? Like, a Tweet is 140 characters…

But it’s not the case, because as I’ve said before, with email we are dealing with too many environments, screen sizes, platforms, email clients, etc.

Let me just give you a little taste…

Gmail will display an average of 100 characters of the subject line and pre-header collectively, depending on the size of the screen. The pre-header will depend on how long the subject line.

iPhone Mail displays around 140 characters of pre-header regardless of the subject line, because they are displayed independently. But this is when the device is on “portrait” because in “landscape” everything changes again.

iPhone 5 Mail will display 38 characters of the subject line on portrait, and 80 characters on landscape.

It’s just too much…

What’s the solution then? (AKA… your homework)

I think putting too much time into this will be a waste of time. So, how do we follow a couple of rules to the best possible outcome?

  1. Write a short subject to make sure it fits everywhere
  2. Make sure the pre-header text support the subject line, almost as a continuation
  3. But I wouldn’t worry about getting your pre-header text cut off
  4. Don’t repeat your branding too much, if it’s already in the from name, that’s probably enough