如何查找“ 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-respond-email-without-media-queries--cms-23919

使用他們在此處提供的電子郵件模板作為入門模板，並添加自己的自定義樣式。 將所有樣式放在頭部並內聯模板，然后再發送。

實質上，該模板可在所有主要客戶中使用。 通過將主體包裝在條件標簽中，它也可以在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的事物，請使用條件標簽來定位不同版本的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電子郵件代碼，因此如果您有任何具體問題，請與我們聯系。