创建和发送HTML电子邮件的新手指南

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

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

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

一、什么是HTML电子邮件？

进入你的收件箱的电子邮件可能有两种方式：

纯文本：这几乎是现代的电报。没有造型或最低限度的格式，收件人看到的是文字，而不包含其他东西。

HTML：与纯文本相比，它是一个爆炸性的设计，而且是重在设计。它使用HTML代码来展示电子邮件，尽管正如我们将要讨论的，它并不总是利用现代网络标准。

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

--浏览器内的HTML电子邮件。

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

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

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

• 你可以利用固有的视觉元素，帮助将注意力集中在你的电子邮件内容的各个部分。

• 推而广之，HTML电子邮件是一种呈现你的内容的丰富格式。这意味着你可以利用用户期望参与的元素，如图片、视频等。

• 这两个方面结合起来，可以为你提供一个极好的机会，使你的内容品牌化，就像你的主网站一样。

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

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

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

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

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

和网页一样，有一些元素对于你的电子邮件来说实际上是没有商量余地的。当然，你需要内容。这里有几个典型的元素需要考虑。

• 你的标题很重要，因为这是你的电子邮件提供给读者的第一印象。

• 就像网页设计一样，考虑在折页上方显示哪些元素也会有好处。

• 主体内容至关重要，因为这毕竟是读者会订阅你的电子邮件的原因。

• 你的HTML电子邮件的页脚也为你和你的订阅者提供了很多价值，它可能是你的电子邮件中一个被低估的元素。

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

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

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

HTML电子邮件的一些典型做法

当涉及到你在设计和布局中使用的一些最理想的做法时，与电子邮件营销有很多交叉的地方。有一个是你想包括的，几乎是没有商量余地的元素。双重选择。

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

--- 一个双重选择的电子邮件。

这有几个原因：

1. 第一，它与你的读者建立了信任，因为你得到了明确的许可向他们发送电子邮件。

1. 推而广之，在垃圾邮件转介的情况下，你也有明确的同意（后面会有更多的介绍）。

1. 你帮助阻止他人滥用电子邮件和垃圾邮件，因为他们必须特别选择订阅你的电子邮件。

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

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

• 我们的主题行应该是完美的，而你的邮件内容应该是有针对性的。鉴于移动浏览的出现和现在的主导地位，这一点尤其重要。

• 说到这一点，你要确保你的HTML邮件在小屏幕上读起来毫无障碍--这意味着没有过度的横幅或过大的标志。

• 如果你在每封邮件中都包含一个强有力的行动呼吁（CTA），你就会有一个很好的机会来提高用户参与度。

• 追踪是一个有争议的问题，但这将帮助你了解你的用户在你向他们发送邮件时做了什么。一些供应商将一套可靠的分析方法作为标准。

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

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

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

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

---

--- 一些HTML结构标签

然而，电子邮件的HTML和网页是不同的，因为它在某种程度上已经落后于时代。因此，你要使用所有那些旧的HTML5表格和内联风格来创建你的布局。至于为什么会这样，你需要和电子邮件客户端的开发人员谈谈，因为他们通常会在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

1. 它包括很多典型的功能，你会在许多其他类似的应用程序中发现。

1. 在推广业务时有很多帮助，如营销自动化、受众管理工具等。

1. 你有一套顶级的创意工具来帮助你建立HTML电子邮件。

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

是电子邮件营销应用程序的黄金标准，这有很多好的理由。

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

1. AWeber

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

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

1. 能够自动和安排信息、活动和更多。

1. 你有很好的组织工具，如订阅者标签和细分。

1. AWeber还可以让你自动为你的电子邮件创建内容。例如，你可以用最少的工作量将博客文章变成邮件发送。

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

3. Constant Contact

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

与AWeber一样，Constant Contact专注于电子邮件营销而不是其他以商业为中心的领域。因此，它有

1. 一个你会喜欢的功能集。

1. 你有客户名单管理工具和营销自动化功能。

1. 有广泛的报告选项。

1. 你能够整合来自Facebook、Instagram和谷歌的广告项目。

有很多方法可以吸引新的订阅者加入你的名单。

七、建立一个HTML电子邮件的内容

在你开始建立你的HTML电子邮件之前，你需要一些工具和技能在手。以下是你在敲打你的指关节并开始之前应该安排的事情。

1. 你要使用一个你觉得舒服的代码编辑器，因为它需要在这个过程中支持你。如果你不知道该选哪一个，很多用户选择Visual Studio Code，尽管Brackets是这项特殊任务的理想选择。我们将使用Onivim2，它是一个基于VS Code核心架构的Vim风格的编辑器。

1. 虽然你需要HTML技能，但你不需要与现代网络开发者一样的知识集（尽管这并不影响你的前景）。

1. 你需要一种方法来测试你的邮件--MailHog是我们在Kinsta博客的其他地方介绍的一种解决方案。

