了解 HTML 电子邮件设计的挑战（和挫折）

如果您打开一个内容管理系统来构建网页，这是一个非常简单的过程。现代 Web 浏览器支持 HTML、CSS 和 JavaScript 严格一套网络标准。而且，它们实际上只是设计师需要担心的少数浏览器。当然，也有例外……还有一些特定于这些浏览器的简单解决方法或功能。

由于整体标准，在内容管理系统中开发页面构建器非常容易。浏览器符合 HTML5、CSS 和 JavaScript……并且开发人员可以构建非常强大的解决方案来构建对设备做出响应并在浏览器之间保持一致的网页。二十年前，几乎每个网页设计师都在使用桌面软件来开发网页。现在，网页设计师开发网页的情况非常少见——他们经常开发模板并在内容系统中使用编辑器来填充内容。网站编辑很棒。

但是电子邮件编辑器可悲地落后了。这就是为什么……

设计 HTML 电子邮件比网站复杂得多

如果您的公司想要设计精美的 HTML 电子邮件，则该过程比构建网页要复杂得多，原因有很多：

无标准 – 没有严格遵守任何网络标准通过显示 HTML 电子邮件的电子邮件客户端。事实上，几乎每个电子邮件客户端和每个电子邮件客户端的每个版本行为不同。有些会尊重 CSS、外部字体和现代 HTML。其他人尊重一些内联样式，只会显示字体集合，并忽略除表格驱动结构之外的所有内容。在这一点上，没有人在处理这个问题实际上是非常荒谬的。因此，设计在客户端和设备上一致呈现的模板已成为一项大生意，而且可能非常昂贵。
电子邮件客户端安全 – 就在本周，Apple Mail 更新为默认阻止 HTML 电子邮件中未嵌入电子邮件中的所有图像。您要么授予他们一次加载电子邮件的权限，要么必须启用设置才能禁用此设置。除了电子邮件客户端安全设置外，还有企业设置。
IT安全 – 您的 IT 团队可能会针对可以在电子邮件中实际呈现的对象部署严格的规则集。例如，如果您的图片来自未在企业防火墙中列入白名单的特定域，则图片根本不会出现在您的电子邮件中。有时，我们不得不开发电子邮件并将所有图像托管在公司的服务器上，以便他们自己的员工可以看到这些图像。
电子邮件服务提供商 – 更糟糕的是，电子邮件服务提供商 (ESPs) 实际上引入问题而不是限制它们。虽然他们宣传他们的编辑是 你所看到的就是你得到的 (所见即所得)，而电子邮件设计往往恰恰相反。您将在他们的平台上预览电子邮件，然后电子邮件收件人会看到各种设计问题。公司通常会在不知不觉中选择功能丰富的编辑器，而不是认为一个功能比另一个功能更多的锁定编辑器。反之亦然……如果您想要在所有电子邮件客户端中一致呈现的电子邮件，越简单越好，因为出错的可能性越小。
电子邮件客户端渲染 – 有数百个电子邮件客户端，每个客户端在桌面、应用程序、移动和网络邮件客户端呈现 HTML。虽然您的电子邮件服务提供商上漂亮的文本编辑器可能有在您的电子邮件中放置标题的设置……但每个电子邮件客户端的填充、边距、行高和字体大小可能不同。因此，您必须简化 HTML 并对每个元素进行不同的编码（参见下面的示例）——并且经常写入特定于电子邮件客户端的异常——以使电子邮件一致地呈现。没有简单的块类型，您必须进行表格驱动的布局，这相当于 XNUMX 年前的网络构建。这就是为什么任何新布局都需要开发和跨电子邮件客户端和设备测试的原因。您在收件箱中看到的内容可能与我在收件箱中看到的完全不同。这就是为什么渲染工具喜欢酸电子邮件 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 大区别:

电子邮箱

我们必须构建一系列表格，其中包含正确放置按钮所需的所有内联样式，并确保它在电子邮件客户端中看起来不错。在这封电子邮件的顶部还会有一个随附的样式标签来合并这些类。

<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>

网路

我们可以使用带有类的外部样式表来定义显示为按钮的锚标记的大小写、对齐方式、颜色和大小。

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

如何避免电子邮件设计问题

遵循适当的流程可以避免电子邮件设计问题：

模板设计 – 构建具有不同布局和内容块的模板，其中包含您想要在电子邮件设计中产生的每种样式。当我们实现一个客户端时，我们总是将它们推送到为未来设计一封电子邮件 – 不仅仅是发送出去的下一个电子邮件活动。这样，我们就可以完全设计、开发、测试和实施必要的变通办法 before 他们曾经发送过第一封电子邮件。
模板测试 – 在部署任何模板之前，了解您的订阅者正在使用的电子邮件客户端并确保您的 HTML 电子邮件在移动设备和桌面设备上经过全面测试至关重要。我们可以从 Photoshop 布局中直接设计一封电子邮件……但是将其分割成表格驱动的跨电子邮件客户端对于部署最佳且一致的电子邮件设计至关重要。
内部测试 – 设计和测试模板后，应将其发送到组织内部的种子列表以进行审核和批准。您甚至可能希望从非常有限的个人子集开始，首先确保不存在与内部呈现电子邮件相关的防火墙或安全问题。如果这是在新的电子邮件服务提供商上构建实例，您甚至可能会发现一些与将电子邮件发送到收件箱相关的过滤或阻止问题。
模板版本控制 – 在没有使用可以设计、正确测试和部署的新模板版本之前，不要更改布局或设计。许多企业喜欢为每个活动设计一次性设计……但这需要为每个活动设计、开发和部署每封电子邮件。这为内部电子邮件营销流程增加了大量时间。而且，您可能不了解电子邮件中的哪些元素表现良好，而哪些元素表现不佳。一致性不仅是简化流程的一种方式，它对订阅者的行为也很重要。
电子邮件服务提供商例外 – 几乎每个电子邮件服务提供商都有解决其电子邮件构建器引入的问题的方法。我们通常可以将原始 CSS 添加到帐户中——甚至在每封电子邮件中都必须包含一个内容块——以便公司利用内置的电子邮件编辑器而不让它破坏你的电子邮件设计。当然，这可能需要一些培训和流程控制来部署这些步骤，以确保它们得到遵守。或者 – 您可能只是想在一个被证明可以跨客户端和设备工作的解决方案中开发您的电子邮件设计，然后将其粘贴回您的电子邮件服务提供商。

电子邮件设计平台

由于电子邮件服务平台在构建和维护跨客户端和跨设备一致呈现的构建器方面做得很差，因此市场上出现了许多出色的平台。我们广泛使用的一种是条纹.

Stripo 不仅仅是一个电子邮件生成器，他们还拥有一个包含 900 多个模板的库，可以轻松导入。设计电子邮件后，您可以向 60 多个 ESP 和电子邮件客户端发送电子邮件，包括 Mailchimp、HubSpot、Campaign Monitor、AWeber、eSputnik、Outlook 和 Gmail。最好的 Stripo 模板附带了电子邮件渲染测试，因此您可以确保它们已经过测试，并且可以在 40 多个电子邮件客户端中一致地工作。

登录到 Stripo 编辑器演示

披露：我正在链接到我的营销咨询公司谁为几乎所有电子邮件服务提供商的领先品牌设计和部署跨客户端电子邮件。我也是下属条纹我在这篇文章中使用了我的链接。

有关 Martech Zone 公司条款