创建和发送HTML电子邮件的初级指南

快速突击测验。网络开发人员用来创建你每天访问的网站结构的语言名称是什么？撇开聪明和过度聪明的答案不谈，超文本标记语言（HTML）是一个常青的标准，在网络诞生之初就存在。然而，这并不只适用于网页。你的收件箱是HTML电子邮件设计的肥沃土壤。

如果你考虑到你几乎每小时都会在你的电子邮件中看到多少图片、GIF、视频和品牌内容，这就很有意义。虽然你可以提供纯文本的电子邮件，但HTML版本将提供更多的好处，给你更多的机会来塑造和推销你自己和你的业务。

对于这篇文章，我们将讨论如何创建和发送HTML电子邮件，以及为什么你应该这样做。在某些地方，我们会深入探讨如何编写电子邮件的代码，但你并不需要这些知识来创建你自己的电子邮件。

什么是HTML电子邮件？

发送到你收件箱的电子邮件有两种类型。

• 纯文本。 这几乎是现代的电报。没有造型或最小的格式，收件人看到的是文字，而不是其他东西。
• HTML。 与纯文本相比，它是一个爆炸性的鞭炮，而且是重度设计。它使用HTML代码来展示电子邮件，尽管正如我们将要讨论的，它并不总是利用现代网络标准。

例如，如果你收到的是纯文本电子邮件，你就会知道，因为它看起来完全是一个纯文本文件。相比之下，HTML电子邮件看起来与现代网页几乎一样（给或不给一些风格和格式问题）。

浏览器中的HTML电子邮件。

在大多数情况下，HTML电子邮件不会努力提供终极的互动性或动态参与。同样，这也是我们稍后要讨论的问题，但从标准上来说，HTML电子邮件已经落后于网络了。因此，HTML更像是一种设计驱动的工具，而不是帮助提供一种体验的工具。这就带来了一个问题。如果只有视觉上的原因，你为什么要使用HTML电子邮件？接下来，我们就来回答这个问题。

为什么你要使用HTML邮件而不是纯文本格式？

由于一些原因，你很少会看到一个企业的纯文本电子邮件。然而，纯文本本身并没有错，更多的是它没有提供HTML电子邮件格式化的好处。比如说

• 你可以利用固有的视觉元素，帮助将注意力集中在你的电子邮件内容的各个部分。
• 推而广之，HTML电子邮件是一种展示你的内容的丰富格式。这意味着你可以利用用户期望参与的元素，如图片、视频等。
• 这两个方面结合起来，可以为你提供一个极好的机会，使你的内容品牌化，就像你的主网站一样。

然而，决定使用HTML电子邮件并不是你想象中的完美风暴。也有一些弊端需要考虑。首先，你必须考虑用户的体验，就像你设计一个网站时那样。这可能不仅包括浏览器--很多用户也喜欢在专门的客户端阅读电子邮件。

更重要的是，你还必须考虑一些主导网络发展的隐私和安全问题。如果你想包括JavaScript，你拉入第三方字体，以及其他方面，这一点尤其正确。

正因为如此，你几乎要在比网络更多的战线上进行可及性和标准之争。要创建一个在跨浏览器和客户基础上工作的HTML电子邮件是很困难的。当然，这是有可能做到的，我们将在未来的章节中介绍技术方面的问题。现在，你要把你的电子邮件的各种元素确定下来，然后寻求实现它们。

HTML电子邮件的基本要素（和典型做法

本文将在许多地方提到网页设计，因为它们有内在的相似性。提供类似工作流程的一个方面是如何决定你的HTML电子邮件的面和部分。

和网页一样，有一些元素对于你的电子邮件来说几乎是不可商量的。当然，你需要内容。这里有几个典型的元素需要考虑：

• 你的标题很重要，因为这是你的电子邮件给读者的第一印象。
• 就像网页设计一样，考虑哪些元素显示在折叠上方也会有好处。
• 主体内容是至关重要的，因为这毕竟是读者会订阅你的电子邮件的原因。
• 你的HTML电子邮件的页脚也为你和你的订阅者提供了很多价值，它可能是你的电子邮件中一个被低估的元素。

