控制HTML电子邮件简报的自动回溯文本的最佳方法是什么?

时间:2011-08-31 21:43:16

标签: email html-email email-client

当公司向客户发送电子邮件简报时,某些电子邮件客户端(Gmail,Outlook)会在客户打开电子邮件之前在收件人收件箱中显示一小段预览文本。据我了解,无论电子邮件的可见设计和内容如何,​​都有两种技术可以控制预览文本的出现:

1)使用不可见的1x1像素启动电子邮件,该像素使用所需的预览文本作为替代文字

2)在html模板中使用“display:none”

创建一个div

哪个选项最适合所有主要电子邮件客户端的可计算性?

4 个答案:

答案 0 :(得分:6)

你在谈论所谓的“预审者”。

有许多方法可以在邮件中实现预读器:

  1. 在邮件顶部的间隔符(或图片)中使用alt属性
  2. 将其键入可见文本(位于网络版链接的正上方)
  3. 将其键入为invisibile文本(将文本颜色与背景匹配和/或使用font-size:0)
  4. 避免使用第一个解决方案(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个字符

    希望这会有所帮助。

    享受;)

答案 1 :(得分:1)

您正在寻找'预标题'。就个人而言,我会尝试设计您的电子邮件,使前标题可见 - 不需要黑客。

答案 2 :(得分:1)

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

同时显示:none不适用于所有电子邮件客户端。我通常会过度杀戮并为这个隐藏的DIV设计风格:

宽度:0;溢出:隐藏;浮动:左;显示:无;最大高度:0像素;能见度:隐藏

另外,请继续并对文本进行样式设置,如果他们转发电子邮件并显示出来,那么它看起来会很好并且对您的设计有意义。

  • 特洛伊

答案 3 :(得分:0)

短语“预览文字”和“标题文字”通常可以互换使用。但是,它们实际上是电子邮件中稍有不同的元素。

预标题文本是用于控制收件箱中通常在主题行下方显示的预览文本的内容。 Preheader文本直观地显示在电子邮件正文本身的标题上方。

预览文本是收件箱中电子邮件的邮件信封中显示的内容。

要添加隐藏在邮件正文中的适当的预览文本,请使用以下小技巧:

<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>