Tips for Coding Email Preheaders
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|
|Gmail (Web Client)||100|
|Gmail (iOS Client, 5S)||34|
|iPad 5, Mail App||64|
|Apple Mail 8||50-100|
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.