这里有几个要点我们可以进一步触及。首先，考虑到表情符号在我们日常的网络使用中渗透了多少。虽然它们不是一个严格的HTML元素，但有品位的应用表情符号可以为你的内容创造奇迹，特别是你的标题。

标题中使用的一些表情符号。

页脚也是一些基本法律信息的最佳位置。与电子邮件有关的两个最大的问题是垃圾邮件和电子邮件是否进入正确的收件箱（如果有的话）。这一点我们将在后面的章节中讨论，因为这是创建和发送HTML电子邮件的一个重要部分。

考虑到你的HTML电子邮件的一些典型做法

当涉及到你将在设计和布局中使用的一些最理想的做法时，与电子邮件营销有很多交叉的地方。有一种做法，你几乎要把它作为一个不可谈判的元素。双重选择。

最大的电子邮件营销黑客之一是，你想把你的电子邮件带给读者。换句话说，在网站上提供一个选择加入的表格，因为这有很大的转换率。然而，它不应该是你唯一要求确认的时间。以电子邮件的形式发送第二次选择加入是一个很好的做法。

一封双重选择的电子邮件。

这样做有几个原因：

• 第一，它与你的读者建立了信任，因为你得到了向他们发送电子邮件的明确许可。
• 推而广之，在垃圾邮件转介的情况下，你也得到了明确的同意（后面会有更多的介绍）。
• 你帮助阻止他人滥用电子邮件和垃圾邮件，因为他们必须特别选择订阅你的电子邮件。

事实上，由于双重选择涉及到你向有关地址发送电子邮件，这是验证电子邮件地址的最佳方式。

还有其他一些好的做法也要考虑。然而，以下这些更多的是可选的，在你会得到美妙的结果，但也会有你不想遵循这些准则的时候：

• 你的主题行应该是完美的，而你的邮件内容应该是有针对性的。鉴于移动浏览的出现和现在的主导地位，这一点尤其重要。
• 说到这一点，你要确保你的HTML邮件在小屏幕上读起来毫无障碍--这意味着没有过度的横幅或过大的标志。
• 如果你在每封邮件中都包含一个强有力的行动呼吁（CTA），你就有很大的机会获得更好的用户参与度。
• 追踪是一个有争议的问题，但这将帮助你了解你的用户在你向他们发送邮件时做了什么。一些供应商将一套可靠的分析方法作为标准。

与你如何展示和设置你的电子邮件同样重要的是如何创建设计和布局。在接下来的几节中，我们将研究如何建立一个HTML电子邮件，然后以一些发送技巧结束。

创建HTML电子邮件所需的技术方法

如果你有一些网络开发经验，你无疑会使用HTML5作为你的标记语言。这与以前的HTML和XHTML有天壤之别，包括更多的样式（其中有效的元素几乎为零）和结构之间的划分。

对于后者的例子，HTML5提供了许多不同的标签来定义网站的内容区域。

一些HTML结构标签。

然而，电子邮件的HTML是一个不同的野兽，因为它在一定程度上落后于时代。因此，你要使用所有那些旧的HTML4表格和内联造型来创建你的布局。至于为什么会这样，你需要和电子邮件客户端的开发人员谈谈，因为他们通常会在HTML邮件进入你的收件箱时进行修改。最常见的行为之一是，出于安全原因（包括其他原因），将CSS和JavaScript从电子邮件中剥离。

这意味着你需要提供另一种方式来为你的HTML电子邮件添加样式--内联是兼容性的唯一选择。说到兼容性，这是一个重要的考虑因素。你必须平衡独特的造型和最终用户的电子邮件客户端的能力。因此，还有一些其他的技术考虑，你要注意：

• 使用系统字体而不是第三方字体将为你节省一个HTTP请求，为用户快速加载邮件，并提供一个外观一致的邮件。
• 你可以更进一步，为那些不能在客户端查看HTML邮件的人提供一个纯文本版本的邮件。很多网站会提供一个HTML版本，你可以在线访问，这既是为了这个原因，也是作为一个备份。
• Alt-text对于HTML邮件和网络一样重要。因此，在你添加图片到你的内容中的任何地方都要使用alt文本，以利于访问。

