3 Tips for Better Preheader Text

Preheader Negligence. We’ve all been victims of it.

              “View online as webpage.”

              “Forward to a friend.”

              And…the worst…“HAVING TROUBLE VIEWING THIS EMAIL?”

The presence of those phrases in our inboxes is a symptom of the next greatest plague among us: Preheader Negligence. Although not yet on WebMD, it’s loosely defined as failing to strategically control your email’s appearance in the inbox through the aid of optimized preheader text.

In modern inboxes, we see preheader negligence at its worst when generic link text is displayed in the inbox, directly after the subject line. See Exhibit A below.

Exhibit A: My personal inbox. Subject lines changed to protect the negligent.pht-examples

As a concept, preheader text has evolved over time. The phrase itself refers to the text above the header in an email. It was initially important because it was the first part of an email that subscribers saw, either after opening an email or in a preview pane. It was primarily a concept that came into play after an email was opened.

The concept has broadened beyond its post-open value, as marketers have taken advantage of shifting inbox geography. Several email clients now pull text from an email’s body and insert it right after the subject line in the inbox, to give recipients a preview of a message’s contents. The inbox pulls in the very first words of an email — usually, the preheader text.

Preheader text has almost as much visual weight in the inbox as the From name and subject line, especially on the iPhone. In the native iOS mail client, the preheader text actually has twice the visual real estate of the subject line! Regardless of its length, the subject line gets only one row, and preheader text occupies two rows, like this:

In my own testing with preheader text as the only changed variable, click-through rates have improved by anywhere from 5% to 30%. My audience leans heavily toward clients that display preheader text, so its significant impact is no surprise.

Below are three ideas to make better strategic use of the preheader. Ultimately, though, the weight given to this concept in your email strategy should be based on testing your own unique audience.

#1 – Continue the conversation from your subject line. Preheader text is a great chance to elaborate on your subject line, expanding on that same thought or idea.

#2 – Write a note to your reader. This one sounds a little ridiculous, but it makes an impact. Give a special greeting to your subscribers, as if the preheader text were its own, free-standing component of an email — a quick greeting card on the outside of your email, if you will. This style succeeds because it mimics what you would see in the preheader text from an actual email written to you by another person.

#3 – Give a deeper overview of your email’s contents. Your subject line allows you to communicate about the main idea or offer in your email. Often, there are secondary calls-to-action that support that main idea, and your preheader text gives you the opportunity to reference those in the inbox as well.

In the inbox, putting our best foot forward used to mean having a solid From name and a well-crafted subject line. As such, email marketers traditionally devote substantial attention to those two components of their emails. You can’t stop there, though. Failing to optimize your email for preheader text means you’re likely wasting crucial real estate in the inbox.

Stay vigilant, my friends! Preheader Negligence is a silent killer — of email performance, that is.


  1. I remember you talking about this at the Litmus conf (really enjoyed your talk.) But how do you implement this exactly. Do you put the view in browser link at the bottom of the email or just avoid using completely?

    1. Hey Josh – I mostly stopped using a “view in browser” link. They didn’t really get clicked on in the emails I was sending. The key to implementing the preheader text is to do it as a hidden div right at the beginning of the email:

      preheader text here

      Gmail doesn’t honor the “display:none” property, so the font styling there makes it (mostly) invisible.


Leave a Reply to mattbyrd Cancel Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>