如何为HTML邮件编码 (第一部分)
你应该知道的关于邮件客户端的HTML编码的事情
[
日 - 5分钟阅读
作者的图形
邮件客户
我所编码的大多数模板都是为B2B客户提供的。因此，我可以依靠他们的计算机被设置并由他们公司的IT部门支持。在大多数情况下，他们在台式机和笔记本电脑上使用Microsoft Office与Outlook，甚至在苹果电脑上也是如此。对于移动设备，他们有苹果邮件或安卓邮件客户端。
在极少数情况下，他们使用Lotus Notes，有时也使用其他移动客户端。
微软的Outlook
如前所述，Outlook是我们必须处理的最常用的客户端。从Outlook 2007开始，它就使用了Microsoft Word的渲染引擎，这与现代浏览器是无法相比的；特殊的CSS实现也比较差。随着Outlook 2010的出现，它变得好了一点，但也只是好了一点而已!
另外，由于安全原因，Javascript、表单元素和视频嵌入不被支持。但我认为这并不坏，想象一下，如果这能发挥作用，营销人员或垃圾邮件发送者会怎么做;-)
微软Outlook的HTML--回到90年代
OK ，CSS的工作并不顺利，尤其是宽度和高度属性只对表格有效。因此，我们必须使用许多嵌套的表格，并使用非常过时的属性，如单元格间距、单元格填充、对齐、宽度和高度等等。
下面是一个典型的、非常简单的电子邮件HTML代码。
作者的代码
由此产生的电子邮件在Outlook中看起来是这样的。
Outlook 2010，作者的屏幕截图
头部图像被破坏了，因为"http://www.myserver.com/mail_header_left.png "只是假的代码!但现在是HTML。
首先，看一下页面颜色设置的属性。20多年前，它们是为网页着色所必需的，如今它们已被废弃，在任何情况下都不应该使用。
甚至Outlook也可以处理CSS的这些基本颜色功能。所以你可以不使用它们，但也许有些外来的客户还是需要它们，所以我总是把它们作为一个后备方案。这就是有时被称为 "恐慌代码 "的东西；-)
接下来是第一个
。这个表格用 "align "属性将邮件内容居中，用 "width "属性将宽度设为620px。正如你所看到的，这个值只是 "620"，而没有px!否则，Outlook会忽略这个值，并使邮件与窗口一样宽!所有其他的表格都嵌套在这个表格中。在 "一些漂亮的问候 "的
| 中，有一个标签，也被废弃了。但它对所有客户都有效，就像中的颜色属性。我在这里使用它只是为了说明问题，因为Outlook很好地支持CSS "font-family"，所以它并不是强制性的。
我认为代码的其余部分很容易理解，而且我已经包括了许多注释。有一个 | 可能很有趣，就是用 "高度 "属性（不含 "px"）来表示间隔的空白。这是一个在区块之间插入空格的好方法，总是可以的--为了安全起见!
除了Outlook之外，其他的客户端如何呢？我谈了很多关于Outlook的内容，并向你展示了我们可以使用哪些被废弃的网络技术来使邮件看起来像设计师的规格。 好消息是，所有其他的邮件客户端和浏览器仍然支持过时的代码。如果它在Outlook中有效，它在任何地方都有效。 最好是使用废弃的代码和现代的CSS，以获得两个世界的最佳效果。 我们必须牢记的事情或必须接受的事情我曾为一些奇怪的事情挣扎过，当一切都完成并上线，客户给予反馈的时候，这些事情就突然出现了。 其中之一是在Outlook中非常长的表格中出现了不需要的空格。Outlook试图插入一个分页符；你可以在这里找到一个详细的解释。"Acid上的电子邮件"。 正如你在我的代码示例中看到的，"文章 "块是一个 ，每篇文章都在一个中。如果你只有几篇文章，那就没有问题。但是当有很多文章的时候，就会出现分页。为了避免分页，只需将单个表格分成多个表格，每篇文章一个。 另一个问题存在于高分辨率的屏幕，如2K、4K或Retina。Outlook以较大的字体尺寸进行渲染。我曾经有一个和文本栏一样宽的标题图片，但在这些高分辨率显示器上，图片显得比文本栏小。 你可以在uplers.com找到一个很好的解释和解决方案。不幸的是，我无法让他们的解决方案奏效，但我无法测试很长时间，而且我没有高分辨率的屏幕。如果你找到解决方案，请让我知道。 造成问题的不仅仅是Outlook，还有iOS中的苹果邮件。苹果的移动客户端不会跳到邮件中的锚点。我这几天刚用iOS 14.7.1测试了一下，没有跳转!当我第一次注意到这个问题时，我试着用ID代替命名的锚点，但没有任何效果。 好消息是： CSS怎么了在我的下一个电子邮件故事中，我将写下我对邮件客户端的CSS的经验，特别是Outlook。你会发现，如果你知道什么能做，什么不能做，那就没那么复杂了。 因此，请期待即将到来的第二部分! 如果你有任何问题，不要犹豫，请与我联系。我非常乐意帮助你。 快乐的邮件编码! |
