当公司向客户发送电子邮件时事通讯时,某些电子邮件客户端(Gmail, Outlook)在客户打开电子邮件之前在收件人收件箱中显示一小段预览文本。据我所知,有两种技术可以控制预览文本的显示,而不考虑电子邮件的可见设计和内容:
1)以不可见的1x1像素开始电子邮件,使用所需的预览文本作为Alt文本
2)在HTML模板中用"display:none"创建一个div哪个选项在所有主要电子邮件客户端可计算性方面是最好的?
你说的是所谓的"Preheader"
有很多方法可以在邮件中实现预标题:
- 在邮件顶部的空格(或图像)中使用alt属性
- 将其键入为可见文本(就在web版本的链接上方)
- 将其输入为不可见文本(与文本颜色匹配和/或使用font-size:0)
避免第一个解决方案(alt属性),因为iPhone和iPad不支持它。前景还会显示图像的路径。也要避免使用div或其他CSS解决方案。
解决方案#2和#3实际上是最好的方法,因为它们在任何地方都得到支持。注:这里的"无处不在"指的是实际支持标题的客户端和web客户端:Gmail, iPhone, iPad, Outlook等。
请记住:如果字符数低于该客户端支持的最大字符数,它也会显示下一个文本。
对于您的信息,这里是最大字符限制:GMAIL (FIREFOX, IE, CHROME, SAFARI):最多97个字符IPHONE 4:最大81字符垂直,最大137字符水平IPAD: 87个字符OUTLOOK:最大255个字符
希望对你有帮助。
享受;)
你正在寻找一个'pre-header'。就我个人而言,我会尽量设计你的电子邮件在这样的方式,标题是可见的-不需要hack
我已经成功地使用了隐藏div技术,我认为控制前文本的内容是非常重要的,但是在一些电子邮件客户端中,如果你转发电子邮件,隐藏文本是可见的。这对Outlook 07和Gmail都适用。我的一些客户对此有意见,而另一些则没有意见。
也显示:none将不会在所有的电子邮件客户端工作。我通常会把隐藏的DIV样式设置得像这样:
宽度:0;溢出:隐藏;浮动:左;显示:没有,max-height: 0 px;可见性:隐藏
同时,继续设计文本样式,这样如果他们转发邮件并且显示出来,它将看起来很好,并且与您的设计有意义。
- 特洛伊
短语"预览文本"one_answers"预标题文本"经常互换使用。然而,它们实际上是电子邮件中略有不同的元素。
预标题文本用于控制出现在收件箱中的预览文本,通常位于主题行下方。标题文本在电子邮件正文本身的标题上方直观地显示。
预览文本是在收件箱中电子邮件的消息信封中看到的内容。
要添加隐藏在邮件正文中的适当预览文本,请使用以下小技巧:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>