Preheader text in HTML email

Refresh

April 2019

Views

980 time

1

I have added preheader text in my HTML template and it is working fine but when someone forward the newsletter from outlook, that texts are shown on the top. It doesn't happen in Gmail though.

<style>
.preheader { 
display:none !important; 
visibility:hidden; 
opacity:0; 
color:transparent; height:0; width:0; }
</style>
</head>
<body>
<span class="preheader" style="display: none !important; visibility: hidden; 
opacity: 0; color: transparent; height: 0; width: 0;">
We are offering a six-week Indonesian language course for adult learners.
</span>

Thanks!

Screenshot of how it looks when someone forward a newsletter

enter image description here

3 answers

0

I figure MailChimp has surely put a lot of energy into this dumb problem. They use:

<!--[if !gte mso 9]>
<span style="display:none; 
             font-size:0px; 
             line-height:0px; 
             max-height:0px; 
             max-width:0px; 
             opacity:0; 
             overflow:hidden; 
             visibility:hidden; 
             mso-hide:all;">YOUR MESSAGE</span>
<!--<![endif]-->
4

For best results across environments, you'll be better off inlining the CSS. I've always used this for preheaders.

<div style="display:none; font-size:1px; color:#e5e5e5; line-height:1px; font-family:Verdana, Helvetica, sans-serif; max-height:0px; max-width:0px; opacity:0; overflow:hidden; mso-hide:all;">
PREHEADER TEXT HERE
</div>
0

I tried the previous answers but on forward, the email still showed tiny text. I ended up making the text the same color as the background and that's what finally worked for me.