MENU

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

October 30, 2020 • 默认分类

尽管电子邮件千篇一律,但编码错误可能会完全破坏它。只有一个错误地缩短的链接或错误的颜色格式-您的电子邮件看起来会很糟糕,特别是如果用户决定通过智能手机而不是Web电子邮件客户端来检查它或切换到具有不同屏幕分辨率的小工具时。

在本文中,我们将讨论常见的HTML电子邮件编码错误,并分享一些避免错误的建议。
内容
电子邮件显示问题从何而来?
常见的电子邮件编码错误以及如何避免它们
没有纯文本版本
使用JavaScript,ActiveX,Flash等更多类型
重定向过多
缩短链接
电子邮件正文文件较大
字体和颜色太多
从文本编辑器或网站复制电子邮件模板HTML代码
使用三位数的十六进制颜色代码
附件
缺少替代文字
仅图像布局
避免电子邮件编码错误的另一种方法
避免常见HTML电子邮件编码错误的清单
电子邮件显示问题从何而来?
简而言之,用户看到您的电子邮件超出了您计划的方式,可能有两个原因。第一个与用户设备的技术特征有关。第二个是电子邮件客户端,更确切地说是它的呈现引擎。

用户设备的技术特征
您应考虑的任何设备至少具有两个技术特征:

屏幕分辨率-屏幕尺寸,以像素为单位。例如,iPhone X的屏幕分辨率为1125×2436像素。如果您的电子邮件包含两列文本,每列600像素,则该文本将无法正确显示。
PPI,或每英寸像素数-屏幕一英寸的像素数。iPhone X的PPI为458。想象一下:您需要在电子邮件中添加一个操作按钮。如果该按钮小于44点(对于iPhone X而言为132×132像素),则其占用的屏幕空间将不到平方英寸的三分之一,并且用户几乎无法点击它。
需要记住的一件事:用户经常旋转他们的移动设备,因此您的电子邮件应该看起来很整洁,并且在纵向和横向视图中都具有完整的功能。

为避免与用户设备的技术特征相关的问题,应使用响应式电子邮件设计。

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

其次,您应该以表格的形式创建一个包含单元格的电子邮件:

