
Tips for Coding Email Preheaders
From an email development perspective, email preheader text is easy to add to your campaigns. It can also be an easy way to boost email engagement and increase email open rates.
The preheader text shows up next to or below the subject line in the inbox. Preheader text allows you an average of 50-100 characters to use in conjunction with your subject line to convince someone to open your email.
Being able to preview and test your subject line and preheader is a crucial part of the email QA process. Previewing allows you to see whether the preheader jives with the subject line and if the message is compelling enough to engage a subscriber. That’s why we have a preheader preview in our Campaign Precheck workflow. The preheader tool allows you to see your email’s subject line and preheader text in 15 of the most popular email clients, so you can optimize your email for the inbox and boost email marketing ROI.
To start, you have one big choice to make: Is the preheader text going to be visible to the recipient, or hidden? Your branding and the layout of your template will probably determine this more than anything else.
Visible Email Preheader Text
If you have some space above the email’s header (maybe occupied with a “view in browser” link), you can probably insert some visible preheader text. Take a look at the example below:
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 a preheader sentence on the left, or to replace the “view with images” link with visible preheader text.
Hidden Email Preheader Text
There are a lot of designs that won’t accommodate visible preheader text, or the text doesn’t fit with the brand template. If you’d like to add hidden preheader text to your email, don’t worry, it’s not difficult!
To start, you’ll want to pick a place where the preheader text won’t cause issues in your layout. Usually, the text will take up no more than one pixel of vertical space, but in some cases, a small preheader can bump content down. If you’re putting the preheader text into an existing header, you may want to put it in a row by itself, so if any content below is moved it will all move 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, the above code hides the preheader in several ways. Many of these are fallbacks for clients that don’t recognize or play nice with some of the other styles in the list.
One additional tip: Don’t forget to remove your placeholder text. You may use placeholder text for testing, but make sure to replace it with the real preheader text before you send. The last thing you want is for an email to go out with “This is preheader text” as the actual preheader text.
With Campaign Precheck’s preheader preview tool, you’ll be able to catch any problems with your preheader text before you send a campaign, including any placeholder text you may forget to remove. Use the tool to preview your preheader and subject line on 15 of the most popular email clients.
Email Preheader Character Limits
How much preheader text should you include? We recommend 40-100 characters. Although some desktop and webmail clients can show more than 100 characters, many mobile devices average 35-50 characters. If most of your subscribers are on mobile, keep this mind.
It’s also important to note that many webmail clients will vary the preheader text length depending on the subject line length and the width of the browser window.
One other factor to consider with preheader length: Users who are having Siri read their email will hear the first 499 characters of your email. If you’re testing out auditory calls-to-action or want to see how your Siri users interact with your email, consider testing out some longer preheaders.
Making the Most of Your Preheader Text
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 your email preheaders? Sign up for a free trial and check out Campaign Precheck’s new preheader preview tool!
Have you found new or creative ways to use preheader text? Let us know in the comments below.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
16 thoughts on “Tips for Coding Email Preheaders”
Comments are closed.
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!
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,
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.
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,
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.
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,
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 🙂
is it possible to give link to prehedaer text???
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.
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,
I would contact the team at Sendy about this issue. They may be able to help you!
David Roberts, did you live in Rockville MD when you were a kid?
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,
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!
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?
Do you recommend using symbols (e.g. circle-R registration mark) in a Johnson Box, er, preheader?