如何创建 HTML 电子邮件

已发表: 2022-01-28

创建 HTML 电子邮件并不像听起来那么难。您不需要成为开发人员，也不需要知道如何编码。

如果您曾经使用过 WYSIWYG（所见即所得）电子邮件编辑器，那么您已经创建了 HTML 电子邮件。您拖放的每个模块都由 HTML 和内联 CSS 组成，定义了不同电子邮件元素的外观和行为方式。

因此，如果大多数电子邮件编辑器允许您使用拖放工具进行设计，为什么您需要了解任何 HTML 才能创建电子邮件？

好问题。

虽然大多数电子邮件编辑器在模块中为您提供了相当多的控制权，但您将无法调整电子邮件的每一个细节。您可能需要 HTML 来更改以下内容：

您使用过Twilio SendGrid 的电子邮件编辑器吗？它使您可以结合拖放模块和HTML 编辑来创建电子邮件。像这样的组合强大功能可让您完全控制电子邮件的外观和感觉，确保每条消息都具有一致的一流品牌体验。

幸运的是，编写 HTML 电子邮件并不太难。下面，我们将为您提供创建更好的电子邮件所需的提示和电子邮件结构知识。

编写 HTML 电子邮件的 5 个技巧

编写 HTML 电子邮件相对简单，但电子邮件客户端和收件箱可能很挑剔。遵循这些最佳实践以确保您的消息看起来很棒，无论您的收件人的客户端、浏览器或设备如何。

收件人在各种操作系统、设备、屏幕尺寸、浏览器和电子邮件应用程序中打开电子邮件。这些因素中的每一个都会以不同的方式呈现您的电子邮件，因此您的工作是确保您的电子邮件具有响应性并在大多数收件箱中按预期工作。

您可以找到大量响应式电子邮件模板，但是当您从头开始编写 HTML 电子邮件时，这项任务会涉及更多。以下是一些有助于使您的电子邮件更具响应性的事项：

图片是电子邮件活动的重要补充，但请注意不要过度使用它们。太多的图像会延长加载时间，并使电子邮件难以呈现。

使用加载速度更快且不会占用整个屏幕的较小图像。此外，添加响应式尺寸元素，如“宽度”和“最大宽度”，以确保您的图像在每台设备和电子邮件客户端上正确加载。

记住电子邮件的目的。许多电子邮件设计师迷失在艺术和创造力中，忘记了电子邮件的总体目标——不是为了赢得赞誉。

首先，您希望人们打开您的电子邮件。接下来，您希望他们点击并采取行动。这可能是访问您的网站、阅读博客文章、进行购买或注册活动。

保持简单。为您的收件人提供价值，用内容吸引他们，然后推动他们采取行动。而已。大多数时候，其他一切都是浮云。

在您的电子邮件中添加不同的 HTML 元素时，问自己一个问题：“这是否有助于电子邮件实现其目的？” 如果没有，请从您的电子邮件设计中删除它。

您可以找到预构建的 HTML 电子邮件模板，其中包含发送出色营销活动所需的一切。模板已经完成了创建美观、响应式电子邮件设计的艰巨工作。

如果您喜欢电子邮件模板但对它不是 100% 满意，您通常可以下载 HTML 并进行您喜欢的编辑。对于那些刚接触 HTML 的人来说，这可能是一种极好的电子邮件编辑方法。

未经测试，切勿发送电子邮件。执行此操作的老式方法是将测试电子邮件发送到不同的电子邮件地址（跨电子邮件客户端）并尝试在不同的设备上打开它。如果这听起来像是浪费了很多时间和头痛，那你是对的。

幸运的是，这些天有更好的方法。

Twilio SendGrid 的电子邮件测试工具与您的设计编辑器集成，帮助您解决单个应用程序中的问题。它将帮助您了解您的电子邮件在客户端、浏览器和设备中的呈现方式。例如，您可以查看您的电子邮件在使用 Gmail 的移动设备和使用 Outlook 的桌面上的外观。

电子邮件测试工具还可以帮助您找到损坏的链接和按钮、垃圾邮件内容和格式问题。

HTML 电子邮件有一个简单的结构：

文档类型

使用 <!DOCTYPE> 告诉浏览器期待什么——在本例中，它是一封 HTML 电子邮件。

标题

使用标题部分包含样式、大小和元文本等元素。

身体

将正文用于电子邮件的视觉元素，例如文本、图像、表格、链接等。

这是一个带有 HTML 代码的电子邮件模板示例。您可以查看此旅行通讯电子邮件模板如何在桌面、平板电脑和移动设备上呈现。

就像你看到的那样？单击“下载模板”，我们会将 HTML 代码的副本发送到您的收件箱。然后，您可以将代码复制/粘贴到您的电子邮件设计编辑器中，以导入模板并根据您的品牌和活动进行定制。

想要更多电子邮件模板？幸运的是，我们有一个充满它们的画廊。无论您需要时事通讯、密码重置还是约会提醒模板，我们的免费模板库都应有尽有。

此外，这些设计响应迅速，确保您的电子邮件在客户端、浏览器和设备上看起来都很棒。哦，我们提到模板是免费的吗？

立即开始使用预建模板创建更好的 HTML 电子邮件。