Question

我需要使用html，embedded-css和javascript以及一些js libs设计响应式html简报邮件。

现在，我知道Outlook客户端是一场噩梦，我必须使用<table>代替<div>和<b>代替<strong>等等，以便做出响应设计，一旦你替换它，那么它不兼容gmail或雅虎或移动。所以我意识到我可以使用特定于Outlook的css代码片段，并根据MailChimp，它看起来如下：

<!--[if gte mso 9]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

我无法跟踪所有设备的所有html元素，所以我一直在寻找一个免费的html邮件设计工具，但没有运气。我应该遵循什么样的路径呢？我只想通过这样的工具自动化这个废话。

感谢。

Answer 1

对于初学者，您不应该在电子邮件中使用Javascript。 Webmail客户端主要使用JavaScript运行界面，并且不热衷于干扰您的电子邮件，桌面客户端过滤器通常将JavaScript视为垃圾邮件或网络钓鱼电子邮件的指示器。

即使在可能运行的情况下，电子邮件中的脚本编写也几乎没有什么好处。将您的电子邮件保持为直接的HTML和CSS，避免麻烦。

在开发Outlook方面，无需跟踪所有设备的所有元素。采用流畅的方法来构建您的电子邮件，它会在电子邮件客户端中优雅地降级，甚至是Outlook。

从这篇文章开始：https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

使用他们提供的电子邮件模板here作为入门模板，并添加您自己的自定义样式。 将所有样式放在头部并在发送之前内联模板。

本质上，该模板适用于所有主要客户。它也适用于Outlook，它将主体包装在条件标签中：

 <!--[if (gte mso 9)|(IE)]>
  <table width="600" align="center" style="border-spacing:0;font-family: Arial, Helvetica, sans-serif;color:#4d4d4d;" >
  <tr>
  <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
  <![endif]-->

[HTML EMAIL BODY GOES HERE]

 <!--[if (gte mso 9)|(IE)]>
  </td>
  </tr>
  </table>
  <![endif]-->

通过在条件标记中包装两个，三个和四个列行。

对于Outlook specific things，使用条件标记来定位不同版本的Outlook。从上面的链接：

使用以下目标定位所有版本的Outlook：

<!--[if (gte mso 9)|(IE)]>
[HTML code]
<![endif]-->

我对条件CSS使用相同的

<!--[if (gte mso 9)|(IE)]>
<style></style>
<![endif]-->

有时候将单独的条件CSS包含在目标2007 +

中

<!--[if mso]>
<style></style>
<![endif]-->

另外，我发现条件CSS确实很重要，重要的是它，并且它之前有一个空格。看起来你已经有了正确的，虽然你的规则背景之一：蓝色;没有！重要。

所以，例如......

li {padding-left: 2px!important;}

无法使用，而是需要写：

li {padding-left: 2px !important;}

仔细检查输出的代码..有些ESP也会添加！important，即使你已经拥有它也是如此，所以你可能也会以！important！important结束，这意味着他们不会工作。

但是在采取流体方法时，不需要追踪每个元素。您在Outlook条件标记中没有那么多样式。你很可能只有这样的东西：

 <!--[if (gte mso 9)|(IE)]>
<style type="text/css">
    table {border-collapse: collapse !important;}
</style>
<![endif]-->

我在上面提到的条件标签中的其他HTML。仔细看看我上面链接的模板。您可以通过复制和粘贴表行来移动布局，以根据您的需要对其进行自定义。

我在日常工作中每天编写HTML电子邮件代码，如果您有任何具体问题请与我们联系。

如何找到“Outlook兼容邮件设计器工具”

1 个答案: