So your email design looks beautiful, you’ve spent hours on the email copy and you’ve nailed the subject line.
All that’s left to do is to hit send and it’s job done, feet-up for the afternoon.
But wait… don’t forget about setting email preview text!
Not heard of email preview text before?
It’s been around for a while now so even if you’re not familiar with the term it’s likely something you’ve seen in emails you’ve received, especially from retailers.
Another name is pre-header text but either way, it’s a short piece of text content that gets displayed below the subject line in the inbox.
Email preview text content is hidden in the email body and, aside from making things look nicer, it’s main objectives are to help your message to stand-out in the inbox, increase the number of people that open your email and decrease the amount of emails that get instantly deleted.
How emails look without email preview text
When email preview text isn’t set, what gets displayed underneath the subject line is decided by the mail application (iOS, Mac Mail, Outlook etc.)
The mail application will sniff the content and decide whatever it thinks to be the first piece of text then use that – and generally, it won’t do a very good job.
So what you end up with is something like this…
It’s not too bad but what Gmail has done here is to include the content that tells you to view the online version along with a few characters from the ‘Please add blah..’ to your address book.
Compared with using email preview text
Email preview text removes the decision from the email app allowing you to forceable set the text that you want to appear.
Meaning you can create a more captivating message and offer a more elegant appearance.
Setting email preview text
There are two ways to set email preview text using Instiller (and it’s going to be similar in other ESPs).
Drag & drop editor
The easiest way is setting email preview text visually using the drag & drop editor. There’s no coding and all you need to do is add the content and the rest is taken care of.
HTML coding
Even if you don’t consider yourself to be an email coder you can still use this approach as it’s pretty much a cut, copy & paste exercise.
Insert this entire block inside the <body> tag and change ‘The ultimate everyday supercar’ to be whatever you want it to be.
<!-- Hidden email preview text that displays underneath the object line in the inbox --> <div style="display: none; max-height: 0px; max-width: 0px; overflow: hidden; opacity: 0; font-size: 1px; line-height: 1px; z-index: 18;">The ultimate everyday supercar</div>
If your email preview text is a little short you’ll find that the next piece of text content in the email gets added to the end but there’s a work-around for that.
Try adding this second hidden <div> containing pairs of ‌ (non-breaking space and zero-width non-joiner).
It’s a bit of an inexact science meaning you will need to play around with adding more ‌ pairs to fit your needs – but you can easily work that out by sending yourself a test email.
<!-- Pad out hidden spaces after preview text to stop other text being added to the end --> <div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
Some apps still do not support email preview text
Nothing new here in that some email apps support the feature and others don’t.
Pretty much all of the major email apps support email preview text but again, it comes down to testing and Litmus have put together this post that contains a list of apps which do and don’t have support.
Optimise and test everything
Using email preview text is just one simple method for refining and optimising email campaign performance and if this has got you thinking about what else you can do then take a look over here where we talk more about personalisation, subject lines and dynamic content.
Email marketing for agencies
Want to see what Instiller can do for your agency? Take a free and unlimited trial today or book in a live demo and we’ll walk you through our features.