3

当公司向客户发送电子邮件通讯时，某些电子邮件客户端（Gmail、Outlook）会在客户打开电子邮件之前在收件人收件箱中显示一小段预览文本。据我了解，无论电子邮件的可见设计和内容如何，​​有两种技术可以控制预览文本的显示：

1）以不可见的 1x1 像素开始电子邮件，该像素使用所需的预览文本作为替代文本

2）用“display：none”在html模板中创建一个div

就所有主要电子邮件客户端的可计算性而言，哪个选项最好？

4

4 回答 4

6

你说的是所谓的“Preheader”。

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

  1. 在邮件顶部的间隔（或图像）中使用 alt 属性
  2. 将其键入为可见文本（就在网络版本的链接上方）
  3. 将其键入为不可见文本（将文本颜色与背景匹配和/或使用字体大小：0）

避免使用第一个解决方案（alt 属性），因为 iPhone 和 iPad 不支持它。Outlook 还将显示图像的路径。还要避免使用 div 或其他 CSS 解决方案。

解决方案 #2 和 #3 实际上是最好的方法，因为它们在所有地方都受到支持。注意：“无处不在”是指实际支持预标题的客户端和 Web 客户端：Gmail、iPhone、iPad、Outlook 等。

请记住：如果字符数低于该客户端支持的最大字符数，它也会显示下一个文本。

供您参考，以下是最大字符限制： GMAIL（FIREFOX、IE、CHROME、SAFARI）：最多 97 个字符 IPHONE 4：垂直最多 81 个字符，水平最多 137 个字符 IPAD：87 个字符 展望：最多 255 个字符

希望这可以帮助。

享受 ;）

于 2013-10-07T08:58:49.833 回答
1

您正在寻找“预标题”。就个人而言，我会尝试以这样一种方式设计您的电子邮件，以使预标头可见 - 不需要黑客。

于 2012-05-20T11:22:07.350 回答
1

我已经成功地使用了隐藏的 DIV 技术，我认为控制前置文本的内容非常重要，但是在某些电子邮件客户端中，如果您转发电子邮件，隐藏文本是可见的。这适用于 Outlook 07 和 Gmail 等。我的一些客户对此有疑问，而其他客户对此很好。

此外 display:none 不适用于所有电子邮件客户端。我通常会矫枉过正，像这样设计隐藏的 DIV：

宽度：0；溢出：隐藏；浮动：左；显示：无；最大高度：0px；可见性：隐藏

此外，继续设置文本样式，这样如果他们转发了电子邮件并显示出来，它看起来会很好，并且对您的设计有意义。

  • 特洛伊
于 2013-09-04T15:30:58.757 回答
0

短语“preview text”和“preheader text”经常互换使用。但是，它们实际上是电子邮件的略有不同的元素。

预标题文本用于控制收件箱中出现的预览文本，通常位于主题行下方。预标头文本在电子邮件正文本身的标头上方直观地显示。

预览文本是在收件箱中电子邮件的消息信封中看到的内容。

要添加隐藏在邮件正文中的正确预览文本，请使用以下小技巧：

<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>
于 2020-04-10T17:23:31.080 回答