The Ultimate Guide to Preview Text Support

[ 0 By

Your email copy is engaging and creative. The design is beautiful and it renders well in every email client. There’s even a bulletproof button. But the truth is that just a fraction of even the most beautiful emails ever get seen. The rest are left to languish in the inbox—basically a wall of text standing between your subscriber and your email.

While the email envelope is the first thing a subscriber sees, it’s often the last thing considered when creating an email. Every inbox shows the sender (or ‘from’) name and subject line for an email—collectively known as the email envelope. Many also display some preview text. In our joint survey with Fluent, 24% of respondents look at the preview text first when deciding to open an email.

WHAT IS PREVIEW TEXT?

Preview text is a snippet of copy pulled in from the body of your email and typically displayed underneath the sender name and subject line in a subscriber’s inbox.

iOS-gmail-app-preview-text

The concept of preview text is reminiscent of the “Johnson Box” used on direct mail pieces to draw readers’ attention to key points of a message. The same goal applies to email—preview text can capture your subscriber’s attention, encouraging them to open. Preview text can also influence behavior—getting subscribers to scroll and click specific articles mentioned in the text. In fact, WeddingWire saw a 30% increase in click-through rates by testing preview text.

WeddingWire-example

While all envelope fields are fertile ground for optimization and A/B testing, optimizing preview text is frequently a quick win.

ISN’T IT CALLED PREHEADER TEXT?

The phrases “preview text” and “preheader text” are often used interchangeably. However, they are in fact slightly different elements of an email.

The preheader text is what is used to control the preview text that appears in the inbox, usually below the subject line. Preheader text appears visually above the header in the email body itself.

The preview text is what is seen in the message envelope of the email in the inbox.

ADDING PREVIEW TEXT TO YOUR EMAIL

Preview text is pulled from the first few lines of text found within an email. Preview text can either be displayed or hidden in the body of your campaign. If you’ve planned for the headline or first few lines of text in the body of your message to play off the subject line, adding separate preview text isn’t necessary.

Preview Text - In the Inbox
Preview Text - In the Inbox

Visible Preview Text

We often see preview text that contains small icons and social sharing links. Instructions to “View this email in web browser” or “Forward to a friend” are also common, as is ALT text pulled from the logo or hero image in an email. The worst offender is “Having trouble viewing this email?” or perhaps the brave souls that include their unsubscribe link at the top of their campaigns (which also shows up in the inbox).

These prompts may play an important role in your email, but they don’t exactly scream “OPEN ME!”

Daily-Skimm-example1

First, consider moving these administrative elements elsewhere in your email. Or try adding a sentence or two of additional, more compelling text in front of these messages.

Rather than having your preview text picked up from the first bit of text in the email, another option is to specifically define which text you’d like displayed in the inbox. How do you do this? It’s simple! All you need to do is add a little code after the <body> tag in your HTML.

<body>
  <div>
    This is how you define which text you’d like displayed for the preview text.
  </div>
</body>

Hidden preview text

Including visible preview text isn’t always possible—or desired. For example, your retail client may require that you include navigation links to their website, or a link to the browser version of the email. Maybe you just prefer the top of your email to look clean and simple. Luckily, there’s a solution: hidden preview text.

Hidden preview text allows you to customize the text that is displayed in the inbox without displaying that text in the body of the email.

Preview Text
Email in inbox

Without using hidden preview text HTML, the text “Tweet this” and “View online”, as well as the text “The 2016 State of Email Report Position yourself for email success throughout 2016…” would have displayed in the inbox, rather than “An analysis of every email innovation + the impact on your emails for the coming year—download the report now.”

Hiding preview text using HTML and CSS requires some hacks, and there are a few different strategies you can use. Our solution includes CSS that instructs the text not to display.

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
  Insert preview text here.            
</div>

Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.

WHICH EMAIL APPS DISPLAY PREVIEW TEXT?

Like everything in email, support for preview text varies. Even when preview text is supported, no two inboxes look the same—both placement and character count vary.

Desktop

Preview Text Support

Avg # of Characters Displayed

Apple Mail

check-green

140

Lotus Notes 8.5

check-X

N/A

Outlook 2003

check-X

N/A

Outlook 2007

check-x

N/A

Outlook 2010

check-X

N/A

Outlook 2013

check-green

35

Outlook 2016

check-green

35

Outlook for Mac 2015

check-green

55

Mobile

Preview Text Support

Avg # of Characters Displayed

Android Native App

check-green

40

Android Gmail App

check-green

*

Android Yahoo! App

check-green

45

BlackBerry

check-x

N/A

iOS Native App

check-green

90

iOS Gmail App

check-green

50

iOS Yahoo! App

check-green

50

Windows Phone

check-green

40

Webmail

Preview Text Support

Avg # of Characters Displayed

AOL Mail

check-green

75

Gmail

check-green

*

Yahoo!

check-green

*

Outlook.com

check-green

*

GMX

check-x

N/A

Web.de

check-x

N/A

Freenet.de

check-x

N/A

Mail.ru

check-x

*

* Varies depending on the subject line length.

Devices used:
Samsung Galaxy S3 – Android 4.3
BlackBerry Z10
iPhone 6
Nokia Lumia 520 – Windows Phone 8

Preview text placement

The majority of the email apps that we tested display preview text on a separate line below the sender name and subject line. In the case of the Apple Mail and iOS Mail apps, there are two (or sometimes three!) lines of preview text.

AOL1
AOL Mail displays one line of preview text under the from name and subject line
Apple-Mail1
Apple Mail displays two lines of preview text under the subject line
inbox-iphone6-plus
The iPhone 6 Plus Mail app displays three lines of preview text

In Gmail and Yahoo, the preview text is displayed directly after the subject line.

gmail1
Preview text follows the subject line in Gmail

Depending on the width of your browser window and the length of the subject line, your preview text may—or may not—display in Gmail or Yahoo. Similarly, in the Android Gmail app, the subject line and preview text comprise two lines of continuous text.

Android-Gmail-app
Above, how it appears in the Android Gmail app

Character counts for preview text

Browser size, email app, and subject line length can all play a factor in how much preview text is displayed in the inbox. For example, while the iOS Mail app can display ~90 characters of preview text, Windows Phone only displays ~40 characters before cutting off characters.

ios native app
iOS native Mail app
Windows Phone
Windows Phone

In the iOS 10 Mail app users can manually change the amount of preview text displayed. The default length is two lines of preview text, however users can change this to show up to five lines of text, or to disable preview text completely.

Preview text support in iOS 10

Since the amount of preview text displayed in Yahoo, Gmail, and the Android Gmail app varies based on the length of the subject line, you’ll see anywhere from ‘0’ to a couple dozen characters of preview text in these clients.

Learn which email clients are popular with your subscribers so you can optimize the preview text for them, to give them a better experience in the inbox.

Is your preview text packing a punch?

Optimize your sender name, preview text, and subject line with Subject Line Checker, available in Litmus Builder.

Sign up for Litmus today→

 

No preview text support

Outlook.com, Freenet.de, and early versions of Outlook don’t display preview text. If these clients are popular with your audience, pay extra attention to testing and optimizing your sender name and subject line.

No preview text support in Freenet.de
Freenet.de
outlook2010-preview-text
Outlook 2010

TIPS FOR OPTIMIZING PREVIEW TEXT

Second subject line

Think of preview text as a “second subject line” and use similar strategies to improve your campaigns. Write preview text that is useful, specific, and, if appropriate, has a sense of urgency. This is also an ideal place to experiment with humor, symbols, or other tactics that aren’t quite ready for subject line status.

Front load keywords

Keep character limitations in mind, and pack the beginning of your preview text with keywords and phrases that perform. You’ll want the “good stuff” to show up in clients that may cut off characters. But don’t make it too short—you also want your preview text to fill the space displayed in iOS inboxes and Apple Mail. It’s a delicate balance.

Avoid repetition

It can be tempting to re-use existing subject and headline copy in your preview text. Get creative, using this extra space to play off of the subject line and further encourage your subscribers to open the email. And don’t forget to A/B test!

  • Use personalization: If you’ve had success with using personalization in other parts of your campaigns, try personalizing preview text, too.
  • Sum up the email: If your subject line includes a call-to-action (CTA), use preview text to include more details. For example, if your subject line is “50% off new arrivals,” use preview text to explain what type of merchandise has arrived.
  • Include a CTA, or secondary CTA: Does your email have a few CTAs? If they pair well with the subject line, consider showcasing them in your preview text.
  • Be honest: As always, you should never trick your subscribers into opening your emails. The sender name, subject line, and preview text should work together so subscribers know what to expect when they open the email.
  • Encourage scrolling: If you’re sending a newsletter, highlight a featured article (or two).
  • Don’t forget to update: If you’re using hidden preview text, it’s easy to overlook. As your emails change it’s important to keep your preview text current.

Need some inspiration on subject line and preview text pairing? Litmus Community members shared their winning subject line and preview text combinations in a past Community Contest.

A/B test to increase performance

Learn what works—and what doesn’t—with continuous A/B testing. Add preview text to your A/B testing rotation. Test different preview text and subject line combinations—you might find that some strategies produce higher open rates while others generate more clicks.

GET THE LATEST DELIVERED STRAIGHT TO YOUR INBOX

Want more advice like this? Subscribe to our weekly newsletter and get the latest content for email design pros delivered straight to your inbox. Every week.