1. 虽然我们不打算使用预制模板，但你可能想在未来使用其中的一个。

1. 你还需要一个电子邮件提供商，因为你需要某种方式来发送你的成品HTML电子邮件。

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

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

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

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

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

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

<!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标签的讨论，你会记得我们不希望使用<div>或其他典型的结构元素。相反，我们希望使用表格，因为这在电子邮件客户端和服务中表现良好。

一切都将从正文中的一组简单的<table>标签开始。

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

我们在<table>标签中设置的属性有助于屏幕阅读器解析其中的文本，所以它对无障碍性有好处。

从这里开始，你需要向你的表格添加新的行和列，以便建立HTML电子邮件模板。你如何做到这一点取决于你，但最好从标题、页脚和正文部分的基础开始。为了简洁起见，我们在此不做赘述，但我们会在进展中提到它们。

好消息是，如果你需要添加更多的部分，你可以继续向你的表格添加新行。然而，从这里开始，你要开始引入样式和其他元素。

3.为HTML元素设计样式

HTML的魅力在于，它对你的风格设计几乎是不可知的。标记是直截了当的，但你所应用的样式可能不是这样。这就是你将看到你的HTML电子邮件变得生动的地方。

作为我们设计时的指南，我们将在<head>中添加一个<style>标签，以显示一般的边框。

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

如果你在你的浏览器中看一下这个，它看起来并不像什么。

---显示HTML电子邮件框架的浏览器窗口

然而，从这里开始，你可以使用表格和样式标签进一步开发你的电子邮件模板。例如，我们已经为我们的标题做了一个实质部分，并扩展了页脚和正文。

--创建期间的模拟电子邮件模板（图片来源：Settergren）

你很可能会创建一个更好的、更适合你的需求的模板，但使用嵌套表和一些基本的HTML技能，你可以创建一个响应式的、定制的HTML电子邮件模板，并实现目标。

4. 测试邮件

在你完成之前，你要测试你的电子邮件，以确保它在不同的设备上呈现良好的效果。有一些不同的服务可以在这方面提供帮助。

例如，Email on Acid包括一个完整的部署前检查表，以帮助你确保你的模板不会造成问题。

The Email on Acid website.

Litmus的用户会知道PutsMail，但它对所有人都适用。

The Litmus website.

你需要注册一个账户来使用这项服务，但使用起来很简单。你可以利用该功能在一些不同的浏览器和各种设备上预览电子邮件。

Mailgun还提供了一个与其主要产品相关的奇妙服务。你能够通过界面测试电子邮件客户端、浏览器等。此外，你还可以测试诸如主题行等元素，以确保你保持高打开率。

Mailgun’s Email Tester tool.

然而，一旦你测试出你的电子邮件，你就需要确保它进入收件人的信箱。在最后一节，我们将进一步讨论这个问题。

九、发送HTML电子邮件，你需要知道的事情

使用电子邮件营销服务的一个好处，我们还没有提到，就是它将如何处理发送电子邮件的法律问题。这一点很重要，因为如果你在这方面出了问题，你不仅无法接触到收件人，还会给自己带来麻烦。

一个电子邮件营销服务将已经与处理垃圾邮件和发送电子邮件的相关方面的组织有良好的工作关系。因此，如果你不希望有发送垃圾邮件的烦恼，选择其中一个通常是个好主意。

然而，无论你使用何种平台，我们都可以给出一些提示。

• 确保你遵守CAN-SPAM法案的所有准则，特别是如果你的主要受众是在美国。当然，不同国家会有自己的法律指令。

• 为订阅者包括一个双重选择。这是指你要求他们确认订阅，但也要发送第二次确认。这可以保护你和订阅者，如果有一个垃圾邮件查询或隐私要求。

可送达性是你的电子邮件的一个关键因素，这是我们在另一篇文章中深入介绍的内容。然而，这个概念是由几个方面组成的，如使用良好的代码，获得正确的许可水平，以及更多。

这与另一个方面有关--你的发送分数。这类似于信用分数，最终是对你的声誉的一种衡量。这里有几个不同的组成部分，构成了一个整体。

• 你的网站的跳出率。

• 你的网站收到的与你发送的电子邮件有关的投诉数量。

• 你的IP地址的声誉。

• 你的域名签名。

十、总结

邮件没有任何地方接近结束。因此，使用电子邮件满足你自己的需要--如推广和营销--是一种极好的、符合成本效益的方式来接触潜在的订户、用户和客户。

虽然你可以购买一个专用的HTML模板，但创建你自己的HTML电子邮件并不难。如果你心中有一个特定的愿景，这可能是你成功的方式。然而，你需要拿出你以前的HTML技巧，如条件式和嵌套表。HTML电子邮件设计还没有达到现代网页设计的水平，但你仍然可以做到以小博大。

你是否有创建HTML电子邮件的需要，如果有，你有什么问题？请在下面的留言区告诉我们讨论!

本文翻译版，翻译过程中稍有调整！