Blog

A practical guide to preheaders

December 16, 2011

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 { display: none !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:

It's easy to forget to update the preheader text
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:

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 { display: none !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 in: Tips & Resources

27 Comments

B. Moore
December 16, 2011 10:57am

From my testing the preheader is the very 1st line of text in the plaint text half of an multipart html email.
James
December 16, 2011 4:55pm

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
December 16, 2011 10:26pm

In multipart messages the pre-header in the text version is what displays in Comcast, iPhones, and Outlook Desktop notifications.
Ros Hodgekiss
December 17, 2011 1:24am

@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
December 17, 2011 2:26am

Why all the anchor styling CSS in the first example? There’s no anchor tag in the span.
Elliot Ross
December 17, 2011 2:34am

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
December 17, 2011 2:43am

@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
December 17, 2011 6:38pm

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
December 17, 2011 7:33pm

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
December 17, 2011 7:55pm

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
December 18, 2011 9:05pm

“display:none !important;” works for gmail :-)
Ros Hodgekiss
December 20, 2011 2:13am

@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
December 20, 2011 11:12pm

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
December 21, 2011 5:54am

@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
December 23, 2011 9:04am

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
December 23, 2011 2:21pm

Wouldn’t it be safer to use <span style=“display:none !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
December 24, 2011 7:41pm

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
January 3, 2012 6:02pm

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
January 4, 2012 4:22am

@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
January 6, 2012 5:39pm

Hey Ros, thnx, but could you explain or give example about : CSS does work, as long as you inline your styles before sending
Chris
January 6, 2012 6:09pm

No concern that hidden fields in a message could lead to a higher spam score?
Ros Hodgekiss
January 7, 2012 3:30am

@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
January 10, 2012 5:28pm

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
January 11, 2012 3:29am

Thanks for the update, James! I’m pretty certain you’re right about this - I’ve updated the post accordingly. Many thanks!
Jop Berkhout
February 9, 2012 8:51pm

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
February 10, 2012 6:10am

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!
Mark Kennerley
February 16, 2012 7:01pm

I am also having the same issue as Jop on Outlook on a Mac.

I have had a look at the plainText preview within the Campaign Monitor system of the same email and the header is nice and clean as you would expect.

For some reason it looks like the html tags for the ‘toc’ are being rendered. Apart from that its top.

Comments for this entry are closed.

Browse the Blog

Explore the Email Gallery

Beautiful! “@cameronmoll: Email successfully @CampaignMonitor‘d:” http://t.co/KbrfnS1a ^RH

Single-click testing

See screenshots of your email in 20+ email clients and check against spam filters.
Powerful API

Interact and “sync” with your account via simple web-based methods.
Not just good looks

Track every aspect of your campaigns like opens, clicks, forwards, sales and more.