创建HTML电子邮件的简单指南[+免费模板]

当您使用拖放或基于模块的工具创建电子邮件时，实际上生成的是HTML电子邮件。

你可以发送和接收的电子邮件主要有两种:纯文本的电子邮件(它们听起来就是这样——任何没有格式的纯文本邮件)和HTML电子邮件，使用HTML和内联CSS格式化和样式化。

HTML电子邮件很容易被发现——你的收件箱中大多数有风格的多媒体营销电子邮件都是HTML电子邮件。

以下是纯文本邮件和基本HTML邮件的可视化比较:

屏幕截图2019-06-04下午5点03:00 作为营销人员，你已经可能发现每种类型都有不同的好处。HTML邮件并不是天生的更好的比纯文本电子邮件，以及在不同的情况下，这两种类型都可以成为成功的电子邮件营销计划的一部分。

在本文中，我们将介绍如何开始创建HTML电子邮件，无论您的体验级别和编码的舒适度，以及您可以使用的一些免费模板。让我们潜入。

如何创建HTML电子邮件

如果你不是HTML专家，有raybetapp个好消息:大多数创建和发送电子邮件的工具(比如HUBSPOT.)将提供预格式化的、现成的HTML模板，使您能够设计电子邮件，而不需要访问实际的代码后端。

当您在电子邮件编辑器进行更改时，这些更改将自动编码到最终产品中。如果您的团队中没有电子邮件设计师，则这样的电子邮件构建工具是一个理想的选项，但您仍然希望发送专业的营销电子邮件。你可以退房我们的电子邮件通讯工具的完整列表在这里raybetapp找到一个适合你的特殊需求。

如果你习惯HTML，想要更直接地控制你的电子邮件的代码，大多数电子邮件工具将允许你这样做直接导入HTML文件用作自定义电子邮件模板。在网络上有各种各样的免费HTML电子邮件模板(我们将在下面分享其中的一些)，如果你知道如何使用HTML文件，通常会很容易地将模板适应你选择的电子邮件构建工具。

要完全从零开始创建HTML电子邮件，您需要具备HTML的高级知识(或与具备这种知识的开发人员合作)。本指南提供了编写基本HTML电子邮件的坚实概述。因为从头创建HTML电子邮件的过程可能相当复杂，我们建议与开发人员一起工作或使用预先制作的HTML电子邮件模板。

专门为HUBSPOT开发HTML电子邮件？

如果您正在开发HTML电子邮件模板专门用于HubSpot，你要确保你包括了需要Hubl令牌（这些确保您的电子邮件可以自定义并符合要求- spam法律)。你可以找到一个完整的编写hubspot特定HTML电子邮件模板的指南．或者，使用我们简单的what-you-see-is-what-you-get电子邮件编辑器．

HTML电子邮件最佳实践

既然你了解如何开发HTML电子邮件的基础知识，让我们仔细阅读您应该记住的一些重要的最佳实践。无论您计划使用哪种方法来创建HTML电子邮件，这些最佳实践将有助于改进电子邮件的设计，用户体验和可交付性。

1.确保你的HTML邮件对不同屏幕大小和设备的响应。

如查德·s·怀特解释了在美国，你的电子邮件在用户收件箱中的外观很复杂，取决于各种不同的因素——这就使得给电子邮件编码比给网页编码更加困难和复杂。

“打印广告系列有一个渲染。网站渲染明显更复杂，因为网站可以根据设备的操作系统，浏览器和屏幕尺寸看起来不同。但即使是电子邮件渲染的复杂性也不匹配。”- Chad S. White，为什么电子邮件渲染如此复杂?

可以影响电子邮件客户端内的电子邮件负载的最大和最明显的因素之一是它正在查看的设备的屏幕大小。在智能手机屏幕上查看时，在桌面上看起来很神奇且格式化的电子邮件在桌面上可以轻松地陷入难以辨认，重叠的文本和图像。

为确保您的HTML电子邮件了解您在广泛的屏幕尺寸方面的方式，您可以做的最好的事情是保持您的布局简单和简单。当您开始添加更复杂的元素，如多个列和浮动图像时，将更难以翻译电子邮件的格式以获取不同的屏幕大小。

如果您决定开发更复杂的布局，请确保您正在积极解决如何重新安排元素，以适应不同的屏幕尺寸。例如，如果你的电子邮件在桌面显示为多栏，那么同样的结构在移动设备上就行不通了——你需要使用媒体查询定义元素如何在不同的屏幕尺寸上显示。

记住，开发真正具有响应性的HTML电子邮件远远超出了信息的结构和格式。考虑一下你的电子邮件在不同设备上的整体用户体验。确保你选择的字体在移动设备上和在桌面上一样清晰易读，并使用移动友好按钮或cta来代替超链接文本(你是否曾经尝试在移动设备上点击一行超链接文本?这并不容易)。

你可以找到更多的深入手机电子邮件最佳实践指南．

2.确保你的造型工作在不同的电子邮件客户端。

另一个重大影响您的HTML电子邮件在订阅者中出现的方式影响了您正在使用的电子邮件客户端来打开邮件。每个电子邮件客户端都会略有不同地加载电子邮件，因此在Gmail中看出某种方式的电子邮件可能在Outlook中看起来不同。

