在邮件列表中显示正确的Email摘要(preheader)

EDM邮件的优化中有一个小东西很容易被忽略,那就是邮件在邮箱列表中所显示的摘要(preheader)。下面是QQ邮箱邮件列表中摘要的表现形式(灰色文字):
Email摘要 preheader

在Gmail邮件列表中也差不多:
Email摘要 preheader

大部分邮箱会截取邮件正文中最先的那一串文本作为摘要,因此有时候邮件正文中一些不经意的废话也有可能显示在这里。比如这样一个邮件:
Email摘要 preheader
在QQ邮件列表里面就显示成这样:
Email摘要 preheader

你肯定希望在摘要位置能显示一些有用的信息,而不是这些个废话,但同时又不希望去掉邮件头上那些必要的Social Media链接。
我们可以把摘要的文字放在邮件开头,然后刻意隐藏起来,比如这样:

1
2
3
4
5
6
7
<!-- Hiding the preheader -->
<style type="text/css">
span.preheader { display: none !important; }
</style>
</head>
<body><span class="preheader">邮件摘要文字内容...</span>
...

其实这样还不保险,在某些邮箱,比如Lotus Notes,CSS中的display:none 不奏效。要让摘要不影响邮件展示,得来个加强版:

1
2
3
4
5
6
7
<!-- Hiding the preheader -->
<style type="text/css">
span.preheader { display: none !important; font-size:0; line-height:0; }
</style>
</head>
<body><span class="preheader" style="display: none !important; font-size:0; line-height:0">邮件摘要文字内容...</span>
...

把样式在HTML中再强调一遍,因为某些邮箱会忽略style标签。另外再把字体和行距都写成0,这样就真的看不到了。
注意摘要尽量简短,控制在30个字内为好。因为邮件列表只会把摘要放在标题的后面,而且摘要和邮件标题往往共享一行,标题长了,摘要就看不见了。另外摘要的内容也不可与标题重复,否则在邮箱列表里面用户体验就不好了。

一个比较有个性的摘要,如果你实在想不出摘要应该怎么写,可以参考这个:
一个比较有个性的摘要preheader

应该能启发到你如何让摘要和邮件标题完美配合吧?“专业”就是这样体现的:)

相信我,小小的一点改变真的会影响您邮件的“打开”率哦!

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/849.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

如本文对你有用,请在页面右侧栏扫码领取我的支付宝红包,作为打赏吧 (喂到底是我赏你还是你赏我啊-_-!)

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注