在HTML电子邮件中，有一个技术方面你应该多加考虑，因为它可以跨越内联造型、CSS和其他因素之间的界限。让我们简单地讨论一下 "条件"。

使用条件式

HTML电子邮件的一个遗留问题是条件式，它曾经是老一代HTML网站开发者的工具箱。在这里，你可以指定哪个浏览器将使用一个特定的代码段。

说实话，这几乎总是一个基于微软的问题。对于网页开发者来说，Internet Explorer（IE）是恶魔般的浏览器产儿。然而，对于HTML电子邮件，它是Outlook。在不同的版本之间，你可能会看到你的造型以一种你意想不到的方式呈现出来。

正因为如此，你可以在你的代码中添加条件块，并定义这些元素。例如，你可以同时针对基于Word和基于IE的Outlook版本。

首先是Word

<!--[if mso]>

这是针对基于Word的Outlook版本的

<![endif]-->

对于Internet Explorer，你使用一个不同的标签

<!--[if (IE)]>

这是为基于IE的Outlook版本

<![endif]-->

如果你的目标浏览器是基于WebKit的（比如苹果的Safari浏览器、PlayStation浏览器、亚马逊的Kindle等等），你可以使用媒体查询来提供特定的样式。

.html-email-webkit {
  display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ..html-email-webkit {
    display: block !important;
  }
}

这为你提供了一个稍好的方法，使你的HTML电子邮件适应最终用户的显示。总的来说，电子邮件的HTML风格设计并不完美，但每个电子邮件客户端都有足够的功能来帮助你创建一些令人惊叹的布局。

构建HTML电子邮件的选择

尽管我们已经讨论过了，但你有许多灵活的选择来帮助你创建HTML电子邮件。例如，你可以使用一个漂亮的文本编辑器和HTML从头开始创建。

然而，我们还可以考虑其他选择：

• 你可以使用一个专门的服务，如电子邮件营销应用程序，来创建你的电子邮件。很多应用程序将提供一个视觉构建器，但也给你写自己的代码的范围，并创建自己的模板。
• 说到这一点，你可以为你的HTML电子邮件下载一个模板。这很像WordPress的主题，因为它为你的其他设计提供一个基础。从那里，你可以根据你的喜好来定制它。这是在编码和构建选项之间的一个很好的中间点。

稍后，我们将使用HTML建立我们的电子邮件。然而，在此之前，让我们看看你可能要考虑的一些电子邮件服务提供商，无论你选择何种方法来创建你的电子邮件。

3个非常适合创建HTML电子邮件的电子邮件服务提供商

因为这篇文章的重点是创建HTML电子邮件，所以当涉及到电子邮件服务提供商时，我们不需要太深入。即便如此，也有一些你可能会考虑的。

我们不可能把它们都包括在内，所以我们要提到三个最受欢迎的。让我们把它们集中起来。

1.邮递员

Mailchimp的标志。

这个电子邮件服务提供商是一个首选的解决方案--对许多人来说几乎是一个膝跳决定。在许多人眼里，Mailchimp是电子邮件营销应用程序的黄金标准，这有很多很好的理由。

• 它包括许多典型的功能，你会在许多其他类似的应用程序中发现。
• 在推广业务时有很多帮助，如营销自动化、受众管理工具等。
• 你有一套顶级的创意工具来帮助你建立HTML电子邮件。

当然，我们在这里要看的是后者。创意助手是Mailchimp了解你的品牌并帮助你建立和个性化你的邮件的一种方式。你还可以连接第三方应用程序，如Adobe Photoshop，帮助你建立完美的电子邮件。

使用现有的HTML也是很直接的，特别是如果你使用Mailchimp的经典构建器。不管怎么说，如果你需要，你确实有办法导入HTML模板。

Mailchimp使用了一种复杂的月度订阅层级和联系人数量的混合体来得出最终的价格。我们建议，小型企业需要每月35美元左右的计划，最多2500个联系人。然而，你需要根据你需要的功能和你认为你会带来的联系人数量来研究最适合你的计划。

2.AWeber

对于一些人来说，AWeber代表了电子邮件营销的巅峰。它是一个神奇而强大的平台，包括一个可以说比Mailchimp更集中的功能集。

AWeber的标志。

