Hidden preheaders – save screen real estate


There’s been a lot of talk recently about mobile emails. Specifically subject line length, preheaders and how to leverage them both for maximum results. Subject line length varies across mobile devices, as highlighted in this excellent infographic from Mass Transmit, but the one thing that’s for sure is the amount of characters you can use is a lot less than a traditional desktop-orientated email.

This is where the power of the preheader comes in, it allows you to continue your subject line and provides you with an extra chance to entice readers into opening your email. Here’s a random snapshot of my mobile inbox and how five random emails have setup their preheaders:


The negative side to preheaders is the valuable real estate they take up on the screen. For this post I’m going to be using the free mobile optimised template I created as an example. Below is a side-by-side comparison to how both the desktop and mobile version of the email look with and without the preheader.



Although the difference isn’t huge, it still takes up screen real estate.

A workaround

So, if you would like to use preheaders as a continuation from your subject line but don’t want them taking up space, the solution is simple.

Add this to your area:

<style type="text/css">
span.preheader { display: none !important; }

And set your preheader up as this:

<span class="preheader" style="display:none !important;">Preheader text goes here</span>

This will hide your preheader inside the email on both desktop and mobile clients while still displaying in the inbox.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s