A practical guide to preheaders

When optimizing HTML email for mobile, it’s really easy to get overwhelmed by the CSS trickery and technical stuff and simply put it all in the too-hard basket. But the truth is that some of the most effective techniques are also fairly simple - such as adding a good preheader to your campaign.

A preheader (otherwise known as a ‘Johnson Box’, haw haw) is the the short summary text that follows the subject line when an email is viewed in the inbox. Many mobile, desktop and web email clients provide them to tip you off on what the email contains, before you open it. Here’s an example in Gmail:

Preheader in Gmail

Generally this line of text (in this case, ‘Wishing you a safe and merry holiday season!’) is borrowed from the first text found in the email campaign. On mobile clients in particular, the preheader can mean the difference between someone opening your email and archiving it - so you generally want it to be something meaningful. Like a summary of your offer, not your campaign’s webversion message or the remnants of social sharing links. Because believe it or not, they work. From our friend, Elliott Ross:

“In my experience we’ve implemented it (preheaders) on a number of campaigns and it’s raised open rates, click thrus and reduced spam complaints.”
- “The Perfect Email Preheader/Johnson Box”, Email Design Review

A lot of designers make their preheaders very visible by adding a short summary to the very top of their designs, but personally, I like to hide my preheaders and forget about them altogether. Lets go through the nitty gritty of how to do this.

Adding a preheader to an email campaign

The first thing to ask is if you have to worry about a preheader at all. For instance, if your email already cuts to the chase and the first text that appears does a good job of summarizing what’s to follow, then you may not have to add one. But for the rest of us, a little bit of text just after the <body> tag in your HTML email code usually suffices:

<body><span>Wishing you a safe and merry holiday season!</span>... 

If you’re like many senders that add a nice visible summary, you can stop here and style it up all you like. But as I mentioned earlier, I prefer to hide mine:

<!-- Hiding the preheader -->
<
style type="text/css">
span.preheader { displaynone !important}
</style>
</
head>

<
body><span class="preheader">Wishing you a safe and merry holiday season!</span>... 

The above still displays in Lotus Notes - if this is an issue, try adding font-size:1px; to the .preheader styles, and/or using the same color for both the text and background.

Automatically adding a meaningful preheader with our email editor

The major downsides to using the above preheader technique are:

  1. It’s easy to forget to update the preheader text
  2. When using templates, customizing the preheader for each campaign is a lot of hassle

Cool customer Mark Shingleton came up with an ingenious way to ensure the preheader in his campaigns looks good each time - adding a table of contents to the top using our template tag language:

Creative Space email

Not everyone can make the design decision to place a table of contents at the top of their campaigns, however if you or your clients are using the email editor to build campaigns, you can use the text that is automatically generated by a combination of repeatertitle="true" on headings and <tableofcontents> in our template language to fill the <span> tags we were using earlier:

<style type="text/css">
span.preheader { displaynone !important}
</style>
</
head>

<
body><span class="preheader"><tableofcontents><repeatertitle></repeatertitle> | </tableofcontents></span>...

<
repeater>
   <
layout label="Article">
      <
singleline label="Header" repeatertitle="true">Your header here</singleline>...
   </
layout>
</
repeater> ... 

Preheader on the iPhone

What you’ll end up with is a preheader consisting of headings from the articles in your email campaign (pictured).

The beauty of this is that it’s totally set-and-forget - your clients can take a template and add articles in the email editor, while being totally oblivious to the whole preheader thing. But the downside is that you can only add one table of contents to your campaign (sorry!), so you either feature one in your design, or use it for the preheader.

Update: It turns out that we posted about an alternative method for adding preheaders - using the alt attribute in a 1x1px image - back in 2006. You can’t use this method to autofill the preheader with template tags, but if you’re manually adding one, check it out.

Now, I’d love to know how you use preheaders - are they important to you? Do you have a particular technique that you use in your email campaigns and templates? Let us know in the comments below.

Posted by Ros Hodgekiss

