Pre-header in Campaign Monitor's May newsletter

I noticed that in May's newsletter there are links to the web version and to social media at the top of the email, how have they made so that this text doesn't show up in the pop-up notifications that are seen in popular email clients?

Usually clients like outlook, gmail, apple mail etc.. will take the first line or two of the email and display this information the user as a preview or popup.

I've lost count of the amount of emails I receive from people would really should know better,  where the outlook popup reads "Can't see this email..blah blah... unsubscribe.."

In my emails I've moved traditional pre-header information to the footer, and include a marketing message in it's place.

This is the campaign I'm talking about - … 07EBCCB890

How's it done?

JohnP JohnP, 4 years ago

The "Web version | Update preferences..." shows up in my Gmail snippet.

If you look at the email code you will notice there is a hidden span with class="preheader". Even though this span is hidden, it is the first content in the email, positioned right before the web version etc. It is quite a clever trick as email client popup/snippets still pick that content up and display it (except Gmail for some reason).

Mr-Mark, 4 years ago

If you look at the source code there is a span above the table containing the web content etc.
The first line of text is - New guide: Landing in the inbox
The span has


on it to hide it from view but not from pre-header.

Not sure how well this is supported, I'm guessing from what JohnP says Gmail ignores the display none in the snippet.

<!--[if gte mso 9]>
    Get a  better email client
roshodgekiss roshodgekiss, 4 years ago

Hey folks, just to confirm, we're using this Table of Contents preheader technique in our email newsletters. JohnP and Mr-Mark, you're on the money :)

Get in touch with us on Twitter:
We're also on Facebook:
carl.michael, 4 years ago

Thanks. I never thought of hiding using display none for this purpose.

The only thing I would say is that it clients or colleagues who are adding content to an email in a wysiwyg editor are unlikely to be able to edit this text (as teh editor will hide it).

Still, it's a great technique for emails where the popup message will always be the same.

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free