幸运的是，如果您知道大多数流行的电子邮件客户端如何加载特定的HTML和CSS元素，您就可以在不同用户的收件箱中创建一个相当一致的体验。关键是要知道要避免哪些不支持的标签，并相应地进行调整。这一综合指南解释了11个最受欢迎的电子邮件（包括Gmail和Outlook）支持的11个支持和呈现不同的样式元素。

您还可以查看我们写的文章优化不同的电子邮件客户端这里．

3.意识到您的HTML电子邮件要加载多长时间。

您的电子邮件加载需要多长时间可能是在获得新客户和失去沮丧的订户之间的区别。虽然它可能很诱人利用所有不同的样式选项和机会，以便在一天结束时结合HTML电子邮件优惠，如果您的电子邮件才能加载太长，则不重要。

当你设计你的HTML电子邮件时，要注意你的电子邮件需要加载多长时间——特别是当有人说，在早上地铁上打开你的邮件时，数据连接很弱。这里有几个小步骤，你可以采取，将大大有助于改善加载时间。

-谨慎使用图像要支持您希望向订阅者传递的信息，请始终使用图像压缩器(例如Compressor.io或者工具家）尽可能减少文件大小。大多数图像压缩机都可以显着减少图像的文件大小而不会对质量妥协，因此额外的步骤不会损害您的电子邮件的视觉完整性。

-使用标准的网络字体。自定义字体非常适合加剧着陆页，但在添加到电子邮件时，它们可以添加无关的复杂层。正如我们在上面讨论的那样，所有电子邮件客户端都以不同的方式处理样式元素，这尤其延伸到字体。安全，使用标准网字体和检查以确保电子邮件客户端大多数订阅者使用都支持特定的字体。

-尝试HTML缩小机。HTML缩小器(比如minifycode.com.和smallseotools.com）自动删除HTML文件中不需要的代码。重复，额外的元素将被剥离出来，但是电子邮件的实际渲染应该保持不变（总是测试它！）。您的代码中的每个字符都会影响电子邮件加载的时间，因此花时间删除额外的字符可以对负载时间产生积极影响。

-让你的信息集中在一个目标上。减少电子邮件负载时间的最佳方法是减少您为每个电子邮件发送的内容数量。它似乎很明显，但太多的营销人员试图将内容过多的内容进入他们的电子邮件。这不仅会导致投入用户体验（没有人想要阅读电子邮件形式的新颖），但它可以将负载时间发送关闭图表并导致用户放弃您的电子邮件。保持简单，您的用户会感谢您。

4.计划（尽可能多地）以供用户结束不一致。

屏幕大小和电子邮件客户端不是唯一的因素可以改变你的HTML电子邮件呈现在你的订阅者的收件箱(不——这将是太容易了，不是吗?)电子邮件客户端的版本、操作系统、独特的用户设置、安全软件以及是否自动加载图片等因素都会影响你的电子邮件加载方式。雷竞技苹果下载官方版

你可以从这一大堆因素中猜出，试图解决所有这些问题(每次发送邮件时)可能足以让你把电脑扔到房间的另一边。但你不必在这些变量面前完全无能为力——你只需要做一点预先计划。

-考虑创建电子邮件的网页版本．这有点像给您的电子邮件一个故障安全按钮。如果出于某种原因 - 由于上面讨论的许多因素之一 - 当用户打开它时，您的灵敏设计的电子邮件就像绝对混乱一样，它们至少可以选择单击“查看为Web页面”并查看当您打算的电子邮件时。由于样式元素跨越Web浏览器与电子邮件客户端呈现得更加一致，因此您将能够更好地控制邮件的网页版本。在Hubspot，有一个选项您可以打开它将自动生成网页版本。

-您还应该添加纯文本版本的电子邮件。纯文本版本就像它听起来那样——你的HTML电子邮件的替代版本，以纯文本呈现。添加纯文本版本的HTML电子邮件是很重要的，因为一些电子邮件客户端和用户设置不能(或选择不)加载HTML。如果是这种情况，客户端将寻找HTML电子邮件的纯文本替代版本来为用户加载。如果不存在，它可能会向收件人的电子邮件服务器发出你的邮件是垃圾邮件或有潜在危险的信号。

大多数电子邮件工具像HUBSPOT.将自动提供一个纯文本版本，如果收件人的电子邮件服务器需要它，但如果您正在从头开始编码HTML电子邮件，则需要创建调用的内容多部分MIME消息．

多部分MIME消息是一种电子邮件，它包含同一电子邮件的纯文本和HTML版本。如果收件人的电子邮件客户端或安全系统不允许HTML电子邮件，纯文本版本将显示。这是一个需要高级编码知识的过程，所以我们建议与开发人员一起工作。

-如果图像 - 无论是什么原因 - 不加载，请确保您的电子邮件仍然是有意义的。有些用户已关闭自动图像加载，这意味着它们会在打开它时会在没有图像的情况下看到您的电子邮件。出于这个原因，不要完全依赖于图像来获取跨越您的邮件的含义，并且始终将Alt-Text添加到您所包含的图像中。Alt-Text即使图像没有，也会加载，因此您的订阅者可以获得视觉效果所包含的内容。