控制 HTML 电子邮件新闻稿的自动预览文本的最佳方法是什么?



当公司向客户发送电子邮件时事通讯时,某些电子邮件客户端(Gmail, Outlook)在客户打开电子邮件之前在收件人收件箱中显示一小段预览文本。据我所知,有两种技术可以控制预览文本的显示,而不考虑电子邮件的可见设计和内容:

1)以不可见的1x1像素开始电子邮件,使用所需的预览文本作为Alt文本

2)在HTML模板中用"display:none"创建一个div

哪个选项在所有主要电子邮件客户端可计算性方面是最好的?

你说的是所谓的"Preheader"

有很多方法可以在邮件中实现预标题:

  1. 在邮件顶部的空格(或图像)中使用alt属性
  2. 将其键入为可见文本(就在web版本的链接上方)
  3. 将其输入为不可见文本(与文本颜色匹配和/或使用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>

最新更新