... </ td> </ tr> </ table> 然后,为每个单元格添加样式,例如: “” </ td> 但是,即使采取了这些措施,您在显示电子邮件时仍然会遇到问题。问题的根源是电子邮件客户端的呈现引擎。 电子邮件客户端 可能的显示问题的第二个来源是收件人用来打开广告系列的电子邮件客户端。电子邮件客户端的核心部分是渲染引擎。它以长代码脚本的形式接收电子邮件,对其进行处理并以我们习惯于接收电子邮件的方式输出:具有图像,链接和其他媒体的可理解,结构化和格式化的文本。 看下面的例子。这是一封促销电子邮件中的一段代码,就像Gmail的呈现引擎所看到的那样。如果将这封电子邮件以这种方式显示给潜在客户,他们几乎不会切入代码,并且知道有40%的折扣促销代码。 促销电子邮件代码 促销电子邮件中带有折扣的一段代码 每个电子邮件客户端都有自己的呈现引擎,这意味着通过不同的电子邮件客户端打开的同一封电子邮件可以具有完全不同的外观。 以下是全球最受欢迎的电子邮件客户端列表。显然,您的收件人使用一个或什至一大堆打开您发送的电子邮件。 电子邮件客户端市场份额 电子邮件客户端市场份额 根据2020年9月Litmus跟踪的9.96亿个营业额计算得出; 来源:电子邮件客户端市场份额 所有这些电子邮件客户端都有一些在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>块。 据信这种方法可以防止显示电子邮件的大多数问题。但是,让我们仔细研究一些特定的编码错误,这些错误可能会破坏您的电子邮件,并试图找到解决方案。 想推广您的产品吗? 借助SendPulse,您可以通过他们喜欢的通信渠道发送各种类型的消息来吸引目标受众,这些消息包括电子邮件活动,Web推送通知,SMS和Facebook Messenger或Telegram的聊天机器人。 注册 没有纯文本版本 潜在问题。如果没有纯文本版本,某些电子邮件客户端(例如Outlook和Gmail)可以将您的电子邮件定义为垃圾邮件。此外,有时电子邮件客户端在呈现HTML代码时会遇到问题。因此,HTML电子邮件可能无法正确显示,而纯文本电子邮件始终看起来相同。 预防。在电子邮件中添加纯文本版本。幸运的是,大多数电子邮件服务提供商都会自动添加它。 纯文本电子邮件 电子邮件的纯文本版本 您可以在电子邮件营销策略中实施纯文本电子邮件。首先,此类电子邮件看起来更加个人化,因此可以提高您与订户的交流。而且,有些人更喜欢直接处理电子邮件,而丰富多彩的布局使它们不受欢迎。 深入了解:用 纯语言解释纯文本电子邮件 使用JavaScript,ActiveX,Flash等更多类型 潜在问题。大多数电子邮件客户端不支持这些语言,框架和插件,因此将不会呈现电子邮件的一部分,并且订阅者只能看到空白。此外,该电子邮件可能已被防病毒软件禁止。 预防。保留用于将电子邮件编码为HTML和CSS的语言。如果您需要添加一些视频或音频,请将其上传到网站,并提供指向它的链接。 了解NiftyImages如何呈现新产品功能:该公司选择了一系列图像,尽管这可能是说明性视频。 电子邮件范例 来自NiftyImages的电子邮件 重定向过多 潜在问题。重定向虽然是分析所必需的,但对您的电子邮件造成的危害却大于弊端。例如,它们使网页的加载时间大大延长。然后,用户的浏览器可能会阻止重定向-因此,URL将不可访问。 深入研究: 如何提高缓慢的网站速度 预防。尝试避免重定向。但是,如果仍然需要使用它们,请检查一下加载目标URL所需的时间-在启动整个广告系列之前测试您的电子邮件。考虑您的订阅者的体验:是否愿意等待URL加载。 缩短链接 潜在问题。缩短的链接使您的电子邮件有最终被放入垃圾邮件文件夹的风险。关键是在缩短的链接中,目标URL不清楚。简单来说,它可能导致任何地方。自然,黑客和垃圾邮件散布者会利用这一点。 深入探讨: 如何防止电子邮件进入垃圾邮件 预防。不要使用缩短的链接。如果您的目标是使电子邮件看起来简洁,没有长URL,则最好使用以下HTML标签:...。您可以在此处插入任何URL,无论它有多长。 长链接 完整的链接已成功隐藏在丝芙兰电子邮件中 如果您仍然希望缩短链接,请缩短自己的URL,而不要使用第三方工具。至少提前扫描链接缩短器的黑名单。 电子邮件正文文件较大 潜在问题。电子邮件客户端和电子邮件服务提供商都具有电子邮件正文大小限制,因为它们旨在传输相对少量的信息。如果您不符合这些限制,则电子邮件可能会被剪裁,其结尾将被隐藏。 看一下音乐唱片公司的时事通讯。通过Gmail打开时,它会被裁剪。 裁剪的电子邮件示例 Gmail中的剪辑电子邮件 要查看其完整版本,订户需要点击一个链接。 完整版本的剪辑电子邮件 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工具,该工具可让您在用户友好的编辑器中创建电子邮件并同时检查代码。 使用HTML Cleaner 使用三位数的十六进制颜色代码 潜在问题。尽管三位数和六位数的颜色格式应该等效,但有时电子邮件客户端以略有不同的方式呈现三位数的格式。例如,使用Gmail,您有可能color: #000会变成紫色而不是您计划的黑色:变成color: #500050。 电子邮件中的彩色显示问题 电子邮件中的颜色问题示例 预防。根据经验,请坚持使用六位数的颜色格式,并确保在整个电子邮件中都使用它。 附件 潜在问题。通常,垃圾邮件发送者和黑客会将一些文件附加到他们的电子邮件中。如果添加附件,则可能被视为安全威胁。 预防。提供指向文件加载页面的链接,而不是将文件添加到电子邮件中。 这是一个示例,说明如何授予用户访问您所承诺的文件的权限。请注意链接的指定方式:它应该是可点击的可理解文本,以便用户在点击链接时知道会发生什么。 电子邮件中的下载链接 电子邮件中文件链接的示例 缺少替代文字 潜在的问题。一些用户禁止在其浏览器中下载图像。如果他们收到一封电子邮件,包括没有替代文本的图像,则他们只会看到空格而不是图像,并且不会理解电子邮件的重点。 当某人的互联网连接太低而无法足够快地下载图像时,它的工作原理相同。替代文字可以通过以下方式帮助解决此问题:当图片下载出现错误时,用户可以看到文字。 预防。alt向您使用的所有图像添加属性。确保正确执行-通过将其添加到img 标签中:text。将替代文本限制为125个字符,包括空格。通常,仅添加几个准确描述图像的单词就足够了。如果还有剩余空间,可以在此描述中添加一些上下文。 看看丝芙兰的一封电子邮件摘录。 丝芙兰电子邮件 丝芙兰电子邮件摘录 如果您查看此电子邮件的代码,则可以找到CTA作为图片的替代文本。即使用户看不到图像,他们仍然会理解该品牌所提供的产品。 cta替代文字 替代文字的示例 仅图像布局 潜在问题。如果您的电子邮件仅包含图像而没有任何文本,则可能会遇到可传递性,显示等问题。例如,如果用户阻止图像下载,则他们在您的电子邮件中几乎看不到任何内容。其次,大量图像使电子邮件正文更大,电子邮件客户端可能会对其进行裁剪。第三,用户将无法通过按词搜索在文件夹中找到您的电子邮件。 预防。创建电子邮件时,请结合文本和图像。不要忘记添加电子邮件的纯文本版本和图片的替代文本;考虑到我们上面给出的其他建议。 看看来自Ecwid的这封电子邮件。它具有响应式设计,其中包括表布局和媒体查询,例如max-width: 570px。电子邮件结合了不同类型的内容:彩色,迷人的图像和文本。例如,使用六位彩色格式color:#979797或color:#4A4A4A。电子邮件中的图像不多,因此其主体尺寸不会太大。此外,在电子邮件中既找不到缩短的链接,也没有重定向。总体而言,此电子邮件符合上面给出的大多数建议。 平衡的电子邮件 来自Ecwid的电子邮件均衡的示例 因此,我们已经了解了最常见的HTML电子邮件编码错误。应用我们的建议,并且不要忘记在发送之前测试您的电子邮件:至少​​使用三个受欢迎的电子邮件客户端打开您的电子邮件;如果可能,也通过其他设备进行检查。仿真器也将派上用场。 避免电子邮件编码错误的另一种方法 有一个道理:如果不编写代码,就不会犯HTML编码错误。幸运的是,SendPulse正在等待无代码电子邮件的设计。 使用我们直观的拖放编辑器,我们已经防止您犯电子邮件编码错误。只需将图像,文本或视频添加到您的电子邮件中,即可设置字体和颜色以使其与您的品牌风格相匹配,并向您的社交媒体页面添加链接。 为了简化整个过程,您可以从我们的免费电子邮件模板中进行选择。使用SendPulse创建的所有电子邮件都是响应式的,因此无论用户选择打开哪种设备,它们的外观都很好。 避免常见HTML电子邮件编码错误的清单 在下面,您将找到有关如何避免常见的HTML电子邮件编码错误的主要规则。遵循这些规则,可以避免传递性和显示电子邮件方面的问题。 在您的电子邮件中添加纯文本版本。 请勿使用JavaScript,ActiveX,Flash或其他类似类型。如果您需要添加一些视频或音频,请将其上传到网站,并提供指向它的链接。 尽量避免重定向,以免增加网页的加载时间。 不要使用缩短的链接-使用HTML将一段文本或图像转换为链接。 尝试将您的电子邮件正文大小限制为100 KB-或至少检查出发送方和订户使用最多的电子邮件客户端的限制。 选择电子邮件友好的字体,例如Arial,Comic Sans MS,Courier New,Times New Roman或Verdana。 尽量不要在一封电子邮件中组合两种以上的颜色-否则,看起来会分散注意力。 不要从诸如MS Word或网站之类的文本编辑器中复制电子邮件的文本和图像:存在捕获不必要格式的风险。 使用六位数的颜色格式。 不要附加文件,而是提供指向文件加载页面的链接。 不要忘记在图像中添加替代文本。 不要仅发送图像电子邮件,请始终添加一些文本。 在开始竞选之前,请不要忘记测试电子邮件。至少使用三个电子邮件客户端和不同的设备。 参考文档: https://sendpulse.com/blog/email-coding-mistakes

兼总条贯 知至知终