January 16, 2016
So you’ve spent hours lovingly crafting your latest HTML email campaign and now you’re ready to see what it looks like in your email client. You’ve sent the test massage to your email address, fired up your email client of choice and now you’re sitting there anxiously hitting Refresh until it arrives in your inbox. You’ve taken care to make sure your email will avoid spam traps. Refresh. You’ve painstakingly agonised over the layout of your email so it will display nicely on desktop and mobile devices alike. Refresh. You and your colleagues have collaborated to engineer the perfect pithy subject line.Refresh, Refresh, Refresh! Finally, the test appears into view in your inbox and there you get the first glimpse of all your hard graft. As you scan your eyes across the new entry in your inbox, you can’t help but notice that tacked onto the end of the subject line there seems to be what looks like an extract from the email itself that reads “Does this email not display correctly? View it in a browser”. You think to yourself “Well that’s not very pithy is it?” No... it isn’t. What you’re seeing is what’s referred to as a ‘Pre-header’. It can also be referred to as a ‘Johnson box’ (steady now!) and sometimes even as a ‘Super Subject Line’ (Having said that, no one I know calls it anything other than a Pre-header, so that’s how I’m going to label it). To explain a little, a pre-header is the short extract or summary that follows the subject to give readers an insight into what might lie within the email. Email clients such as Gmail will take the first line of content from your email and display it after the subject line in the inbox. In most email cases the first line of an HTML email are usually along the lines of “Having trouble viewing this email?...” or “To ensure this doesn’t go into your junk folder, please add us to your whitelist...”, or something equally uninspiring.
Without adding a Pre-header, you’re missing an additional opportunity to sell your email content to the reader.
Whilst it’s important to have links to your online version, unsubscribe or whitelisting information at the very top of your email, none of which are particularly exciting phrases that you’d want to see before you’ve even opened the email. “Well, what do you suggest then?” I hear you ask. Why not use this opportunity to promote your email content a little more? Just by adding an additional line of copy to the very top of your email above the online version/whitelisting copy, you can give your readers a taste of what amazing offers, stories, or information that awaits them in your newsletters!
Advantages of Pre-headers
As mentioned above, the Pre-header can add to you subject line and give you an opportunity to tell the reader what’s inside the email when it’s sitting in their inbox. A good Pre-header can convince a reader to stop and take a look as they are scanning through there emails. A Pre-header also gives an opportunity to get the main message of your email into the preview pane of your reader’s email client so they can see what the main offering is as soon as possible. If your email is more image-based then Pre-headers will ensure that there is readable content in those instances when email clients have images disable.
Adding a Pre-header
Adding a basic Pre-header to your email code is simple. All you need to do is to add a little bit of text to the very top of your email, right after the <body> in your HTML:
<body> <span>Here is an example of Pre-header text</span>
And that’s it; you can style the text however you wish within your email. If you want to get a bit more intricate with the styling and content, then I like to add Pre-headers in a stand out section that contains all the important information that we like to add to the top of an email.
To create the above, I added the following code to the top of my HTML email:
<table width="100%" style="background-color:#333333" border="0" cellspacing="0" cellpadding="5" align="center"> <tr> <td align="center"> <table width="620" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;">
Want to win a free T-Shirt? Check out this month's competition!<br />
<a style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;" href="[online link]">Not displaying correctly? View it online</a> | <a style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;" href="[forward to friend link]">Forward to a friend</a> | <a style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;" href="[unsubscribe link]">Uncsubscribe</a><br />
To ensure this email goes straight to your inbox in future, please add ‘[[email protected]]’ to your safe sender list.
</td> </tr> </table> </td> </tr> </table>
This code adds a full width table to your email with a dark background. Inside that there’s a table that is the width of the email content that contains the Pre-header text with the online version, unsubscribe, and forward to friend links, as well as the whitelisting information.
Things to keep in mind
Don’t look to use the subject line in this space as it will be repeated in the tray of your inbox and that’ll just look plain odd. Instead, think about how the subject line and the pre-header could work together. Try to keep the pre-header short and to the point, ideally 20 words or less to sum up the main offer or article. An idea may be to use personalisation in there to really grab the reader’s attention. In desktop email clients such as Outlook, the Pre-header is taken from the first line of the plain text version if you are sending a multi part email, so it’s worth adding Pre-header text to that version too.
Posted by Steve Bossons
Line height is not always consistent when viewing emails in Outlook. This is especially true…
March 1, 2017
If you use an Email Service Provider, you now get some pretty powerful technology alongside…
February 10, 2017