了解 HTML 电子邮件设计的挑战(和挫折)
如果您打开内容管理系统来构建网页,这是一个非常简单的过程。现代网络浏览器支持 HTML, 的CSS和 JavaScript 符合严格的 Web 标准。它们只是设计师需要担心的少数浏览器。当然,也有例外......以及一些简单的解决方法或特定于这些浏览器的功能。
由于总体标准,在内容管理系统中开发页面构建器非常简单。浏览器符合 HTML5、CSS 和 JavaScript……开发人员可以构建极其强大的解决方案来创建响应设备且跨浏览器一致的网页。二十年前,几乎每个网页设计师都使用桌面软件来开发网页。现在,网页设计师开发网页的情况相当罕见——他们通常会开发模板并使用内容系统中的编辑器来填充内容。网站编辑非常棒。
但是电子邮件编辑器可悲地落后了。 这就是为什么……
设计 HTML 电子邮件比网站复杂得多
如果您的公司想要设计精美的 HTML 电子邮件,则该过程比构建网页要复杂得多,原因如下:
- 无标准 – 显示 HTML 电子邮件的电子邮件客户端没有严格遵守 Web 标准。事实上,每个电子邮件客户端和每个电子邮件客户端的每个版本的行为都不同。有些会尊重 CSS、外部字体和现代 HTML。其他人则尊重一些内联样式,仅显示字体集合,并忽略除表驱动结构之外的所有内容。没有人致力于解决这个问题,这真是可笑。因此,设计能够在客户端和设备上一致呈现的模板已成为一项大生意,而且成本可能相当昂贵。
- 电子邮件客户端安全 – 最近,Apple Mail 更新为默认阻止 HTML 电子邮件中未嵌入电子邮件中的所有图像。您要么授予他们一次加载电子邮件的权限,要么必须启用设置才能禁用此设置。除了电子邮件客户端安全设置之外,还有公司设置。
- IT安全 – 您的 IT 团队可能会针对可以在电子邮件中实际呈现的对象部署严格的规则集。 例如,如果您的图片来自未在企业防火墙中列入白名单的特定域,则图片根本不会出现在您的电子邮件中。 有时,我们不得不开发电子邮件并将所有图像托管在公司的服务器上,以便他们自己的员工可以看到这些图像。
- 电子邮件服务提供商 – 更糟糕的是,电子邮件服务提供商 (ESPs) 实际上引入问题而不是限制问题。虽然他们宣传他们的编辑器是所见即所得 (WYSIWYG),但电子邮件设计的情况往往恰恰相反。您将在他们的平台中预览电子邮件,收件人将看到所有设计问题。公司常常不知不觉地选择功能丰富的编辑器而不是锁定的编辑器,认为它具有更多功能。事实恰恰相反……如果您希望电子邮件在所有电子邮件客户端上呈现一致,那么越简单越好,因为出错的可能性会更少。
- 电子邮件客户端渲染 – 数百个电子邮件客户端在桌面、应用程序、移动设备和网络邮件客户端上以不同的方式呈现 HTML。虽然电子邮件服务提供商的漂亮文本编辑器可能具有在电子邮件中添加标题的设置,但每个电子邮件客户端的填充、边距、行高和字体大小可能有所不同。因此,您必须简化 HTML 并对每个元素进行不同的编码(请参阅下面的示例),并且经常编写特定于电子邮件客户端的异常,以使电子邮件呈现一致。没有简单的块类型,您必须进行表格驱动的布局,这相当于三十年前的网络构建。这就是为什么任何新布局都需要开发以及跨电子邮件客户端和设备测试。您在收件箱中看到的内容可能与我在收件箱中看到的完全不同。这就是为什么像这样的渲染工具 酸电子邮件 or 石蕊 必须确保您的新设计适用于所有电子邮件客户端。 以下是流行的电子邮件客户端及其渲染引擎的简短列表:
- Apple Mail、Outlook for Mac、Android Mail 和 iOS Mail 使用 WebKit的.
- Outlook 2000、2002 和 2003 使用 互联网浏览器.
- Outlook 2007、2010 和 2013 使用 微软Word (是的,Word!)。
- Webmail 客户端使用其浏览器各自的引擎(例如,Safari 使用 WebKit,Chrome 使用 Blink)。
Web Vs 的 HTML 示例。 电子邮件
如果您想要一个示例来说明电子邮件与 Web 设计的复杂性,这是 Mailbakery 文章中的一个完美示例 电子邮件和 Web HTML 之间的 19 大区别:
电子邮件 HTML
我们必须构建一系列表格,其中包含正确放置按钮所需的所有内联样式,并确保它在电子邮件客户端上看起来不错。随附的样式标签也将位于此电子邮件的顶部以合并这些类。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
网页 HTML
我们可以使用带有类的外部样式表来定义显示为按钮的锚标记的大小写、对齐方式、颜色和大小。
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
如何避免电子邮件设计问题
遵循适当的流程可以避免电子邮件设计问题:
- 模板测试 – 在部署任何模板之前,了解订阅者使用的电子邮件客户端并确保您的 HTML 电子邮件在移动设备和桌面上经过全面测试至关重要。我们可以从字面上从 Photoshop 布局设计电子邮件……但是将其分割成表格驱动的跨电子邮件客户端对于部署最佳且一致的电子邮件设计至关重要。
- 内部测试 – 设计和测试模板后,应将其发送到组织内部的种子列表以进行审核和批准。 您甚至可能希望从非常有限的个人子集开始,首先确保不存在与内部呈现电子邮件相关的防火墙或安全问题。 如果这是在新的电子邮件服务提供商上构建实例,您甚至可能会发现一些与将电子邮件发送到收件箱相关的过滤或阻止问题。
- 模板版本控制 – 在没有使用可以设计、正确测试和部署的新模板版本之前,不要更改布局或设计。 许多企业喜欢为每个活动设计一次性设计……但这需要为每个活动设计、开发和部署每封电子邮件。 这为内部电子邮件营销流程增加了大量时间。 而且,您可能不了解电子邮件中的哪些元素表现良好,而哪些元素表现不佳。 一致性不仅是简化流程的一种方式,它对订阅者的行为也很重要。
- 电子邮件服务提供商例外 – 几乎每个电子邮件服务提供商都有解决其电子邮件构建器引入的问题的方法。 我们通常可以将原始 CSS 添加到帐户中——甚至在每封电子邮件中都必须包含一个内容块——以便公司利用内置的电子邮件编辑器而不让它破坏你的电子邮件设计。 当然,这可能需要一些培训和流程控制来部署这些步骤,以确保它们得到遵守。 或者 – 您可能只是想在一个被证明可以跨客户端和设备工作的解决方案中开发您的电子邮件设计,然后将其粘贴回您的电子邮件服务提供商。
电子邮件设计平台
由于电子邮件服务平台在构建和维护跨客户端和跨设备一致呈现的构建器方面做得很差,因此市场上出现了许多出色的平台。 我们广泛使用的一种是 条纹.
Stripo 不仅仅是一个电子邮件生成器,他们还拥有一个包含 900 多个模板的库,可以轻松导入。 设计电子邮件后,您可以向 60 多个 ESP 和电子邮件客户端发送电子邮件,包括 Intuit Mailchimp, HubSpot, 活动监视器, AWeber, 电子卫星, Outlook及 Gmail的。最重要的是,Stripo 模板附带了电子邮件渲染测试,因此您可以确保它们经过测试并在 40 多个电子邮件客户端中一致工作。