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

Question

设计电子邮件的正确做法是什么，合理的期望它会在Outlook 2003,2007和Webmail客户端中正确显示？我订阅了各种电子邮件新手，并查看了它们的来源，并看到其中一些有2000行HTML和CSS以及我以前从未见过的IF语句（我假设与确定outlook的版本相关）。 / p>

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

Answer 1

由于微软采用了适用于较新版本Outlook的Word HTML引擎，因此设计电子邮件是一场噩梦。我不知道有什么工具，但是在尝试破译客户支持哪个CSS时，本指南将帮助您：

Guide to CSS support in email clients

Answer 2

Oy公司。这样可怕的答案。

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

一张海报上写道：“那是我的起点，即使这是不可靠的，即使一个固定宽度的简单单列表也会搞乱，表格单元格无缘无故地扩展到宽度之外。”

固定宽度是让你遇到麻烦的原因。 600像素的固定宽度表显然比400像素的电子邮件查看窗口/区域宽。它扩展更宽， IS 更宽。 [啧]

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

然后像往常一样只做那个表中的所有内容，但坚持使用vanilla HTML4，避免使用XHTML，DHTML，XML，java，javascript等等。只需HTML4。也没有CSS。只是HTML4。周期。

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

src =“http://www.website_url.com/filename.jpg”（或.gif或其他）

...并避免使用“alt”功能或任何花哨的功能。

如果您想严格控制字体大小，请不要犹豫，使用“span”标签，因为它几乎适用于所有电子邮件客户端......只是不太喜欢它。

另外，不要让你的图像太大......特别是，不要使“标题”或顶部图像太宽。如果图形宽度为600像素且收件人的电子邮件查看器宽度为400像素，则将表格宽度设置为自动将无济于事。使用可以很好地嵌套在电子邮件消息的左上角的图形;并使用相当小的照片和其他图形。

做到这一切，您应该会发现电子邮件在几乎每个电子邮件客户端中看起来都是一样的。使用...仔细检查。

http://litmusapp.com/email-previews

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

希望有所帮助。

Answer 3

在创建合理的跨客户端兼容电子邮件方面肯定有一些最佳做法。

要记住的两个最重要的概念是：

1. 仅使用内联CSS。这将为您节省许多麻烦，因为Gmail和许多其他电子邮件客户端在＆lt; style＆gt;中阻止了CSS。标签

2. 正如很多人已经说过的那样，表格是调整元素大小（而不是CSS）的方法。

如果您感兴趣的话，我实际上只是写了一些关于这个主题的帖子和一些最佳实践：

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

Answer 4

我建议使用基于预处理器的框架，如Foundation for Emails。

Answer 5

制作适用于所有客户端的电子邮件极其困难，因为它们使用来自Web浏览器的不同渲染引擎，而设计很可能已经开发出来。尝试使用LitmusApp的电子邮件测试服务，该服务将为您提供电子邮件在不同电子邮件客户端中的显示方式的屏幕截图。

Answer 6

• 保持宽度相当窄（猜测为~600px）。
• 使用表而不是CSS div。
• 确保它在IE6中有效！

Answer 7

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

1）HTML仅适用于HTTP协议（Web），而不适用于SMTP协议（电子邮件）。这很清楚，因为HTML文档的头部根据HTTP传输提供与文档处理相关的数据。由于HTML不符合SMTP协议提供的条件，因此它兼容。截至目前，没有任何标准可用于描述电子邮件中的内容格式。

2）HTML不是表示语言。 HTML旨在向内容提供结构化元数据，而不是用于呈现。 HTML仅用于电子邮件中进行演示，因此经常被滥用并完全违反标准。

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

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