Become an email & SMS marketing pro

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

Notify me on Messenger
10 min

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

The preheader is text that email clients show next to the email subject line. As an extension of the subject line, it can provide a preview of what your email is about to your recipients, and therefore can impact the Open Rate.

An extension of the subject line

Preheader in email

Hiding the preheader

The issue with having a good preheader is that that same text may not be what you want at the top of the message once the message has been opened. So in a blog post earlier this year we suggested using the following code to hide the preheader when the message is opened.

<div style=”display: none !important; mso-hide:all;”>This is a great newsletter that you can’t miss!</div>

There are other ways to hide the text, such as by setting its color equal to the background color. However, setting the FONT color to match the background color is not ideal:

  • Setting the text as transparent or quasi-transparent can trigger a red flag in a SPAM filter. For example, Spam Assassin has a specific rule for “low contrast font“.
  • Setting the text to be equal to the background color is not a Web design best practice, and you likely have a Web version of your message, linked to from other Web pages.
  • You have to change the code every time the background color changes.

The Microsoft issue

The second portion of the code mentioned above (mso-hide:all) deals with Microsoft Outlook, hiding the text in the Outlook email client. Without using that piece of code, the preheader will show in Outlook.

The problem is that some HTML editors “clean up” non-standard HTML (and that tag belongs to the category), removing the code.

The solution

The solution is to move that code to the head section of the page creating a CSS class, and then using the class in the BODY of the message.

So, in the HEAD section of the page you will have:

<style>
.preHeaderHide {display: none !important; mso-hide:all !important;}
</style>

And then in the BODY of the message:

<div class=”preHeaderHide” style=”display: none !important;”>This is a great newsletter that you can’t miss!</div>

… which invokes the CSS class to take care of MS Outlook, and still includes inline CSS for Gmail and other email clients that want inline CSS.

If you see any problems with this approach, let us know in the comments!

P.S.: see our initial post on using the preheader >

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

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

Read also

Email Preheader Best Practices

A guide to understanding email preheader - a small yet essential line of text that can boost open rates and consequently CTRs and conversions.  Email preheaders, ...

Read more

Email Checkup: Say Goodbye To Tiny Yet Fatal Technical Errors

One glance at checkup and you can discover the "health status" of your message, and identify how to remedy any critical issues. All this to ...

Read more

All about Valentine’s Day emails, from creativity to strategies

How to maximize the opportunities offered by Valentine's Day, with 6 different creative ideas and 6 strategies for increasing conversions. With Valentine's Day just around the ...

Read more

5 Effective Strategies for Event Reminder Emails

Event planning isn’t for the faint of heart. The most stressful part is also the most important: getting people to want to show up (in person or ...

Read more

Email Marketing for Tourism: A Strategy in 5 Steps

The so called Traveler Journey, in the Tourism industry, can be broken down into 5 micro-moments. Shape the perfect Email campaign for each and every ...

Read more

Improving Email CTR: 5 Ideas Worth Trying

It’s not a matter of setting out universal rules that work for everyone; instead, it’s about considering certain valuable perspectives from which you can analyze ...

Read more