javascript - 如何找到 '' Outlook 兼容邮件设计器工具”

Question

我需要使用 html、embedded-css、javascript 和一些 js 库设计响应式 html 时事通讯邮件。

现在，我知道 outlook 客户端是一场噩梦，我必须使用 <table>而不是 <div>和 <b>而不是 <strong>等，为了响应式设计，一旦您替换它，它就与 gmail、yahoo 或移动设备不兼容。所以我意识到我可以使用 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 真的很重要，因为 !important 在那里并且前面有一个空格。看起来你已经有了正确的答案，尽管你的规则之一是背景:蓝色；没有!重要。

所以，例如...

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 电子邮件，所以如果您有任何具体问题，请联系我们。