它包括一些你发送电子邮件所需的基本功能。

• 自动化和安排信息、活动等的能力。
• 你有很好的组织工具，如订阅者标签和细分。
• AWeber还可以让你自动为你的电子邮件创建内容。例如，你可以用最少的工作量将博客文章变成邮件发送。

当谈到创建你的电子邮件时，AWeber有一些技巧。它使用一个拖放式的视觉构建器，并包括一个自定义模板库来启动你。更重要的是，你可以将AWeber连接到你的Canva账户，使用后者来帮助设计你的电子邮件。

还有一个专门的HTML编辑器，这是Mailchimp所不具备的。你甚至可以在AWeber的免费层中得到这些。说到这一点，这里的定价更加简单明了。你每月支付25美元左右，最多可获得2500个联系人。

3.康斯坦丁联络公司

在谈到电子邮件服务提供商时，Constant Contact是一个异类，但它更像是一个秘密武器。它提供了一系列奇妙的特性和功能，而且在你需要的时候还能让你用HTML来工作。

Constant Contact的标志。

和AWeber一样，Constant Contact专注于电子邮件营销而不是其他以商业为中心的领域。因此，它有一个你会喜欢的功能集。

• 你有客户名单管理工具和营销自动化功能。
• 有广泛的报告选项。
• 你能够整合来自Facebook、Instagram和谷歌的广告项目。
• 有很多方法可以吸引新的订阅者加入你的名单。

Constant Contact的设计功能也很好。你可以选择一个模板并使用视觉编辑器来构建整个设计。然而，你也可以使用HTML--有时是与其他工具相比的高级方式。

定价也很合理。你将为核心计划和2500个联系人每月支付约35美元，或为强化计划支付70美元。

建立HTML电子邮件需要什么？

在你开始建立你的HTML电子邮件之前，你需要一些工具和技能在手。下面是你在开始之前应该安排的东西：

• 你要使用一个你觉得舒服的代码编辑器，因为它需要在这个过程中支持你。如果你不知道该选哪一个，很多用户选择Visual Studio Code，尽管Brackets是这项特殊任务的理想选择。我们将使用Onivim2，它是一个基于VS Code核心架构的Vim风格的编辑器。
• 虽然你需要HTML技能，但你不需要与现代网络开发者一样的知识集（尽管这并不影响你的前景）。
• 你需要一种方法来测试你的邮件--MailHog是我们在Kinsta博客的其他地方介绍的一种解决方案。
• 虽然我们不打算使用预制模板，但你可能想在未来使用其中的一个。
• 你还需要一个电子邮件提供商，因为你需要某种方式来发送你的成品HTML电子邮件。

所有这些都准备好了，你就可以打开一个文本编辑器，开始工作了。接下来，我们将通过这个过程来创建一个基本的HTML电子邮件。

如何从头开始创建一个HTML电子邮件

在我们开始之前，值得注意的是，我们不打算使用一个专门的服务，如Mailchimp或AWeber。相反，我们将从头开始创建一个简单的模板，你可以在你需要的地方导入。

我们将把这个过程分成几个不同的部分，因为虽然HTML电子邮件只是相对于网站而言的，但仍然有很多东西需要考虑。

1.为你的HTML电子邮件打下基础

从你的电子邮件模板的骨架开始，这是一个好主意。这将遵循一般HTML的一些典型做法。

纠结于宕机和WordPress问题？Kinsta是为节省你的时间而设计的托管解决方案查看我们的功能

<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

这里有几件事情是我们应该提到的。首先，我们为Transitional XHTML 1.0指定一个 "doctype"，这是电子邮件开发人员的一个常见做法。从那里，我们指定了一个XML命名空间，这在后面会很重要。

你还会注意到一些元标签，这些标签定义了字符集，以及浏览器应该如何在其视口中渲染后面的HTML。

骨架的其余部分很简单--有标题和正文标签，我们接下来会用到。

2.为你的邮件模板添加结构

回顾我们关于使用什么HTML标签的讨论，你会记得我们不希望使用

<body>
  <table role="presentation">
    <tr>
      <td>
      </td>
    </tr>
  </table>
</body>

<style>
  table, td {border:2px solid #000000 !important;}
</style>

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>