最常见的电子邮件编码错误以及如何避免它们

尽管您的电子邮件充满了花里胡哨，但编码错误可能会彻底毁掉它。 只有一个错误缩短的链接或错误的颜色格式——你的电子邮件看起来会很糟糕，特别是如果用户决定通过智能手机而不是网络电子邮件客户端查看它，或者切换到具有不同屏幕分辨率的小工具。

在这篇文章中，我们将讨论常见的 HTML 电子邮件编码错误，并分享一些避免这些错误的建议。

电子邮件显示问题从何而来？

简而言之，用户以您计划的方式之外的方式查看您的电子邮件有两个可能的原因。 第一个与用户设备的技术特性有关。 第二个是电子邮件客户端，更准确地说——它的渲染引擎。

用户设备的技术特性

您应该考虑任何设备的至少两个技术特性：

1. 屏幕分辨率—屏幕的大小，以像素为单位。 例如，iPhone X 的屏幕分辨率为 1125×2436 像素。 如果您的电子邮件包含两列文本，每列 600 像素，则无法正确显示。
2. PPI，或每英寸像素数— 一英寸屏幕的像素数。 iPhone X 的 PPI 是 458。想象一下：您需要在电子邮件中添加一个操作按钮。 如果按钮小于 44 点，对于 iPhone X 来说就是 132×132 像素，它会占用不到三分之一平方英寸的屏幕空间，用户几乎无法点击它。

要记住的另一件事：用户经常旋转他们的移动设备，因此您的电子邮件应该看起来整洁并且在纵向和横向视图中都具有完整的功能。

为了防止与用户设备的技术特征相关的问题，您应该使用响应式电子邮件设计。

首先，您应该在电子邮件的head中添加媒体查询。 例如，@ @media screen and (max-width: 600px)查询意味着如果屏幕宽度小于 600 像素，将优化电子邮件设计。 如果屏幕宽度超过 600 像素，用户将看到此电子邮件的固定宽度版本。

其次，您应该以表格的形式创建一封电子邮件，其中包含单元格：

 <表>
<tr>
    <td>...</td>
</tr>
</table>

然后，为每个单元格添加样式，例如：

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

但是，即使采取了这些措施，您在显示电子邮件时仍然会遇到问题。 问题的根源是电子邮件客户端的渲染引擎。

一个电子邮件客户端

可能出现显示问题的第二个来源是您的收件人用来打开您的营销活动的电子邮件客户端。 电子邮件客户端的核心部分是渲染引擎。 它以长代码脚本的形式接收电子邮件，对其进行处理，并以我们习惯接收电子邮件的方式输出：带有图像、链接和其他媒体的可理解、结构化和格式化的文本。

看看下面的例子。 这是一封促销电子邮件中的一段代码——正如 Gmail 的渲染引擎所看到的那样。 如果这封电子邮件是这样显示给潜在客户的，他们几乎不会通过代码并了解有一个 40% 折扣的促销代码。

每个电子邮件客户端都有自己的渲染引擎，这意味着通过不同的电子邮件客户端打开的同一封电子邮件可以有完全不同的外观。

以下是全球最受欢迎的电子邮件客户端列表。 显然，您的收件人会使用其中一个或什至一堆来打开您发送的电子邮件。

所有这些电子邮件客户端都有一些特性，您在编写 HTML 电子邮件时应该考虑这些特性。

例如，iOS 版 Apple Mail 不支持：

• inline-size CSS 属性；
• @media (orientation)媒体查询；
• 锚链接；
• HDR、PPM 和 SVG 图像格式等。

Gmail 支持各种 CSS 属性和媒体查询，除了：

• box-shadow, text-shadow,和其他一些 CSS 属性；
• @media (prefers-color-scheme)媒体查询等。

常见的电子邮件编码错误以及如何避免它们

避免电子邮件编码错误的最佳一般建议是将您的库存限制为大多数电子邮件客户端支持的代码，无论它们的版本有多旧。 简单来说，像 1999 年一样退后一步编写代码。例如，广泛推荐使用：

• CSS2 代替 CSS3，
• HTML4 而不是 HTML5，
• 颜色而不是背景图像，
• table-layout而不是<div> ，
• 内联 CSS 而不是样式集或<style>块。

这种方法被认为可以防止大多数显示电子邮件的问题。 但让我们仔细看看一些特定的编码错误，它们可能会毁了您的电子邮件，并尝试找到解决方案。

没有纯文本版本

潜在问题。 如果电子邮件没有纯文本版本，某些电子邮件客户端（例如 Outlook 和 Gmail）可以将您的电子邮件定义为垃圾邮件。 此外，有时电子邮件客户端在呈现 HTML 代码时会出现问题。 因此，HTML 电子邮件可能会显示不正确，而纯文本电子邮件总是看起来一样。

预防。 在您的电子邮件中添加纯文本版本。 幸运的是，大多数电子邮件服务提供商会自动添加它。

您可以在电子邮件营销策略中实施纯文本电子邮件。 首先，此类电子邮件看起来更个人化，因此可以提升您与订阅者的沟通水平。 此外，有些人更喜欢直截了当的电子邮件，而丰富多彩的布局会让他们望而却步。

使用 JavaScript、ActiveX、Flash 等

潜在问题。 大多数电子邮件客户端不支持这些语言、框架和插件，因此您的电子邮件的一部分不会被呈现，您的订阅者只会看到一个空白区域。 此外，该电子邮件可能会被防病毒软件禁止。

预防。 将您用于将电子邮件编码为 HTML 和 CSS 的语言。 如果您需要添加一些视频或音频，请将其上传到网站，并提供链接。

仔细了解 NiftyImages 如何展示新产品功能：该公司选择了一系列图像，尽管它可能是一个解释性视频。

重定向过多

潜在问题。 重定向虽然需要分析，但对您的电子邮件可能弊大于利。 例如，它们使网页的加载时间显着延长。 然后，用户的浏览器可能会阻止重定向——因此，URL 将无法访问。

预防。 尽量避免重定向。 但是，如果您仍然需要使用它们，请查看加载目标 URL 需要多长时间 - 在启动整个活动之前测试您的电子邮件。 考虑订阅者的体验：他们是否愿意等待 URL 加载。

缩短的链接

潜在问题。 缩短的链接会使您的电子邮件面临进入垃圾邮件文件夹的风险。 问题是在缩短的链接中，目标 URL 不清楚。 简单来说，它可以引领任何地方。 黑客和垃圾邮件发送者自然会利用这一点。

预防。 不要使用缩短的链接。 如果您的目标是让您的电子邮件看起来整洁，没有长 URL，则最好使用以下 HTML 标记： <a href="URL">...</a> 。 您可以在此处插入任何 URL，无论它有多长。

如果您仍然渴望缩短链接，请缩短您自己的 URL，而不是使用第三方工具。 至少提前扫描链接缩短者的黑名单。

大型电子邮件正文文件大小

潜在问题。 电子邮件客户端和电子邮件服务提供商都有电子邮件正文大小限制，因为它们旨在传输相对少量的信息。 如果您不符合这些限制，您的电子邮件可能会被剪掉——它的结尾将被隐藏。

看一看音乐厂牌的时事通讯。 通过 Gmail 打开时，它被剪裁了。

要查看其完整版本，订阅者需要点击链接。

较大的电子邮件正文文件大小也会导致可传递性问题。 此外，由于邮件体积较大，用户的杀毒软件可能会将其视为安全威胁。

预防。 查看您的电子邮件服务提供商和您的订阅者使用的电子邮件客户端的电子邮件正文大小限制。 例如，Google 声称电子邮件正文大小限制为 200 KB。 但广泛建议将您的电子邮件限制为 100 KB，以满足大多数电子邮件客户端的要求。 实际上，上面示例中的电子邮件大小为 136 KB。

字体和颜色太多

潜在问题。 由于电子邮件客户端之间的差异，并非所有字体和颜色都能正确显示。 此外，并不是所有的字体和颜色都能很好地相互结合——所以你可能会创建一个弱的电子邮件设计。

您还应该记住，订阅者的设备具有不同的屏幕设置，例如亮度。 当您试图让您的电子邮件更加生动时，用户可能会遭受这种色彩的混乱。

这是电子邮件设计的一个有问题的例子：每个块都有自己的颜色； 这足以分散用户对最重要信息的注意力。

预防。 选择适合电子邮件的字体，例如 Arial、Comic Sans MS、Courier New、Times New Roman 或 Verdana：大多数流行的电子邮件客户端都支持这些字体。 您的文字字体大小应不小于 12-13 像素； 否则，用户将不得不放大您的电子邮件或使他们的眼睛疲劳。

至于颜色，您不应使用超过两种颜色：一种用于一般文本块，另一种用于突出重要内容以及链接和按钮。 确保您选择的颜色与背景相匹配，并且在用户切换到暗模式时看起来不错。

从文本编辑器或网站复制电子邮件模板 HTML 代码

潜在问题。 如果您使用 Microsoft Word 或类似的东西为您的电子邮件创建文本，然后只是复制它，您可能会遇到一些不必要的格式，这可能会破坏您的电子邮件布局。 如果您从网站复制图像或部分文本，JavaScript 或 Flash 元素可能会添加到您的电子邮件中。

预防。 要对电子邮件进行编码，请使用不添加自己的格式的文本编辑器，例如 Windows 的记事本或 Mac 的 TextEdit。 还有一些在线工具可以清理您的格式，例如 TextCleanr。 您还可以使用 HTML Cleaner 工具，该工具允许您在用户友好的编辑器中创建电子邮件并同时检查代码。

使用三位十六进制颜色代码

潜在问题。 尽管三位数和六位数颜色格式应该是等效的，但有时电子邮件客户端会以略有不同的方式呈现三位数格式。 例如，使用 Gmail 时，您可能会遇到紫色而不是您计划的黑色： color: #000变成color: #500050 。

预防。 根据经验，坚持使用六位数颜色格式，并确保在整封电子邮件中都使用它。

