Email Preheader a Practical Guide to Improving Open Rates

The majority of email clients provide a snippet of text to preview the contents of an email in your inbox. This enables you to quickly scan your inbox and decide if you want read, save, or archive the email. What you may not know is that you can set this text using an email preheader.

Email preheader

And, if you aren’t setting a preheader, you may be missing an important email optimization that is proven to increase open rates:

And, you should use every part of your email to control your brand.

Before we explain how to set the email preheader, let’s clarify what the email preview text is.

What is email preview text

The email preview text is the text displayed by an email client to preview the contents of an email.

This text is displayed to the right of the subject in Gmail and below the subject in both Microsoft Outlook and the Apple iOS Mail app.

Below is an example from Gmail highlighting the various parts of an email in the inbox:

Example of email preview text on Gmail

How email preview works

Email clients set the preview text automatically from the first lines of your email. And today’s modern email clients will use the first 40 or more characters as the preview – unless you set a preheader.

The technical explanation of where the email preview comes from

Getting a bit more technical. The preview text is the first non-HTML text found in the beginning of the text/html section of an email’s multi-part MIME (Multipurpose Internet Mail Extensions) body.

While the email body may contain both plain text and HTML versions of the email content, the preview text comes from the HTML version.

With a little bit of HTML and CSS Jiu Jitsu you can control what is shown in the email preview text.

This is known as an email preheader.

Recommendation: instead of letting the email client choose which text to display, you should proactively set this text. Use the email preheader to highlight your content or call to action.

There are two ways to control the email preview with an email preheader.

Let’s start with the easiest.

Use visible text to set the email preheader

The first option for setting the preheader is easiest. Simply include some content at the top of your email. Much like how a Johnson Box is used for direct mail.

An email preheader is similar to a Johnson Box. A Johnson Box is used at the top of direct mail and includes the key message of the letter.

Here is an example of several emails And their preview highlighted:

Email preheader in Gmail

Looking at the first email in the example, the preview text of the email is set by the content at the top of the email:

Visible email preheader

This type of preheader is common, and you will see it often now that you know what it is. But you can see how the text ‘View on a web browser‘ leaked into the email preview text. Not exactly ideal.

A challenge with setting a visible preheader is that the amount of text shown by the email client is arbitrary. The length of preview text shown depends on the screen size, device, and email client.

This is a problem because the design and layout of your email won’t allow you to set several sentences of visible text!

While you can’t control how much text will be shown in your preview, you can control what text is shown by using a hidden email preheader.

Use hidden text to set the email preheader

Let’s look at an example email to help illustrate how a hidden text email preheader works:

As you can see there is no visible text at the top of the email.

Instead the email is heavy with HTML and images. But clearly Gmail is able to find the right text to display:

Gmail finds email preheader

So how does Gmail know which text to show in the email preview?

If you dig through the text/html section of the original email, you’ll find this code near the top:

Html of email preheader

This is known as a hidden email preheader.

Important: Hiding text using HTML and CSS does require some hacks. We recommend using the following HTML and inline CSS.

<div class="preheader" style="display:none !important;
visibility:hidden !important;
mso-hide:all !important;
font-size:1px;
overflow:hidden !important;
display:none !important;">
Visit During the Month of April for this Great Deal
</div>

Note: the class name preheader is incidental and not required unless global styles are being set.

If you’re sending email using DailyStory, the email preheader is easily set when drafting or editing an email.

Now that you know how to control the preview text using hidden HTML, let’s quickly talk about writing an effective preheader.

Writing an effective preheader

Setting an effective preheader can make your email stand out in the inbox. Or, at the very least, clearly communicate the purpose of the email.

The example shown above for the Toyota tire sales event is a great example. Because the combined subject plus preheader text is written as a single statement:

Rob, The Tire Savings Event is Here – Buy 3 Tires, Get the 4th for $1 – Visit during the Month of April for this Great Deal

This message is personalized, has a clear value proposition, and a clear call to action. All before we even opened the email.

The subject and preheader text is written following many of the same guidelines for writing great Tweets.

This is a good strategy for how you should use your preheader copy: write it as a continuation of the subject.

Why setting an email preheader is important

Hopefully you’ve found this article helpful. And while I don’t like to focus on what not to do, it’s worth pointing out what happens when you don’t pay attention to how an email looks in your inbox.

Below is a screen shot of an email sent out daily by the Wall Street Journal. And unfortunately it is a perfect example of where a hidden email preheader would be beneficial:

Not setting an email preheader

The preview text is clearly being built off of the first text in the email:

Setting the following hidden email preheader would make this email a lot more interesting in the inbox:

<div class="preheader" style="display:none !important;
visibility:hidden !important;
mso-hide:all !important;
font-size:1px;
overflow:hidden !important;
display:none !important;">
Power Struggle  - The Trump administration’s commitment to coal is facing its stiffest test yet after an Ohio energy company made a plea to favor that power source over its many rivals.
</div>

A better email preheader

By setting the email preheader proactively we get a much more useful view of the email in our inbox.

Write long text for your email preheader

Maybe you want to set the preheader to a limited amount of text by using something like this:

<div class="preheader" style="display:none !important;
visibility:hidden !important;
mso-hide:all !important;
font-size:1px;
overflow:hidden !important;
display:none !important;">
This is a short header &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>

We haven’t tried this with all email clients, but Gmail ignores the non-breaking space and adds the next text it finds.

Always write at least 160-200 characters of copy. The entire text may not be shown, but this way you can control what is shown.

The key take aways from this article

Set a preheader to control your email preview text. It is an important email optimization that is proven to increase open rates.

Set a preheader by hiding text using HTML and CSS. See the HTML snippet above for how to include a hidden preheader in your email.

Write your preheader copy as a continuation of the subject. And be direct and have a clear call to action.

You can’t control how much text will be shown in your email preview, but you can control what text is shown. And you should include at least 160 characters of text in your preheader copy.