fbpx

Format your email preview with this trick!

The role of email previewing in email clients is very important. It is extremely useful for all email mailers to take advantage of the preview mode to persuade recipients that their message is worth opening and reading.

But it is difficult to handle it properly because management programs get as many characters as they need to complete the preview. So we have two options:

     

  1. Get great text for preview, but risk cutting it to a point where we do not want to create unwanted results.
  2.  

  3. Let’s have small text, so in this case it will automatically fill the void with text not optimized by us or unnecessary links.

 

However, there is also a less-known third solution:

It is possible to create blank characters after the desired preview text, so we do not have the problem described above with auto-filling in content that we do not want.

The way is simple: We add zero-width joints (& zwnj;) and blank characters (& nbsp;) after the preview text. Our code will fill the remaining gap.

See the code below:

<div style=”display: none; max-height: 0px; overflow: hidden;”>
Preview text goes here </div>
<!– Insert &zwnj;&nbsp; hack after hidden preview text –>
<div style=”display: none; max-height: 0px; overflow: hidden;”>
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp; </div>

Add it to the HTML code of the email at the top. In the Emailsystem this is done using the < > (source code) on the right side of the copywriter.

This trick works in all e-mail programs. Here’s a sample of how it looks in Gmail:

 

Before sending your newsletter, do a lot of testing on different email clients to see how it is displayed. Do not leave the preview at random but optimize it for best results in your campaigns (increasing opening rate).

Leave a Reply

Your email address will not be published. Required fields are marked *