Modern Email clients for both mobile and desktop frequently allow users to preview part of the email’s message before even loading the email. This is generally a short blurb that is around 75 characters in length, though it varies between clients.

We can manipulate this preview’able text. Why might you want to do that? Well, what if the beginning of your email is made up of images with text in it? Rather than the image’s text being shown in the preview, the later text in the email would instead, which may be confusing (or annoying) to users.

And so, we would use an invisible preheader here, using both style tags AND inline styling:

<style>
    /* ... */
    /*--- Preheader declaration in style block in addition to inline for Outlook */
    .preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Invisible preheader text goes here</span>

Now, this method isn’t perfect, as it doesn’t work on every client, and some may even end up showing this text. It does, however, work on popular clients such as Yahoo!, GMAIL, and Outlook. It’s to be expected though. Writing HTML emails can be a tricky business (hence the cocktail of different techniques being used to hide the text). So keep this in mind…

Use this technique wisely and only if you have no other solutions that involve putting normal text on the email!