如何设计一个跨客户端/浏览器兼容的电子邮件？

设计电子邮件的正确方法是什么？合理预期它将在Outlook 2003,2007和Webmail客户端中正确显示？我订阅了各种电子邮件新邮件，并查看了它们的源代码，并看到其中一些邮件包含2000行HTML & CSS以及我以前从未见过的IF语句（我假定与确定Outlook版本有关）。如何设计一个跨客户端/浏览器兼容的电子邮件？

是否有免费或商业的工具可用于创建标记？有没有关于如何应用我见过的这些庞大样式表的标准模式？

来源

2009-10-07 Chris Marisic

使用纯文本 - 兼容一切。 :-) – 2009-10-07 13:40:05

尽管我喜欢你的回答，但我们的业务喜欢漂亮而漂亮的电子邮件！ – 2009-10-07 14:02:10

Telerik链接到这个网页从这里：http://www.telerik.com/support/kb/reporting/export-reports/details/send-telerik-report-in-an-e-mail – xinthose 2016-12-16 14:11:18

我会建议一个预处理基础的框架一样Foundation for Emails。

来源

2016-06-03 11:05:00 Zeemee

我现在接受这个答案作为答案这是2016年，我的原始问题是一个工具来创建电子邮件友好标记。这实际上是一种工具，不像以前只是指导的答案。 – 2016-06-03 16:50:46

由于微软采用新版本的Outlook的Word HTML引擎，设计电子邮件是一场噩梦。有没有工具，我知道的，但本指南会给你试图破译客户端时伸出援助之手支持CSS版本：

Guide to CSS support in email clients

来源

2009-10-07 13:28:34

看着那个清单，这是看到有多少X出现的恶梦。 – 2009-10-07 14:00:34

是的，这非常非常令人沮丧，特别是在过去几年中，网页浏览器的标准和兼容性已经到来时。你不会相信多少骂脏话的HTML电子邮件设计会让我失望...... – 2009-10-07 14:12:33

我正要疯了，那个链接给我节省了很多麻烦！ – RnD 2014-01-30 13:42:49

保持宽度很窄（〜600px的在猜测）。
使用表格而不是CSS div。
确保它在IE6中正常工作！

来源

2009-10-07 13:29:34 DisgruntledGoat

这是我的出发点，即使这并不可靠，即使是一个固定宽度的简单单列表格也会在表格单元格无法超出宽度的情况下展开。 – 2009-10-07 13:56:38

由于三个原因，HTML无法在电子邮件中成功实施。

1）HTML被设计为仅适用于HTTP协议（网络）而不适用于SMTP协议（电子邮件）。这很明显，因为HTML文档的头部根据HTTP传输提供与文档处理相关的数据。由于HTML提供不符合SMTP协议提供的条件，因此它在兼容性方面表现出色。到目前为止，还没有任何标准来描述电子邮件中的内容格式。

2）HTML不是演示文稿语言。 HTML旨在为内容提供结构化元数据，绝不会用于演示。 HTML仅用于电子邮件中，因此经常被滥用和使用，完全违反了标准。

3）电子邮件中的单个文档可以有多个作者，每个作者都有独立的标题信息。这样的文件被称为电子邮件线程。 HTML没有这样的约定。当在电子邮件中提供HTML时，对于接收它的初始用户可能看起来很好，但当回复或转发时，它看起来像废话并且无法完成其工作，这可能不会做任何事情。据我所知，邮件标记语言是唯一的标记语言，包含功能来解决和服务多个作者对单个标记语言文档的贡献而不会发生冲突，这是为了准确支持电子邮件线索所必需的。

这三个原因是为什么HTML与电子邮件完全不兼容并且无法成功。

来源

2009-10-10 15:44:08

要在所有客户端上运行电子邮件是非常困难的，因为他们在网页浏览器中使用不同的呈现引擎，而这些引擎可能会进行设计开发。尝试使用LitmusApp的电子邮件测试服务，该服务将为您提供关于您的电子邮件如何显示在不同电子邮件客户端中的截图。

来源

2010-01-19 18:08:49 Browsera

Oy。这样可怕的答案。

请参阅？当每个人决定使用表而不是css是某种禁忌时会发生这种情况。每个人都在限制自己的CSS傲慢和精英主义。当所有人都是锤子时，一切看起来都像钉子。难以置信的。

One poster写道：“这是我的出发点，即使是一个固定宽度的简单单列表格也会让表格单元格无限制地扩展到表格宽度以外的地方。

固定宽度是什么让你陷入困境。 600像素的固定宽度表显然将比400像素的电子邮件查看窗口/区域更宽。它不是扩大更宽，它IS更宽。 [sheesh]

无法预测收件人的电子邮件查看窗口/区域的宽度。因此，创建一个表，但将其宽度设置为100％，而不是一定数量的像素。并将其高度设置为“自动”。使其填充很好，宽... 7至10像素，最低。

然后只需像往常一样执行该表中的所有操作，但要坚持使用vanilla HTML4，避免使用XHTML，DHTML，XML，Java，JavaScript等等。只需HTML4。没有CSS，无论是。只是HTML4。期。

将Web服务器上的图像使用普通的http：// URL链接到某个地方，然后使用普通的img标签链接到它们，放置整个图像的URL（包括http：///部分）在引号之间，如在...

SRC = “http://www.website_url.com/filename.jpg”（或.gif或任何）

...，避免使用“替代”功能或任何幻想。

如果你想严格控制字体大小，那么不要犹豫，使用“span”标签，因为它几乎可以在每个电子邮件客户端中使用......只是不太喜欢它。

也不要让你的图像太大...特别是，不要让任何“标题”或顶部图像太宽。如果图形保持600像素宽，并且收件人的电子邮件查看器宽度为400像素，将表格宽度设置为自动不会有多大帮助。使用可以很好地嵌套在电子邮件信息的最左上角的图形;并使用相当小的照片和其他图形。

做到这一切，你会发现电子邮件在几乎每个电子邮件客户端都会看起来相同。通过仔细检查...

http://litmusapp.com/email-previews

...作为另一个海报，在这里，建议。

希望有所帮助。

来源

2010-07-04 07:13:47

所以基本上你的反应是设计一个完全流畅但基于表格的电子邮件设计模板，而不真正使用css？至少当我自己说一个固定宽度的单一列将超过它的宽度时，我相当怀疑，并且与视口无关，因为表是WIDER而不是整个宽度。 – 2010-07-06 13:42:33

“..并避免使用”alt“功能或任何花哨。” - 我会说，因为用户几乎总是需要选择查看电子邮件中的图像，并且图像可能不会出现，直到他们已经这样做，那么alt标签是至关重要的 – JohnnyFaldo 2013-04-26 14:23:23

创建合理的跨客户端兼容电子邮件绝对有一些最佳实践。

要记住最重要的概念2：

仅使用内联CSS。这将为您节省许多麻烦，因为Gmail和其他许多电子邮件客户端都窒息了<风格>标记中的CSS。
正如很多人所说，表格是决定元素大小（而不是CSS）的方法。

其实我只是写了后对这个话题的一些最佳实践，如果你有兴趣：

http://www.versapay.com/developer-blog/the-art-and-science-of-email-rendering-across-email-clients/

来源

2011-03-31 22:36:41

如何设计一个跨客户端/浏览器兼容的电子邮件？

回答

相关问题