Browse by...
Home Resources Blog

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:

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 web version 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-throughs 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. 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:

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

Get our guide to designing high-performing email campaigns and make every email a success

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

 

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

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free