26 Comments

  • B. Moore
    15th December

    From my testing the preheader is the very 1st line of text in the plaint text half of an multipart html email.

  • James
    16th December

    Great post. I’ve been including hidden preheaders in my emails for a long time. I just never called them preheaders, I use to call them “Autopreviews”. But their preheaders now!

    I’ll need to test what B. Moore just brought up.

  • Brian Sisolak
    16th December

    In multipart messages the pre-header in the text version is what displays in Comcast, iPhones, and Outlook Desktop notifications.

  • Ros Hodgekiss
    16th December

    @B. Moore @Brian Sisolak - That’s really curious! I tested a multipart email with a differing text version/preheader in iPhone Mail and Gmail and in both instances, the preheader of the HTML version displayed as preheader in the inbox. I’ll continue testing this, though, thanks for letting me know!

    Note that when using templates, the text version gets refreshed after changes in the editor (just as it gets generated when importing a campaign). In both instances, the preheader in the HTML version appears as the first line of the text version. So at least we have that base covered, phew! :D

  • Craig
    16th December

    Why all the anchor styling CSS in the first example? There’s no anchor tag in the span.

  • Elliot Ross
    16th December

    thanks for the shout Ros!

    we always have a bit of a team dare to call it a johnson box infront of a client..

  • Ros Hodgekiss
    16th December

    @Craig - Ah, good catch, just stripped them from the first example. The styles were for the example after that, where the <tableofcontents> tags add a list of anchor links to the <span>. Thanks for spotting that!

    @Elliot - Gee, I sure wish I had the opportunity to do it now… With a straight face ;) Thanks for the great post on preheaders, it was a huge help!

  • Justin
    17th December

    Genius!  So simple yet always forgotten or ignored.  Great article and simple way to implement the preheader.  Definitely going to be using this for all my clients in the future.

  • Peter Wagner
    17th December

    This is an excellent tip. Any chance you can add support for multiple Tables of Contents per campaign? This way we could instantly add this to existing designs that aren’t using the Table of Contents at the very top…

  • Katie Blackman
    17th December

    A great idea. As a start, you’d probably want to steer clear from repeating yourself with the same subject line as the header (preheader) of your email…something I’ve never considered before. Is there a way to see what the preheader will say other than sending yourself a test email? Just curious. Very useful tip. Thanks Ros!

  • Fanny
    18th December

    “display:none !important;” works for gmail :-)

  • Ros Hodgekiss
    19th December

    @Katie Blackman - At present, sending a test email is the only way to check. The most efficient way I’ve found is to send to a Gmail account :)

    @Fanny - Very interesting! I’ll test this out - would be a real joy if the !important does the trick in Gmail! :D

  • Jakob Tischler
    20th December

    I like how this works on regular desktop/browser mail apps. I noticed though, when opening the email in Android’s gMail client, the .preheader span is actually visible (i.e. ‘color’, ‘font-size’, ‘opacity’ aren’t applied). Any ideas?

    I couldn’t test it on other devices, for the simple fact that I don’t have any… :)

  • Ros Hodgekiss
    20th December

    @Jakob - Thanks to Fanny’s suggestion, I’ve just simplified the code to hide the preheader using span.preheader { display: none !important; }. This works in all email clients except Lotus Notes (see updated post above). Let me know if you come across any issues with this.

    @Fanny - You are a legend. Who knew that display: none !important; could be so great?

    @Peter - I’ve happily added your vote for this and keep you posted - we may slip it into a future update.

  • Mark Shingleton
    22nd December

    Hey Ros, thanks for the mention! I can’t claim complete originality for that thought. it was inspired by one of your earlier email designs ;)

  • Uffe
    23rd December

    Wouldn’t it be safer to use <span !important;”>?

    I’m referring to your guide to css support in email. According to that, the <style> element in <head> isn’t supported by Gmail.

  • David Padilla
    24th December

    It’s also a good practice to keep your pre-headers at an optimal amount of characters. Average email clients display roughly 75 text characters (including spaces) in the pre-header. If your pre-header will go beyond 75 characters, try to include the ‘meat & potatoes’ within the first 75.

  • Rick Molenaar
    3rd January

    I always use preheaders but i just place a new table above my newsletter and style the text but give it the color as the background. Does the css work in gmail, because this usually does not work.

  • Ros Hodgekiss
    3rd January

    @Uffe - Sorry, I should have been more clear in the post - it’s okay to add this to the head, as long as you inline your styles before sending. The Campaign Monitor app does this by default (which is great), so I was being a little presumptuous there :P

    @David Padilla - Thanks for the great tip! I’ll be sure to pass this on and use it in the future. :D

    @Rick Molenaar - Yes, this is also a great approach. The CSS does work, as long as you inline your styles before sending, as per my comment to Uffe above.

    Thanks for the great comments, everyone - hope you’re all having an awesome 2012! :D

  • Bram
    6th January

    Hey Ros, thnx, but could you explain or give example about : CSS does work, as long as you inline your styles before sending

  • Chris
    6th January

    No concern that hidden fields in a message could lead to a higher spam score?

  • Ros Hodgekiss
    6th January

    @Bram, a few email clients like Gmail either strip, or ignore styles in the head of an HTML email. If you don’t inline your styles on import into our app, or use a tool like Premailer, then any CSS in the head won’t work in these clients.

    @Chris, at present we haven’t come across any apparent spam issues when using this method. Our last newsletter contained this technique and went out to 130k recipients without incident. We’ll keep our eyes on future results, though!

  • James
    10th January

    A note about the alt tag method you linked to here: http://www.campaignmonitor.com/blog/post/1842/optimizing-for-gmails-snippets/

    From what I can tell, iOS ignores alt text when determining what to use as the preview.

  • Ros Hodgekiss
    10th January

    Thanks for the update, James! I’m pretty certain you’re right about this - I’ve updated the post accordingly. Many thanks!

  • Jop Berkhout
    9th February

    To all coding guys and girls: I’ve tried the method as described above and it seems to work in all off my clients (Gmail, iPad, etc) except in my Outlook 2011 (Mac). I’ve uploaded an image to my it clear: http://upload.qaraqter.nl/op/preheader-fail.png

    Outlook grabs the tag <#toc_item_0>, <#toc_item_1>, ie, generated by the editor and shows it in the preheader. Does anybody know how to prevent this? Thanks in advance!

  • Ros Hodgekiss
    9th February

    Hi Jop, could you kindly check if these <#toc_item_0> are being pulled from the plain-text version of your campaign? Also, that your headers have repeatertitle=‘true’ applied to them? Admittedly we haven’t come across this issue before, so if you could check this and get in touch with our team, we’ll certainly look into why this is the case. Thank you!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account