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.
It has 3 elements:
- From name
- Subject line
- Pre-header 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.
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…
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. 😉
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:
This is a campaign from PhotoShelter.
and this is the mobile version of the preview:
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
This one is from SingleGrain:
and this one is on Apple Mail
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?
- Write a short subject to make sure it fits everywhere
- Make sure the pre-header text support the subject line, almost as a continuation
- But I wouldn’t worry about getting your pre-header text cut off
- Don’t repeat your branding too much, if it’s already in the from name, that’s probably enough