Hi all! I am having this issue, and I need to resolve it. We have our logo in a snippet, when emails get sent out "cslogo-small.png" populates before the preview of the email copy. Any idea how to get rid of this? Ex. below:
Solved! Go to Solution.
This issue is caused by some email clients reading the image's alt text or name as actual text in your email, and thus including it in an email's inbox previews next to subject line. If your email has pre-header it will display that, else it will pick content from the start of email body (usually the initial chars from the body) and display it as the pre-header text next to the subject line in the inbox. You can explore below options to not showcase the part of the email body in the pre-header text area:
1. Enable and add the pre-header text in the email settings - like I said above, if you add a pre-header, the email client will display that before the text in the body of the email.
2. Include the view email in browser, as this would be added in top of the actual email content - you'll see the view as a webpage string first in the pre-header text
3. There's a technique (more of a hack) to fill up the spaces in the beginning of the email in the body in a div with display property set to none which may work - you can refer it here.
This issue is caused by some email clients reading the image's alt text or name as actual text in your email, and thus including it in an email's inbox previews next to subject line. If your email has pre-header it will display that, else it will pick content from the start of email body (usually the initial chars from the body) and display it as the pre-header text next to the subject line in the inbox. You can explore below options to not showcase the part of the email body in the pre-header text area:
1. Enable and add the pre-header text in the email settings - like I said above, if you add a pre-header, the email client will display that before the text in the body of the email.
2. Include the view email in browser, as this would be added in top of the actual email content - you'll see the view as a webpage string first in the pre-header text
3. There's a technique (more of a hack) to fill up the spaces in the beginning of the email in the body in a div with display property set to none which may work - you can refer it here.
Thank you!!
the 'hack' you talk about in point 3. is so ubiquitous, I'm not sure it is a hack anymore. More of a requirement for every email template (sadly).
Cheers
Jo
Agreed, @Jo_Pitts1! This technique puts me a bit off - and there are lots of people using it! Sometimes, I don't get why folks don't use/prefer using the pre-header text (is it just because it's optional?) - people can get as creative as they want with it. Without a doubt, an apt pre-header text can sure help with the engagement rates! Why not spend few minutes in setting the pre-header text when you spend hours and sometimes days in designing the email body?
I encourage my client's to always use a pre-header (for exactly the reasons you outlined below)
However, you still need the 'space space space' hack in place in case there is either a use case to NOT have a pre-header (it happens occasionally), or a very short preheader. In the second instance, other content can still 'bleed through' into the preheader.
Cheers
Jo
Based on the subject line length, I recommend my clients to have a pre-header length of about 40-100 chars - this in most cases turns out to be enough for the body content to not bleed through in the email preview. 🙂
Better safe than sorry. And the 'space space' work around does resolve the occasional use case where there is no pre-header.
Yeah agreed, hack's here to stay for quite a time! 🙂