Galhano //127.0.0.1

Hidden preheader text

here are a lot of designs that just won’t accommodate visible preheader text, or it become undesirable for branding reasons. If you’d like to add hidden preheader text to your email, don’t worry, it’s not hard!
To begin with, you’ll want to pick a place where the preheader text won’t cause issues in your layout. Usually the text will take up, at most, one pixel of vertical space, but in some cases this can bump down content. If you’re putting the preheader text into an existing header, you may want to give it a row to itself, so that if any content below is moved, it will all be moved the same amount.
To hide the text, you’ll want to include the following inline styles:

<td style="display:none !important; visibility:hidden; mso-hide:all; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
  This is preheader text.            
</td>

As you can see, I have hidden the text in a multitude of ways. Many of these are fallbacks for clients that don’t recognize or play nicely with some of the other styles in the list.

One tip from my own personal experience: Don’t put placeholder text here! You may want to add placeholder text for testing, but make sure to remove it after. The last thing you want is for an email to go out with “This is preheader text” as the actual preheader text… unless you are intentionally making a “This is Spinal Tap” reference. It’s much better to have an email go out with no preheader text than with placeholder text.

Preheader character limits

Just how much preheader text should you include? We recommend 50-100 characters. Though some clients are capable of showing more than this, it’s usually only under special circumstances (like a very wide browser window). Check out this chart to see the limits of some popular email clients.

source:

Tips for Coding Email Preheaders