Click to Sign Up for a 7 Day Free Trial!

Email Development

Tips for Coding Email Preheaders

Email On Acid

From a development perspective, preheader text is pretty easy to add to your campaigns. To start, you have one big choice to make: is the preheader text going to be visible to the recipient, or hidden? This is probably determined more by branding and the layout of your template(s) than anything else.

Visible preheader text

If you have some space above the email's header, maybe currently occupied with a "View in Browser" link, you can probably replace that with visible preheader text. Take a look at the example below to see what I mean.



As you can see, this is going to generate some pretty underwhelming preheader text. Having a recipient see "view with images" isn't the end of the world, but it's not the best use of this valuable space.




There's plenty of space in this layout to add in a preheader sentence on the left, or to replace the "view with images" link with visible preheader text.

I'm not going to cover how to code adding in visible preheader text, as that should be pretty simple. It's also easily managed in most email service provider WYSIWYG editors.

Hidden preheader text

There are a lot of designs that just won't accommodate visible preheader text, or it become undesirable for branding reasons. If you'd like to add hidden preheader text to your email, don't worry, it's not hard!

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;
           visibility:hidden;
           mso-hide:all;
           font-size:1px;
           color:#ffffff;
           line-height:1px;
           max-height:0px;
           max-width:0px;
           opacity:0;
           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.

One tip from my own personal experience: Don't put placeholder text here! You may want to add placeholder text for testing, but make sure to remove it after. The last thing you want is for an email to go out with "This is preheader text" as the actual preheader text… unless you are intentionally making a "This is Spinal Tap" reference. It's much better to have an email go out with no preheader text than with placeholder text.

Preheader character limits

Just how much preheader text should you include? We recommend 50-100 characters. Though some clients are capable of showing more than this, it's usually only under special circumstances (like a very wide browser window). Check out this chart to see the limits of some popular email clients.


Preheader Character Limits
Email Client Limit
iPhone (5S) 64
Gmail (Web Client) 100
Gmail (iOS Client, 5S) 34
iPad 5, Mail App 64
Android 4.4 97
Apple Mail 8 50-100
Outlook 2013 60-100
Outlook.com 124-236
Yahoo! Mail 135-202

Making the most of your preheader text

Now you know how to add preheader text to a template. If you're looking for more information on how to make the best use of preheader text, check out 5 Preheader Text Ideas to Increase Your Email Effectiveness.

Are you ready to start testing? Sign up for a free account today!





Have you found new or creative ways to implement preheader text? Let us know in the comments below.

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Hey Geoff,

I've seen some emails that adds a few more styles to what you already have:

width: 0px;
height: 0px;
position: absolute;
top: -9999px;

What do you think?
Even more bulletproof or too much?

Thanks!
Jerome Lacroix
Great post Geoff! I've been coding pre-header text this way for years. One word of caution: I wouldn't be surprised if very soon, inbox clients would be able to identify css variables like display:none or visibility:hidden... I personally steer away from them for that reason. Instead, I prefer to use an <h1> tag with a margin-top: -151px, font-size:1px and the color:#ffffff as you had as well. Why the <h1> tag? Seems to me that most obvious "sniffing" at least in the beginning, would be seeking or <div> tags so the <h1> could throw the algorithms off a little bit, although not for long I'm sure. Constantly varying between <h1><h2><h3> or even <h4> tags could add some variability to keep em' guessing. I personally stay away from the <div> or <td> tags, but that's just me... Anyway, again great post!
Jeff
Hi Geoff,

thanks for the post. What are the chances that an email with a preheader ends up in a spam folder?

Thanks,

Jaroslav
Jaroslav
Jaroslav,
I'm sorry, but we haven't done any testing on how preheaders affect spam scores. I have never heard of it causing a problem, so I think you should be safe. It's fairly standard practice to include.

If you want to be 100% sure, I would recommend testing some emails with and without preheaders and then comparing the amount of pass/fails they get.
Geoff Phillips
Very informative. I tried testing this and with Gmail and Yahoo desktop, it worked as advertised. However, with the iOS mail app, the test text did not display. Rather it was still the first sentence of the main body copy. Is there a way to make sure the text displays in iOS?
Neil R
Neil R,
I double checked and this code should work in iOS properly. It's possible that your sending service is making changes to your code that cause it to no longer work properly in iOS.
Geoff Phillips
Great article. Here is one thing that bothers me tho. Most ESP's (Mailchimp, Contactology) have their own special codes for preheader links. How can I or should I code a preheader that would be used universally, or should I just code a preheaderless email and allow the ESP to insert its own code (this is also true for Unsubscribe footers)
Greg Ledger
Greg,

Thanks for the kind words on the blog. We're glad you enjoyed it.

To answer your question, you should have some power to override preheader codes that ESP's generate. If you'd like more specific help, feel free to head over to our forums and we'll assist you with any issues you're having grin
Alex Ilhan
is it possible to give link to prehedaer text???
SonaliPawar
I think someone else might have already alluded to this, but I don't think it is possible to render preheader text when using certain email deployment platforms which insert a separate globally applied header link. Essentially, the code base for the header is not part of the email document and the content which precedes the link to view an online version of the email is what is ingested and presented as the preheader text. Very frustrating to say the least.
David Roberts
I am trying to use this on Sendy but it seems that if I enter it into the header then the preheater text does not show up on the email client snippet, if I place it into the body then Sendy changes it to visible text. Any ideas?!
Rob
Rob,
I would contact the team at Sendy about this issue. They may be able to help you!
Geoff Phillips
David Roberts, did you live in Rockville MD when you were a kid?
Glendon Flowers
I'm confused. I thought the preheader was something that included "View in Browser" code, and that the extra description in a Johnson box. So I'm not sure how to proceed. The Johnson box is a line right after the body tag and BEFORE the preheader (as I understand it) that show in the email client.
Greg
Greg,

You can choose to include View in Browser link in the preheader. In my experience, people generally refer to anything in this area as a preheader.

Cheers!
Alex Ilhan
Is it possible to code the preheader text so that only that text will show in the email client preview without automatically displaying the first lines of content right after?
Christine Strawsma

Leave a Comment