So you’ve created the perfect email. The HTML, CSS and design have all united together in a beautiful choreography, like a ballet dancer waiting to wow their audience. Now – the last thing you want is for your email’s inbox performance to display View Online or Unsubscribe links as the first act people see.
You need to make an impact in the inbox, enticing the receiver to open your email above all others, and not delete it in one foul swipe. “How do I do that?” I hear you cry. Fear not friend, Preview Text is your saviour.
What is Preview Text?
Preview Text is the first sentence or words from an email that are displayed in your inbox, under the Sender and Subject Line.
The format in your inbox runs like so:
Sender Name
Subject Line
Preview text
Most email providers, like Enabler, will let you control and customise the preview text that’s displayed in the inbox by allowing you to write your own sentence. This way you can ensure you grab the attention of your audience before they even open the email, by avoiding the appearance of default text in your Preview Text – because lets face it, View Email Online isn’t really going to drive engagement.
Now You See It, Now You Don’t
There are two ways to use the Preview Text:
-
Displayed in the email at the top
-
Hidden in the code
More commonly, the Preview Text is hidden away to work it’s magic in the background. If it’s displayed at the top or head of your email, it is referred to as a Preheader Text. Don’t worry, you can still use hidden Preview Text alongside your Preheader. If you set the Preview Text container above the Preheader in the HTML, it will appear first. This could help push down text you don’t want displayed (like that pesky View Email Online)
Email Header example:
Get the best offers available today
To view email online click here
Email HTML example:
<body>
<div class=“preview-text” style=”display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;”>Welcome to the new online store. </div>
<table width=”100%”>
<tr>
<td align=”center” valign=“top”>
Get the best offers available today <br>
To view email online <a href=“##”>click here</a>
</td>
</tr>
</table>
</body>
Might look complicated, but what this clever piece of HTML does is bump the view email online text out of the inbox preview, like so:
Inbox results example:
Sender Name
Subject Line
Welcome to the new online store. Get the best offers available today.
The Preview Text Hack
So everyone has their own inbox display preferences, and sometimes we don’t get the choice. You could be displaying 1, 2, even 3 lines of preview text, or annoyingly all of it – it all depends on the email provider. This could result in the above inbox example displaying text you don’t want your audience to see, i.e:
Sender Name
Subject Line
Welcome to the new online store. Get the best offers available today. To view email online click here.
But don’t worry, we have it covered. There’s a little hack that can help with this:
‌
No… I didn’t just fall on my keyboard and hit the keys at random. This bizarre-looking strong of code stands for:
-
Zero width non joiners, or ‌
-
Non breaking spaces, or
The idea is ‌ repeated will create white space after your preview text, effectively giving you an invisible buffer to bump down the unwanted copy from the Preview Text.
Example:
<div class=“preview-text” style=“display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;”>Wow that’s short…‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ Text you don’t want displayed</div>
The result, a beautifully tidy inbox display:
Sender Name
Subject Line
Wow that’s short…
Emojis in Email
😀 😃 😄 😁 😆 😅 😂
These little characters have been around since the late 90s on our mobile phones. In 2017, emojis have taken over our messages and have now stepped out of our mobile phones and onto the big screen with ‘Emoji Movie’. There’s even a World Emoji Day on July 17th.
Now, coming to a subject line near you, the emoji is finding it’s place within your email inbox.
Like in the example above, some companies are opting for the subject line emoji as it can help capture the audiences’ attention, plus it allows you to have a bit of fun with the wide selection of icons available.
However, like a lot of new ideas in email (for example video or GIFs), emojis are not accepted across the board, as they will render differently across different devices and email platforms. Emojis are built around Unicode which is a standard set of figures that will display different emojis, for example:
U+1F602 = 😂
U+1F60D = 😍
U+1F601 = 😁
(A full list of emoji icons and their codes can be found here)
If you are planning on using emojis in your subject lines, test before you send otherwise your hip looking emails might turn out looking a little square, as this ☐ icon will display if your emoji code can’t be recognised.
Roundup
A few more things to take into consideration when composing your Preview Text are:
-
Avoid letting the View Email Online into your Preview Text
-
Think of the Preview Text as a continuation of your Subject Line
-
Try some A/B testing with different Preview Text
-
Try not to repeat what is stated in the Subject Line
-
Test your Emojis
-
Try to use personalisation in your Subject Lines or Preview Text
-
Use the Subject Line or Preview Text to promote scrolling by referencing key points or articles lower down your email.
-
Be mindful of your character count – Preview Text can vary in different email clients and platforms, so don’t leave the best bits until the end.
Preview Text shouldn’t be an afterthought. These small techniques can help to improve your open and click-through rates, and show your email as being professional and well thought out.
So go ahead, try some different combinations of subject lines and preview text. Test, test, test those combinations, then sit back and watch the positive responses.
Well done! Your performance is complete and your audience is demanding encores!
