{"id":488,"date":"2018-09-03T23:39:47","date_gmt":"2018-09-03T23:39:47","guid":{"rendered":"http:\/\/pauldipper.com\/?p=488"},"modified":"2018-10-07T11:46:17","modified_gmt":"2018-10-07T11:46:17","slug":"on-the-subject-of-preview-text-by-paul-dipper","status":"publish","type":"post","link":"http:\/\/pauldipper.com\/?p=488","title":{"rendered":"On The Subject of Preview Text
By Paul Dipper"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

What is Preview Text?<\/h3>\n

Preview Text is the first sentence or words from an email that are displayed in your inbox, under the Sender and Subject Line.<\/p>\n

The format in your inbox runs like so:<\/p>\n

Sender Name<\/h4>\n

Subject Line<\/strong><\/p>\n

Preview text<\/em><\/p>\n

\"\"<\/a><\/p>\n

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<\/em> isn’t really going to drive engagement.<\/p>\n

Now You See It, Now You Don’t<\/h3>\n

There are two ways to use the Preview Text:<\/p>\n

    \n
  1. Displayed in the email at the top<\/li>\n
  2. Hidden in the code<\/li>\n<\/ol>\n

    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)<\/p>\n

    Email Header example:<\/strong><\/p>\n

    Get the best offers available today<\/em><\/p>\n

    To view email online click here<\/em><\/p>\n

    Email HTML example:<\/strong><\/p>\n

    <body>
    \n<div class=\u201cpreview-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.\u00a0<\/div><\/p>\n

    <table width=”100%”>
    \n<tr>
    \n<td align=”center” valign=\u201ctop”>
    \nGet the best offers available today<\/strong>\u00a0<br>
    \nTo view email online<\/strong>\u00a0<a href=\u201c##\u201d>click here<\/strong><\/a>
    \n<\/td>
    \n<\/tr>
    \n<\/table>
    \n<\/body><\/p>\n

    Might look complicated, but what this clever piece of HTML does is bump the\u00a0view email online\u00a0text out of the inbox preview, like so:<\/p>\n

    Inbox results example:<\/h4>\n

    Sender\u00a0Name<\/strong><\/p>\n

    Subject Line\u00a0<\/strong><\/em><\/p>\n

    Welcome to the new online store. \u00a0Get the best offers available today.<\/em><\/p>\n

    The Preview Text Hack<\/h3>\n

    So everyone has their own inbox display preferences, and sometimes we don’t get the choice. \u00a0You could be displaying 1, 2, even 3 lines of preview text, or annoyingly all of it – it all depends on the email provider. \u00a0This could result in the above inbox example displaying text you don’t want your audience to see, i.e:<\/p>\n

    Sender\u00a0Name<\/strong><\/p>\n

    Subject Line\u00a0<\/strong><\/em><\/p>\n

    Welcome to the new online store. \u00a0Get the best offers available today. To view email online click here.<\/em><\/p>\n

     <\/p>\n

    But don’t worry, we have it covered. \u00a0There’s a little hack that can help with this:<\/p>\n

    &zwnj;&nbsp;<\/strong><\/p>\n

    No… I didn’t just fall on my keyboard and hit the keys at random. \u00a0This bizarre-looking strong of code stands for:<\/p>\n