附件

潜在问题。 通常，垃圾邮件发送者和黑客会在他们的电子邮件中附加一些文件。 如果您添加附件，它可能会被视为安全威胁。

预防。 提供文件加载页面的链接，而不是将文件直接添加到电子邮件中。

下面是一个示例，说明如何授予用户访问您承诺的文件的权限。 注意链接的指定方式：它应该是一段可点击的可理解文本，以便用户在点击链接时知道会发生什么。

缺少替代文字

潜在的问题。 一些用户禁止在他们的浏览器中下载图像。 如果他们收到一封电子邮件，包括没有替代文本的图像，他们只会看到空格而不是图像，并且不会理解电子邮件的重点。

当某人的互联网连接太低而无法足够快地下载图像时，它的工作原理相同。 替代文本在某种程度上有助于解决这个问题：当图像下载出错时，用户可以看到文本。

预防。 为您使用的所有图像添加alt属性。 确保你做对了——通过将它添加到img标签： <img alt="text"> 。 将替换文字限制为 125 个字符，包括空格。 通常只需添加几个准确描述图像的词就足够了。 如果您还有一些空间，您可以在此描述中添加一些上下文。

看看来自丝芙兰的一封电子邮件的摘录。

如果您查看此电子邮件的代码，您可以找到 CTA 作为图像的替代文本。 即使用户没有看到图片，他们仍然会理解品牌提供的产品。

仅图像布局

潜在问题。 如果您的电子邮件仅包含图像而没有任何文本，则您可能会遇到可传递性、显示等方面的问题。 例如，如果用户阻止图像下载，他们将在您的电子邮件中几乎看不到任何内容。 其次，大量图像使电子邮件正文变大，电子邮件客户端可能会对其进行剪辑。 第三，用户将无法通过字词搜索在文件夹中找到您的电子邮件。

预防。 创建电子邮件时，将文本和图像结合起来。 不要忘记添加纯文本版本的电子邮件和图片的替代文本； 考虑我们上面给出的其他建议。

看看来自 Ecwid 的这封电子邮件。 它具有响应式设计，包括表格布局和媒体查询，例如max-width: 570px 。 电子邮件结合了不同类型的内容：色彩丰富、引人入胜的图像和文本。 使用六位颜色格式，例如color:#979797或color:#4A4A4A 。 邮件中的图片不多，所以它的主体尺寸不是太大。 更重要的是，在电子邮件中既找不到缩短的链接也找不到重定向。 总的来说，这封电子邮件符合上面给出的大部分建议。

因此，我们已经了解了最常见的 HTML 电子邮件编码错误。 采纳我们的建议，在发送之前不要忘记测试您的电子邮件：使用至少三个流行的电子邮件客户端打开您的电子邮件； 如果可能，也可以通过不同的设备进行检查。 模拟器也将派上用场。

避免电子邮件编码错误的另一种方法

有一个事实：如果你不编码，你就不会犯 HTML 编码错误。 幸运的是，无代码电子邮件设计正在等待您使用 SendPulse。

借助我们直观的拖放编辑器，我们已经防止您犯电子邮件编码错误。 只需将图像、文本或视频添加到您的电子邮件，设置字体和颜色以匹配您的品牌风格，并添加指向您的社交媒体页面的链接。

为了让整个过程更加简单，您可以从我们的免费电子邮件模板中进行选择。 使用 SendPulse 创建的所有电子邮件都是响应式的，因此无论用户选择哪种设备打开它们，它们看起来都不错。

避免常见 HTML 电子邮件编码错误的清单

您将在下面找到有关如何避免常见 HTML 电子邮件编码错误的主要规则。 遵循这些规则，您可以避免在可传递性和显示电子邮件方面出现问题。

• 在您的电子邮件中添加纯文本版本。
• 请勿使用 JavaScript、ActiveX、Flash 或更多此类内容。 如果您需要添加一些视频或音频，请将其上传到网站，并提供链接。
• 尽量避免重定向，以免增加网页的加载时间。
• 不要使用缩短的链接 - 使用 HTML 将一段文本或图像转换为链接。
• 尝试将您的电子邮件正文大小限制为 100 KB — 或者至少检查您的发送提供商和订阅者最常使用的电子邮件客户端的限制。
• 选择适合电子邮件的字体，例如 Arial、Comic Sans MS、Courier New、Times New Roman 或 Verdana。
• 尽量不要在一封电子邮件中组合两种以上的颜色——否则，它看起来会让人分心。
• 不要从文本编辑器（如 MS Word 或网站）复制电子邮件的文本和图像：存在捕获一些不必要格式的风险。
• 使用六位颜色格式。
• 不要附加文件 - 而是提供指向文件加载页面的链接。
• 不要忘记为图像添加替代文本。
• 不要只制作图像的电子邮件 - 始终添加一些文本。
• 在开始活动之前不要忘记测试电子邮件。 使用至少三个电子邮件客户端和不同的设备。

并且不必考虑所有这些 - 开始免费使用 SendPulse！