Skip to content

Instantly share code, notes, and snippets.

@kchez
Last active December 15, 2015 17:45
Show Gist options
  • Save kchez/50ca841073f862361dc6 to your computer and use it in GitHub Desktop.
Save kchez/50ca841073f862361dc6 to your computer and use it in GitHub Desktop.
Email Preheader
<!-- PREHEADER:
https://www.campaignmonitor.com/blog/post/3628/a-practical-guide-to-email-preheaders
http://www.smartinsights.com/email-marketing/email-creative-and-copywriting/4-ways-use-preheader-marketing-emails
Text that appears after the subject line in a preview/notification in the inbox.
Not creating a preheader means generally the first bit of text content gets used.
This can be bad when areas like the web version link are first.
The preheader can be visible but if a template design doesn't allow for it the hidden span technique can be used.
display:none !important; allows Gmail to hide the span without max-height hacks.
In case display:none; doesn't work, color and font-size properties can be used to still "hide" the span content.
The font colour would match the background colour of the email.
Note: Setting a very small font size can trigger some spam filters.
-->
<span style="display: none !important; color: #ffffff; font-size: 1px; line-height: 0; overflow: hidden; mso-hide: all;">
Preheader text here.
</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment