How to boost your newsletter with custom preheaders

Sarah Hoof

HELLO, it’s 2015! Yet many of us still waste important newsletter space with meaningless admin stuff. Stop it. Start using custom preheaders and amp up the opening rate. Now.

If you work with email marketing, you probably spend a lot of time on your subject lines. That’s good! But do you work on the preheaders, which usually take up more space than subject lines? The preheader is a space where you can elaborate on the subject line with examples and a call to action. You know, things that make people actually open your newsletter instead of snoozing.

If you’re not working with optimizing the preheader, you’re not working with optimization.

What is a preheader?

… also called a snippet, text preview, pre header and pre-header.
When a newsletter pops up in your inbox, there are three things that can make you interested in opening it:

  1. The sender
  2. The subject line
  3. The preheader

what are preheadersPreheader areas are highlighted with yellow.

As you can see in the image above, you can find a golden opportunity (yes, we made yellow markings hehe) to work with copywriting in your preheader.

Your preheader is the text in that is located at the very top of your newsletter. Which, for many people, is meaningless admin stuff.

Why use a preheader?

One important metric when it comes to email marketing is the opening rate. Good copywriting will increase the opening rate. Maybe you have a bunch of lists and tips for better email marketing that hasn’t dealt with the importance of preheaders? I know, face palm.

When working with our customers we identify “just do it” changes; that is, things that we don’t need to analyse or A/B test. Things that just need to be done. Preheaders are one of these things. Why? Well…

Make your offer stand out in the inbox

Free space, thrice as much on an iPhone. Make your point. Increase the opening rate. You don’t even need to test it.

Elaborate on your subject line

The subject line has a character limit of 150 characters (which is the case for Mailchimp for example), but with a shorter subject line and through using the preheader space you can play more with your copywriting. Let the preheader elaborate on your subject line.

Facilitates delivery and lowers spam rank

With a custom preheader you can increase relevance, and the more relevant your content is, the lower the risk of being marked as spam.

Saves you when images are blocked

Many email clients today block images by default, meaning that images have to be loaded manually. Your preheader isn’t affected by this and is at the top of everything, which is great!

Preheaders are not new. At all.

They have been around for a long time, no one can argue with this fact.
But many people are still missing the importance of preheaders and it makes me crazy when my inbox is filled with admin stuff such as “if you can’t read this… “ or “does this email look weird?” or even worse “to unsubscribe to…”. It pains me, because it is so easy to fix.

BUT! Last spring I held a presentation at a seminar where I needed a picture of how this can look (yes, in 2015). I opened my inbox and took a screenshot:

Email preheader exempel

Your honor – I rest my case.

Translation preheader #3 and #5:
“Click here to read the email online instead: (link)”
“Does this email look weird? Click here Link: (link)”

How to make a custom preheader

Your preheader is at the top of your newsletter; that is, it’s the first thing shown in people’s inboxes after the subject line.

Short, concise and elaborative

Gmail, the most common email client, has a character limit of 100 characters for your subject line (desktop) and preheader together (140 on iPhone). Divide this limit between the two and let the preheader elaborate on your subject line (double check to make sure that gmail is the most common email client of your subscribers).

Use action verbs such as read, open, buy, fix…

To trigger a behaviour, tell the reader what you want them to do early on. As early as the subject line and/or preheader.

Code your preheader

Use links (if images are blocked), call to action, text aligned to the left in an easily readable font and contrast. The first row is the most important.

Run an inbox inspection

Coding email templates is black magic. Check how your emails look in the most common inboxes. All email clients are different, and are also updated frequently. And for God’s sake, don’t forget the mobile clients.

A/B test different preheaders

It doesn’t matter how good you think your preheaders is, you have to test it. You can measure the initial open rate as long as you actually start testing.

A custom header is #1 (in your newsletter).

Preheader example
Translation: “Rent a car at a fantastic price | Are you having trouble reading this message? Show web version. Don’t miss out on our amazing offers: add [email protected] to your contacts.”

Preheader example
Translation: “100 % happy participants during the last course”

Preheader example

Conversionista reveals:
“We’ve hidden our prehader”

Wait, what? How can it even be displayed then?
We use the preheader to increase the opening rate, you can only see it from the inbox. You can’t see it in the actual newsletter. This is a way to optimize the newsletter even more, as long as it isn’t made up of images (that are blocked).

Preheader exampleOur preheader is coded. It is at the top, but you can’t see it in the actual newsletter.

What’s in it for you?

  1. No copywriting repetition in overview vs inside newsletters
  2. Lead the reader into deep reading faster
  3. Make the value proposition more visible in the visual hierarchy

Ok? Should I show it or hide it?

A visible preheader isn’t always something that is possible to have. As an eCommerce company, maybe you always need to include a menu at the top, or maybe you just want to keep your newsletter scaled down, or perhaps you want to optimize your copy.

However, to hide it you need to play around a bit with CSS or HTML. Again, back to the black magic needed. In this case it is "display: none". This might not work for all email clients though (host, gmail). You want to make sure that the preheader isn’t visible through making sure to also make the text color the same as the background color, set the line height to 1 etc.

Feel free to borrow our code if you want to:

Hide preheader:

Visible preheader:

Start writing custom preheaders

Email preheader example

Disclaimer: Is this backed up by data?
No. We have no data on increased opening rate with versus without custom headers.

We don’t want to test removing them completely either to just to prove that everything becomes more shitty…

However, Pure360 reported an increased click through rate of 51 % for newsletters with custom preheaders (The Rebel’s Guide to Email Marketing: Grow Your List, Break the Rules, and Win) and Litmus saw an increase of 31 % (mailerlite).

So: Do you have any testdata on preheader vs no preheader? Do you have any other observations? Leave a comment down below!

Läs även