Pre-header

Chris Schwartz 2 · October 2015

At a recent webinar, Danielle suggested that we make better use of the pre-header space to motivate people to open our emails. How do we adjust the copy in the pre-header?

Jesse Kelsey · October 2015

Include something like the following html at the top of the message body. Many older email clients will ignore this, and most mobile devices will display this text as a pre-header.

Include a short preheader here.

Include a short preheader here.

Erik Leaver · October 2015

The folks at Email on Acid just wrote a great blog on Tips for formatting email preheaders:

https://www.emailonacid.com/blog/article/email-development/tips-for-coding-email-preheaders/

Here's the impt part (but there's also great tips about preheader length in the article):

To begin with, you'll want to pick a place where the preheader text won't cause issues in your layout. Usually the text will take up, at most, one pixel of vertical space, but in some cases this can bump down content. If you're putting the preheader text into an existing header, you may want to give it a row to itself, so that if any content below is moved, it will all be moved the same amount.

To hide the text, you'll want to include the following inline styles:
<td style="display:none !important; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visibility:hidden; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mso-hide:all; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:1px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:#ffffff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height:1px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max-height:0px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max-width:0px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity:0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:hidden;"> This is preheader text. </td>
As you can see, I have hidden the text in a multitude of ways. Many of these are fallbacks for clients that don't recognize or play nicely with some of the other styles in the list.

Chris Bailey · October 2015

Been noodling on this question as well. Is this code intended to live in the message body or is there a way to plug it into the stationary so it always resides there, but can still be customized per email message?

Jesse Kelsey · October 2015

@Chris,

It's probably possible to add it in the stationery--the preheader just needs to contain the first bit of text that an email client can read within the <body> section of the HTML email. In the case of Luminate stationery, the "HTML" section of the stationery is analagous to the <body> section of the HTML document that is ultimately delivered to the email client, so you could include the preheader in the HTML section of the stationery as long as it is included before the Luminate message placeholder tag ( [[S63:2]] ). Screenshot attached. This would work well enough if the pre-header should stay the same for messages that utilize the stationery.

-Jesse

Brian Mucha · October 2015

Chris Bailey:

Been noodling on this question as well. Is this code intended to live in the message body or is there a way to plug it into the stationary so it always resides there, but can still be customized per email message?

I don't think there is a way to have this element in the stationary AND be customizable from the message.

We do use session variables for this sort of thing (which you set with the s-tag U0 and render with S80.) However, since the pre-header in the stationary will appear before the session variable is set in the message body, this won't work here. You have to set the session variable before reading it - according the order in which they appear in the email's complete html code.

We've been doing preheaders for a year or so, and that was one of the first things we wanted to do.

We also don't hide the preheader. It's just a visible bar across the top of the message. Never occured to me that this was an option.

Brian Mucha · October 2015

I assume that the webinar explained why preheader are a good idea in general? Outlook and many other clients show the sender, subject, and then the first line of body text. We started adding our preheader when we noticed our emails (and many other org's) showing up like this:

Lurie Children's Please give to Circle of Friends and support kids! Wed 10/28/2015 3:21 PM

To unsubscribe from this email click here.

Hmm, that sure isn't ideal!

So the preheader should work with the subject, and not simply repeat it.

Glad to see this concept is gaining traction. I've had to argue for it many times, even with consultants that 'specialize' in email design. (Right along with arguing against dumb stuff like all-image emails and non mobile-friendly designs. Both of which everyone wants to do.)

Erik Leaver · October 2015

That is the trickiest thing. My work around is to use a blank template and then to import html code with a customized preheader each time I create a new email. It's not ideal for sure for orgs that have users that depend on using templates.

Brian Mucha · October 2015

What if there was a 'preheader' field on the message configuration, that could be rendered with an S-Tag?

Heck, if we could get that what if it was just 5 custom fields we could use for whatever? That could be handy for stationary.

Ryan O'Keefe · November 2015

Brian Mucha:

What if there was a 'preheader' field on the message configuration, that could be rendered with an S-Tag?

Heck, if we could get that what if it was just 5 custom fields we could use for whatever? That could be handy for stationary.

I agree Brian.

This would be best in the message configuration process. That way it could be customized per message. I've relayed this message to the Product Managers, but would also be good to put in the ideas portal.

Two ways that I've gone about it.

1. Put the pre-header text in your stationery, but you will have to update it every time before you send out a message. Not to overly difficult, just includes an extra step.

2. Use the blank stationery like Erik mentioned above. Then add all the html to the message body. Not ideal for those non-technical folks, but works on a message by message basis.

On a separate note, I've also been testing out gmail actions. It's becoming clear that gmail is trying to get users to take action before they even open email. This isn't ideal for open rates, but it's pretty slick way to get users who are less likely to read email but take some action quickly.

Here's more info on gmail actions: https://developers.google.com/gmail/markup/reference/one-click-action

Think this could be useful around End of the Year.

JP Provencal · November 2015

I just created the request in the Ideas portal.

https://luminateonline.ideas.aha.io/ideas/LUM-I-538

Go Vote!

Chris Bailey · November 2015

Fantastic. Gave it a vote.

Greg Sims · November 2015

This would be hugely helpful. Just gave it a vote as well. Our solution has been to use a blank stationery as well and code everything, pre-header included, into the HTML body of the message. But we're only able to do that because our direct response vendor codes the messages for us. Don't have the in-house expertise to do so. So making this a part of the email configuration process would make my life so much easier!

Liz Pomper · November 2015

I agree and voted as well. I also use blank stationary and code the pre-header myself, but I support a number of administrators who prefer to use set stationary, and this would be a nice feature.

Pre-header

Comments

Categories