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’) is 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:

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 web version message or the remnants of social sharing links. Because believe it or not, they work. From our friend, Elliott Ross:

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. Let’s 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:

Automatically adding a meaningful preheader with our email editor

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:

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.

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

James

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

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

Ros Hodgekiss

@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

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

Elliot Ross

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

@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 . 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

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

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

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

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

Ros Hodgekiss

@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

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

@Jakob – Thanks to Fanny’s suggestion, I’ve just simplified the code to hide the preheader using span.preheader &#123 display: none !important; &#125. 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

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

Wouldn’t it be safer to use ?

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

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

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

@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

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

Chris

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

Ros Hodgekiss

@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 [url=http://premailer.dialect.ca/]Premailer[/url], 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!

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

Ros Hodgekiss

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

Jop Berkhout

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

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!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.

You should also check out this other helpful content.

Guide

The Modern Guidebook to Email Marketing

Get helpful and actionable tips to be a better email marketer today.

Infographic

5 Emails Every Marketer Should Send

Discover the five emails every marketer should send.

Guide

50 Must-Have Content Ideas for Your Email Newsletter

Get 50 awesome content ideas for your email newsletter.

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.