82

html 电子邮件时事通讯的 HTML/CSS 是否需要采用表格格式,或者我可以使用 DIV 来确保它能够很好地跨电子邮件客户端显示吗?我已经下载了一些模板,看看它们是如何完成的,我自己的基础是这些模板,它们似乎都使用表格。

任何见解都非常感谢,谢谢!

4

4 回答 4

138

⚠️ 2021-06-10更新:这是一个非常古老的答案。我不确定它写成 10 年后有多准确。希望邮件客户端今天更合规⚠️

当谈到电子邮件 HTML 时,请注意,所有来自 Web 开发的最佳实践都被忽略了。为了使外观一致,您应该:

  1. 使用基于表格的布局
  2. 对表格使用老式的属性样式
  3. 仅使用内联样式,并且仅使用非常简单的样式。<style>-标签被许多客户端丢弃。
  4. 跳过使用<html>,<head><body>- 无论如何它们都会被大多数客户端丢弃。
  5. 如果您嵌入图像,请尝试确保电子邮件看起来不错,即使未加载图像也是如此。许多客户端要求用户在显示图像之前将电子邮件标记为“安全”。

您可以在此处阅读上述要点的更详细版本:

于 2010-05-29T14:52:28.767 回答
9

就像这里的每个人都说的那样,使用表格并内联你所有的 css ......但是有一个电子邮件应用程序生态系统可以帮助你构建电子邮件。

我最近一直在使用Mailrox ( https://www.mailrox.com/ ) 来构建我的大部分电子邮件,如果你是从设计中构建一个,它似乎非常好并且可以输出完美的 HTML 电子邮件,甚至虽然它处于测试阶段。

您也可以尝试使用MailchimpCampaign Monitor中的预构建模板,但听起来您有电子邮件设计,所以 Mailrox 可能是最好的。

如果您真的想开始构建电子邮件,我会说忘记您对现代网页设计和主表格布局的大部分了解,并使用来自 PatrikAkerstrand 的链接。

Litmus也非常适合测试您的手工编码设计。他们在(几乎)所有电子邮件客户端中为您提供电子邮件的预览。

希望这可以帮助。

于 2012-06-15T17:08:19.257 回答
4

许多电子邮件客户端无法呈现 css。我会使用表格来格式化您的邮件并使用图像来处理其他任何事情。

于 2010-05-29T14:44:21.833 回答
1

正如已经提到的 - 您的 HTML 电子邮件应该使用表格(而不是 div)构建。您也可以添加 CSS - 两者都使用外部样式表,但这不会被所有电子邮件客户端接收,因此实际上添加您的 css 内联更可靠。即使这样做,某些电子邮件客户端也可能会忽略某些属性,因此最好的选择仍然是使用 HTML 属性,只要这些属性可用。“您必须这样做,因为某些客户端,例如 Gmail,会忽略或删除您的标签内容,或者忽略它们。” 来源:http ://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

除此之外,我还通过反复试验了解到,即使是图像也必须裁剪成您希望它们在电子邮件中显示的确切尺寸。如果 Outlook 在获取图像的宽度/高度的 HTML 属性时很糟糕,我已经看到了一些令人讨厌的拉伸电子邮件,只是因为这些属性被忽略并且图像显示为全尺寸。

于 2016-05-24T13:46:14.980 回答