How to define HTML email preheader

php html css email

15,672

Solution 1

Sonu Yadav shared the perfect and clever solution to this problem (thanks). And for the sake of documentation, the solution presented on the link shared by Sonu Yadav is below.

Basically, you add the text your want your preheader to be before all content in the <body> tag and use CSS to hide it.

<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>
</head>

<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, &amp; more: 75 text char limit</span>
...

Solution 2

If your logo is the first thing being rendered in your email, the cleanest way (without having to rely on styles) is to place the preheader text in the image alt tag, e.g.:

<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >

15,672

Author by

Caio Mar

Electrical & Software Engineer I enjoy building things and solving problems, only if I had more time, I'd probably be a carpenter too.

Updated on June 25, 2022

Comments

Caio Mar almost 2 years

I'm building HTML email templates for a CMS and am wondering if it is possible to define what the preheader of the email is.

The email preheader is the portion of the email that appears right after the email subject on your email provider. Very useful on mobile devices, the user catches a glimpse of what the email is about. It is usually the first text content of the email that defines it.

Currently, on my HTML email design I have a header template, body template and a footer template. And my preheader gets defined by the header template; the first text content that appears is in the header and is the website name/logo, creating redundancy in the email design.

Any ideas of how to get around this?
- Caio Mar over 8 years
  
  Well, now that I think about it, the solution would be to define a text before the header; thus it is called the preheader.
- bassxzero over 8 years
  
  I am lost. Are you talking about creating a file you can include on every email because the test doesn't change?
- Caio Mar over 8 years
  
  No, I am talking about the text that shows after the subject line on the email. On the list of emails of your gmail/hotmail shows NAME_FROM / SUBEJECT / PREHEADER_LINE. I see some campains are able to define what this line preheader_line is, they are able to ignore irrelevant text that pre-heads the relevant email content. Makes sense?