How to Create a Perfect Email Preheader

A good email marketer should be able to optimize every single part of their email message displayed by email clients. We have already discussed how to get the most out of the subject line and email sender. Both of these elements contribute to the effectiveness of an email marketing campaign in terms of deliverability and open rates.

But there is a third element that must be considered and adjusted: the email preheader. Adding a good preheader to a email marketing campaign can make it more effective, increase open rates and bring in more business.

What is an email preheader?

You may know it as the “Johnson Box”, but no matter what you call it the preheader is the short summary text directly following the subject line when an email is viewed. The preheader is important because many mobile devices display the first line of text along with the subject line.

Why is email preheader so important?

Since the preheader is visible in all major desktop programs (Outlook..), web email (Google Gmail, Yahoo! Mail…) and mobile clients, it gives marketers a golden opportunity to get the word out and entice recipients. What you say in that one line can make the difference between the recipient eagerly opening the email and deleting it immediately.

If the preheader is dull and boring, for example things like “Trouble viewing this message? View it as a web page“, recipients are likely to delete it before they even read it, but if that one sentence is compelling, the viewer may read it immediately.

A great preheader is one of the best ways to boost your open rates and the effectiveness of your email marketing campaigns.

No matter what your marketing niche, it is important to optimize the preheader to make it more effective. You do not need to make your preheader obvious.  In fact, hiding it within your HTML code can make coding easier and more straightforward.

email preheader to be optmized

Email messages with ineffective email preheaders


adjusted email preheader

Email messages with optimized email preheader


The following tips can help you make the most of the preheader in every marketing campaign  you develop.

  • Understand that the first line of your text is critical. It is this text that will appear when recipients access their inboxes from smartphones, tablets and other mobile devices.
  • Know how to code the preheader properly. The preheader should convey the message of your email clearly and concisely.
  • Use the preheader text to summarize your offer in a way recipients can easily understand.
  • Keep things short and simple. Your recipients are busy, and they are probably looking through dozens of new emails every time they log on to their mobile devices.
  • Use left alignment for your preheader text. This will make the text easier to read, especially on mobile devices.
  • Use a standard easy to read font for your preheader text. Now is not the time to get too fancy.
  • Include a clear call to action in your preheader text. Link your call to action to your landing page.
  • Test your preheader text as you would any other part of your email. Try various A/B splits to see which preheaders have the best response and open rates.

Creating a custom email preheader

If you are ready to start experimenting with preheaders and testing your email marketing campaigns, you can use the following text to get started. Just adjust the following code to meet the needs of your own marketing campaigns. Customizing your preheader is a smart HTML practice, and this preheader example will help you get started (code courtesy of Github user kbav).


   /* ... */
    /*--- Preheader declaration in style block in addition to inline for Outlook */
    .preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }

  <!-- PRE-HEADER TEXT -->
  <span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS,, &amp; more: 75 text char limit</span>

Download SendBlaster FREE FREE Email Marketing eBook