我当前的HTML电子邮件开发工作流程-css教程-PHP中文网

HTML电子邮件开发工作流程：提高效率的实用指南

每个网页开发者都有自己独特的工作方式：偏爱的编辑器、辅助工具、个人项目流程等等。对于大型或复杂的项目，清晰的开发路径至关重要，它能节省时间并最大限度地减少错误。

在我的经验中，这在HTML电子邮件项目中尤其重要。电子邮件需要许多重复性任务，这些任务本身并不特别复杂（至少并非总是如此），但由于需要检查的大量元素和任务，可能会变得棘手。

在这里，我将尝试解释我个人的HTML电子邮件开发工作流程。我希望您可以从中挑选出您喜欢的部分。

关键要点

作者强调在HTML电子邮件项目中清晰的开发路径的重要性，以节省时间并最大限度地减少因大量重复性任务而造成的错误。
使用预处理器，例如Jade用于HTML和Less用于CSS，可以通过减少冗长代码的需求来简化开发过程，尤其是在嵌套表格方面。建议使用CodeKit和Coda等工具来编译文件并实时预览工作。
建议使用Gulp Email Builder包来自动执行工作流程的最后几个步骤，包括内联或嵌入CSS文件、使用Litmus API进行测试以及发送额外的测试电子邮件。
良好的HTML电子邮件开发工作流程可以显著提高生产力。作者的工作流程包括本地测试创作、CSS内联和使用Gulp Email Builder进行自动化测试。鼓励根据个人喜好和需求定制这些步骤。

典型的电子邮件开发工作流程

经典的电子邮件开发工作流程包含三个主要步骤：

创作（进行初步的本地测试）
CSS内联
测试

My Current HTML Email Development Workflow

最终测试（使用内联CSS）是最耗时的步骤，因为我们可能需要多次重复它。“CSS内联”和“测试”任务需要额外的工作和关注：首先，您必须注意将原始工作副本与内联副本区分开来。此外，最终测试需要您将内联HTML发送到各种帐户，以针对各种电子邮件客户端检查您的设计。

通过电子邮件发送代码有点棘手，因为大多数客户端不允许您通过将HTML代码粘贴到正文中来撰写电子邮件（我所知道的唯一一个是Thunderbird）。但是每次测试都需要许多操作来撰写邮件、内联CSS、粘贴代码等。

My Current HTML Email Development Workflow

如果您有测试平台帐户（Litmus、Email On Acid、Campaign Monitor或其他），您可以通过将内联代码提交到测试平台来简化最终测试任务，但是为了进行更准确的测试，您仍然需要通过邮件发送代码。过去，我使用了一个小的PHP脚本发送测试电子邮件，这可以节省一些时间，但仍然需要重复某些任务。

回到CSS，您可能需要处理两个文件：一个用于内联，一个用于嵌入（对于支持媒体查询的客户端）。

您必须将CSS直接编辑到HTML文件中，然后启动内联工具（例如Mailchimp内联工具），最后将第二个CSS嵌入到内联文件中（光是写出来就觉得很烦人！）

我们现在可以更详细地回顾我们的工作流程方案：

My Current HTML Email Development Workflow

为了获得真正高效的工作流程，许多问题仍未解决，重复性步骤明显多于创造性步骤，这很少能带来好的结果。

幸运的是，我们仍然有一些方法可以使用：预处理器和任务运行器。

添加HTML和CSS预处理器

当我开始使用预处理器时，我立即意识到它们对电子邮件开发有多么有用。对于HTML和CSS，预处理器都可以轻松简化对冗长代码的需求（尤其对于HTML）。

我主要使用Jade进行HTML和Less进行CSS，但您可以选择自己喜欢的技术。在处理重复且混乱的代码（如嵌套表格）时，Jade非常有用。请查看以下三层嵌套表格示例。

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

登录后复制

产生相同代码的Jade代码如下：

table(width="100%" )
  tbody
    tr
      td(width="100%")
        table( align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

登录后复制

如您所见，不再存在未关闭标签的问题，代码易于阅读。

使用Jade，您可以创建复杂的模板并构建自己的代码片段库，在更多项目中重用代码。对于Less或Sass，您也可以这样做。

您可以使用Gulp或Grunt编译文件，但是为了快速预览您的工作，我发现Coda和CodeKit提供了最佳解决方案。

我们工作流程中的“本地测试”任务为我们提供了对工作的初步反馈，并且至关重要的是，它不需要执行其他操作。

CodeKit在保存时编译我们的Jade和Less文件，并且可以实时预览您的项目。另一方面，Coda允许您编辑文件并在单独的窗口中预览自动刷新的已编译文件：

My Current HTML Email Development Workflow

所有这些步骤都是完全自动化的，您可以将工作重点放在设计上，而不是那些不太有趣、重复性的任务上。

现在，我们有了用于创作的Jade和Less文件，以及用于预览的已编译HTML和CSS文件。下一步是将所有内容整合在一起进行最终测试。

使用Gulp进行快速测试

我研究了很多Gulp或Grunt脚本来自动化工作流程的最后几个步骤。npm提供了许多解决方案，但最终我选择了Gulp Email Builder包。此包是更大项目的Gulp版本，如果您愿意，它也有Grunt版本。

Email Builder允许您内联或嵌入CSS文件，使用Litmus API进行测试以及发送额外的测试电子邮件。

要使用Email Builder，您当然需要安装Gulp。我已经在我的文章“使用Gulp自定义Bootstrap图标”中对此进行了介绍，因此您可以查看该文章以获取帮助。此外，您可以阅读Etienne Margraff关于Gulp和Grunt工作流程的文章。

除了Email Builder之外，我们还将使用Gulp-Replace包，因此您也需要安装它。

与每个Gulp任务一样，我们必须设置gulpfile.js：

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

登录后复制

首先，我们包含所有需要的包并设置四个变量：

current_date 是一个表示当前日期的字符串；我们将使用它来区分测试电子邮件主题行，以便更容易区分不同版本。
email_subject
remote_imgs_basepath 是包含我们图像的远程文件夹的URL。我使用它通过为图像设置相对路径来执行本地测试（这样我可以轻松进行所有必要的更改），但是最终测试（和发送任务）要求图像上传到远程文件夹，因此我使用Gulp Replace将所有src属性更改为remote_imgs_basepath
email_builder_options 是一个用于配置Email Builder的对象

在这个例子中，email_builder_options对象有三个元素，您可以查看email-builder-core页面以了解所有可用选项的完整列表。

第一个元素encodeSpecialChars确保所有特殊字符都编码为其HTML数字形式。

emailTest元素用于设置电子邮件测试。它需要一些参数：

email：用逗号分隔的电子邮件地址，我们将测试电子邮件发送到这些地址。我为每个需要测试的电子邮件服务（Gmail、Outlook、Yahoo等）都有一个帐户，以便快速在他们的网页邮件页面和移动应用程序中检查它们。
subject：邮件的主题（请注意，我已经添加了current_date变量来快速识别我正在处理哪个版本）。
transport：发送者需要执行此任务的参数

如果您使用Gmail作为transport参数，则需要在您的Google帐户设置中激活“允许安全性较低的应用”，否则发送任务将失败（最好不要为此使用您的个人帐户）：

My Current HTML Email Development Workflow

第三个参数允许您在Litmus平台上设置测试（当然，您需要一个Litmus帐户）。您必须指示您的帐户参数、可选主题（如果您多次执行测试，它将用于分组测试）以及要测试的电子邮件客户端列表。

要添加客户端，您必须使用其测试应用程序代码。您可以从https://litmus.com/emails/clients.xml文件的application_code字段获取此代码（请注意，您必须登录才能访问此文件）。

在上面的示例中，该行

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

登录后复制

告诉Litums使用Gmail App（Android）、Gmail（Explorer）和iPhone 5s（iOS7）测试我们的电子邮件。

结果可以在Litmus上查看，就像手工制作的一样：

My Current HTML Email Development Workflow

当然，如果您只想执行电子邮件测试，可以从email_builder_options中删除litmus参数。

gulpfile的最后几行完成了所有工作：

我们首先告诉Gulp使用explore_and_taste.html文件来完成我们的工作（这是CodeKit从我们的Jade文件生成的HTML，我们刚刚将其用于第一次预览）
使用replace模块，所有本地路径都将替换为我们之前设置的远程路径（replace(/src="imgs//g, 'src="' remote_imgs_basepath)）
最后，执行EmailBuilder任务，测试发送到Litmus和电子邮件地址，并注册ready-to-send文件。

CSS文件呢？

Email Builder真正简化了这项任务。您只需向链接或样式标签添加data属性即可管理它们：

没有data属性的链接或样式标签将被内联
如果它们具有data-embed属性，则CSS规则将被嵌入
最后，data-embed-ignore允许您设置一些仅用于开发目的的CSS规则（它们在处理时将被忽略）。

同样，Coda可以简化Gulp处理，允许您使用其内部终端应用程序：

My Current HTML Email Development Workflow

结论

现在我们可以最终重新安排我们的工作流程：

My Current HTML Email Development Workflow

您可以根据自己的需要自定义每个步骤，使用其他编辑器而不是CodeKit，使用Grunt而不是Gulp，使用Sass而不是Less等等。无论您选择什么技术，这样的工作流程都能真正提高您的生产力。

如果您有自己的HTML电子邮件工作流程，以及它与本教程中介绍的工作流程有何不同，请在评论中告诉我。

关于HTML电子邮件开发的常见问题

HTML电子邮件开发的最佳实践是什么？

HTML电子邮件开发是一个复杂的过程，需要深入了解编码和设计原则。一些最佳实践包括使用内联CSS以确保您的样式正确应用，使用表格进行布局以确保与所有电子邮件客户端兼容，以及在多个平台和设备上测试您的电子邮件以确保它们在任何地方看起来都很好。此外，重要的是保持代码简洁有序，为图像使用alt标签，并为无法或不想查看HTML电子邮件的用户包含电子邮件的纯文本版本。

我如何学习HTML电子邮件开发？

有很多资源可用于学习HTML电子邮件开发。Udemy和Skillshare提供的在线课程可以提供对该主题的全面介绍。此外，SitePoint和Email on Acid上的博客和文章可以提供有价值的提示和见解。实践也很关键——尝试从头开始构建您自己的电子邮件以了解该过程。

我需要哪些HTML电子邮件开发工具？

HTML电子邮件开发需要一个用于编写代码的文本编辑器、一个用于测试电子邮件的电子邮件客户端以及可能一个用于创建电子邮件布局的设计工具。对于这些工具，有很多免费和付费选项可用，因此您可以选择最适合您的需求和预算的工具。

如何使我的HTML电子邮件具有响应性？

使您的HTML电子邮件具有响应性包括使用媒体查询根据查看电子邮件的设备的屏幕尺寸调整您的布局。这可能包括更改图像的大小、调整表格的布局等等。网上有很多资源可以指导您完成这个过程。

HTML电子邮件开发中的一些常见挑战是什么？

HTML电子邮件开发中的一些常见挑战包括处理不同电子邮件客户端之间的不一致性、确保您的电子邮件在各种设备上看起来都很好以及保持代码简洁有序。此外，在具有吸引力的设计需求与电子邮件编码的限制之间取得平衡也可能具有挑战性。

如何测试我的HTML电子邮件？

测试您的HTML电子邮件是开发过程中的一个重要部分。这可以通过将电子邮件发送给自己并在不同的设备和电子邮件客户端上查看它来完成。还有一些在线工具可以为您模拟不同的设备和电子邮件客户端。

如何在HTML电子邮件开发中使用表格？

表格是HTML电子邮件开发中的一个关键工具，因为它提供了一种创建与所有电子邮件客户端兼容的布局的方法。这包括使用HTML表格标签为您的电子邮件创建一个网格状结构，然后将您的内容放在此结构中。

如何在HTML电子邮件开发中使用内联CSS？

内联CSS包括将您的CSS样式直接放在HTML标签中，而不是放在单独的样式表中。这在HTML电子邮件开发中很重要，因为某些电子邮件客户端不支持外部样式表。要使用内联CSS，只需在HTML标签的“style”属性中包含您的样式即可。

如何在我的HTML电子邮件中包含图像？

可以通过使用“img”标签以及“src”属性来指定图像的URL来在HTML电子邮件中包含图像。同样重要的是包含一个“alt”属性，以便为无法或不想查看图像的用户提供图像的文本描述。

如何创建HTML电子邮件的纯文本版本？

创建HTML电子邮件的纯文本版本包括去除所有HTML标签并只留下文本内容。这可以手动完成，或者有一些在线工具可以为您做到这一点。包含电子邮件的纯文本版本对于可访问性和更喜欢不查看HTML电子邮件的用户来说非常重要。

以上是我当前的HTML电子邮件开发工作流程的详细内容。更多信息请关注PHP中文网其他相关文章！