Notify me on Messenger
10 min

Update: Check out how easy it is to customize the preheader text in MailUp (version 8.8.3)

“View it in the browser” is not a good preheader

The preheader is the first line of machine-readable content that exists in your email, and it’s what most email clients show right next (or right below) the subject. Because of its placement in the inbox, it carries a lot of weight in a recipient’s decision to open the message or not, and should therefore be an enticing summary of what the email is about.

Here’s a Gmail inbox on a mobile device: the preheader is the text in light gray shown after the message subject.

Example of preheaders in Gmail

In this article we’ll look at what you can do to optimize the preheader, focusing mostly on mobile email clients.

On a mobile device – which is increasingly where email opens happen – speed-reading users glance at their inbox and click only on the messages that grab their attention.

Let’s get to the main issue right away:

  • A best practice in email design is to include a link to the Web version of the message at the top, so that, if the reader is having issues viewing the message, they can quickly reload it with their browser
  • That link, which typically says something like “Display problems? Click here” (or alike,) is definitely not what you want to display next to the subject, since it provides no information on what the message is about.

For example, take these two messages shown in the email client on an Android phone:

Email on mobile preheader

As you can see, the first message shows a much more descriptive preheader, cut off at around 45 characters (with spaces). In the case of the second message, instead, the email client found the “Please see the Web version…” link as the first machine-readable text, and therefore showed that specific copy, which does not help the reader learn more about the message.

Links or summary at the top? Two conflicting needs?

There seem to be two conflicting needs:

  • You need the message preview displayed by the email client (sender + subject + preheader) to be as effective as possible in order to drive the highest open rate.
  • You might very well need the first machine-readable text shown in the message to be something other than a great summary of the email. For example, the link to the browser version, or maybe navigation links to key areas of your Web site (e.g. an email sent by an ecommerce merchant), or perhaps an image (some email clients will put “[image]” in the preheader in that scenario).

What should you do then?

The solution: using a hidden preheader

Fortunately, a tiny bit of HTML code comes to the rescue, allowing you to add a preheader to the message that is hidden when the message is opened. The best of both worlds!

We spent some time testing out different variations of the code on a variety of Web, desktop, and mobile email clients, and we believe to have found a combination that works pretty much everywhere. So, let’s cut to the chase. Here we go:

<div style=”display: none !important; mso-hide:all;”>Lights on Spring Season 2013: we’re back to sharp contrasts</div>

Let’s look at it:

  • This is a DIV (i.e. a block of HTML)
  • There is a inline style attached to the DIV. Since it’s inline, we don’t have to worry about the email client not seeing styles located elsewhere (some don’t like that)
  • The style says to hide the DIV when the message is shown. Geek notes: the “important” declaration helps with Gmail, and the “mso-hide:all” one makes Outlook behave nicely.
  • The style is ignored by the email client when it searches for the first machine-readable line of text, which means that the text included in the DIV will be displayed.

This is the preheader that we used in our tests. You can see it – partially cut off – in the screenshot above. When the message is opened, though, the preheader is hidden correctly in all the mobile, desktop, and Web clients that we tested. Here is an example:

Preheader hidden when message opened


A customized text version as a fallback

In our tests, didn’t display the preheader included in the hidden DIV. No worries, though. likes to use the first line it finds in the TXT version of the message. This means that if you can edit the plain text version of the message and place a summary at the top, you are all set.

This is indeed something that you can do in MailUp 8.2.4 and above, where you can manually edit the plain text version of the message using a new tool that is part of the “Check Up” feature. In previous versions (or if you don’t manually edit the text version), the plain text version was created automatically from the HTML.

Note that only relying on the TXT version of the message is not enough. Gmail, for example, does not grab the preheader from it, but rather from the first machine-readable line in the HTML of the message.

Therefore, to have control of the message summary that will be displayed in as many email clients as possible, you need both:

  • The preheader in the message, which you can hide as mentioned above, if you wish
  • A quick summary line at the very top of the TXT version of the message

Not just in mobile devices

Although in this article we are focusing mostly on the importance and the display of the message preheader in mobile email clients, please note that the preheader is used in desktop and Web clients too, and it’s extremely important there as well. Here’s an example of the preheader shown in the message preview by the desktop version of Outlook 2010.

Preheader used by Outlook

Other notes on optimized preheaders

  • Email clients typically display the first few dozen characters (including spaces) in the pre-header. This depends on the email client, on the phone orientation, on the length of the subject (e.g. Gmail), etc. The point is that the juicy stuff should come first.
  • The preheader should always be consistent with the content of the message: never “trick” readers into opening a message by using a misleading preheader.
  • When you view the message in your email editor, the preheader DIV will likely not be shown. So, if you create a new message by making a copy of an old one, remember to change the preheader!

Happy emailing… and let us know if you encounter any issues with the HTML code we included above.

BTW: See an update on this topic >>

Liked this article? We have plenty more in store for you.

Subscribe to get news, tips and updates delivered to your inbox.

Read also

5 Amazing Copywriting Techniques to Boost Email CTR

According to Templafy, the average person receives 121 emails a day. That’s 121 different messages, 121 different promotions, 121 different calls to action. It’s all too ...

Read more

How much are your campaigns worth? All about the ROI of email marketing

What it is, how to calculate it, and which actions to use to optimize email channel metrics that respond to the most important of questions: ...

Read more

Does summer make open rates drop? 5 ideas to avoid it

Summer is a beautiful season and many businesses are slowing down the performance of their summer emails. There are effective remedies to prevent these declines. ...

Read more

11 things you did not know you could do with MailUp

We have discovered 11 functional gems hidden in the platform. They are small, yet decisive in bringing your Email Marketing activities to an advanced level. Creation, ...

Read more

Quick Guide: How To Create A Mailing List

Let's discover in 5 steps how to create a contact list plus enhance and expand it thanks to a database building strategy.    While searching Google for ...

Read more

Do You Know What Are The Most Important Email Marketing KPIs?

In this blog post, we'll dive deep into email marketing KPIs, including definitions, formulas, and actions for improving results and creating data-driven strategies. Marketing today is ...

Read more