Hide unwanted text appearing in your email previews

Despite being called outdated by some, email marketing is still one of the most popular channels for promoting products and services. Not only is it extremely cost-effective, but it’s also a great channel to promote everything your business has to offer to those who are interested in your brand. Lots of things should be taken into consideration when it comes to creating an email campaign, with one of the most important aspects being the message that you’re wanting to get across. For this reason, lots of consideration should be put into the title and subject lines, as they are what a customer first sees when your email hits their inbox and creates the desire to open the communication. But what if sections of your email are unintentionally being displayed in these areas, instead of your desired headline? In this guide, we’ll show you how to ensure that your headline and title are displayed exactly how you want.

Some email clients (like Outlook and Gmail for example) get confused when interpreting your email’s content and figuring out how content should be displayed.

 

This is where preheader text from the email itself, can be pulled into the preview text, completely changing the structure of what you’d written up. Preheader text is usually the small print found at the very top of an email, which may ask the user if they’d like to open the email within their browser, instead of reading directly from their inbox. In order to display the desired subject and preview text within our email, we are going to use some code to create some imaginary space, pushing the preheader text out of sight, whilst simultaneously maintaining the exact same layout/design as before.

I know I’ve mentioned ‘code’, but do not let this put you off! All we’ll be doing is adding some pre-written HTML into the design of your email. To begin, open your email template/design with your email tool. In our case, we were using Mailchimp, but if you’re using something else, the principle remains very much the same.

Add a ‘code’ or ‘HTML’ block from the right-hand side of your email builder, and drop this at the top of your email, above the preheader text which is interfering with your current preview text.

 

Within this block, we’ll be adding some zero-width HTML which will basically create a large, coded gap between the preview text and the preheader text. The HTML you’d like would want to look something like this:

<!– Preheader white space hack –><div style=”display: none; max-height: 0px; overflow: hidden;”>&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp</div>

In this example, I’ve only used a small amount of code, although, in most instances, you’d need to repeat ‘&#847;&zwnj;&nbsp;’ quite a large amount in order to create enough space, to push your preheader text out of the way. I’d recommend looking at the articles Litmus & Almot have written on this, which explain the purpose of this code and why it’s important.

Once you’ve added this, we’d recommend saving your email and sending it to your own personal account as a test. We’d also recommend you view the email in various clients (Outlook, Gmail, etc.), and view the email on different devices with various screen sizes. Here you will see how email clients react to the space that you’d added, and you’ll be able to see if your desired preview text is on display as you’d originally intended. If you’re happy, save your email, and you should be good to go! If you use email templates, we’d recommend adding the code block to this, to save the work of adding the HTML manually, each time you write out an email.

As always, if you have any questions on this topic or email marketing in general, please feel free to send us an email at hello@purplerobot.co.uk, where we’d be happy to assist!