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

【问题标题】：How to find a ''Outlook Compatible Mail Designer Tool"如何找到“与 Outlook 兼容的邮件设计器工具”
【发布时间】：2017-07-16 11:32:57
【问题描述】：

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

现在，我知道 Outlook 客户端是一场噩梦，我必须使用 <table> 而不是 <div> 和 <b> 而不是 <strong> 等，为了响应式设计，一旦你替换了它然后它与 gmail 或 yahoo 或移动设备不兼容。所以我意识到我可以使用outlook-specific css code-sn-ps，并且根据MailChimp，它看起来如下：

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

我无法跟踪所有设备的所有 html 元素，所以我免费寻找了一个 html 邮件设计器工具，但没有成功。我应该遵循什么样的道路？我只是希望这种废话被这样的工具自动化。

谢谢。

【问题讨论】：

标签： javascript html css email outlook

【解决方案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 在那里，并且在它之前有一个空格。看起来您已经正确了，尽管您的规则背景之一是：蓝色；没有 !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 电子邮件，如果您有任何具体问题，请联系我们。

【讨论】：

谢谢@Mia。你解释得很好。实际上，我只是删除了我不需要的脚本代码。看起来我要处理这些'mso'有一段时间了。我正在遵循您现在提到的流体设计图。如果我能解决这个问题，我将开始尝试解决垃圾邮件问题。
您能告诉我您是如何为从“mso 9”到“mso 15”的所有 Outlook 客户端测试您的电子邮件的吗？设置一个虚拟机并结束它？还是使用 litmus 之类的付费服务预览设计以供最终用户查看？
我使用 Litmus：litmus.com 和 Return Path：returnpath.com 来测试我所有的电子邮件。我更喜欢 Litmus，因为您可以直接在 Litmus 中构建电子邮件，并且电子邮件预览的生成速度比 Return Path 快得多。
我看到您删除了之前的消息，但我查看了您的代码，看起来您没有内联样式。此外，您使用的条件标签应以此开头：