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

作者强调在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电子邮件的用户包含电子邮件的纯文本版本。