Outlook 電子郵件呈現：我如何學會停止擔心和熱愛 Outlook

已發表: 2021-07-02

我們都去過那裡。您可以使用有趣的 GIF、可訪問的按鈕和引人注目的圖像創建精美的電子郵件。然後你測試它，它看起來很棒……除了在 Outlook 中，它完全壞了。人們無法按照您希望的方式與損壞的電子郵件互動。

長期以來，Outlook 一直困擾著電子郵件營銷人員，但必須如此嗎？我們如何使用它？繼續閱讀以了解我是如何愛上 Outlook 的，儘管它有很多缺點。我將介紹：

Outlook 的版本
Outlook 怪癖的提示
進行修復的代碼

許多版本的 Microsoft Outlook

“Outlook”這個名字涵蓋了幾個不同的電子郵件客戶端，它們有幾個不同的渲染引擎和至少兩種不同的查看設置。如果你任其發展，所有這一切都可能令人頭疼。讓我們深入研究一下，看看我們是否可以把它理順一點。

展望 2007-2019

這些是 Outlook 的 Windows 桌面版本。它們使用 Word 作為渲染引擎，這在電子郵件就像寫信一樣的時候很有意義。啊，簡單的時代。但是，對於電子郵件營銷人員來說，它並沒有削減它來呈現 HTML 電子郵件。

120 DPI （每英寸點數）增加了複雜性。 Windows 用戶可以選擇 120 DPI 來增加他們的屏幕分辨率。如果他們這樣做，桌面電子郵件客戶端將尊重這一點，並將更新圖像和文本以更大。這可能會對您的電子郵件造成嚴重破壞。

Mac 版 Outlook

這是 Outlook 的 Mac 桌面版本。它使用 Webkit 作為渲染引擎。這意味著就電子郵件呈現而言，它通常與 Apple Mail 和 iOS 相當。如果它在您的瀏覽器中看起來不錯，那麼它在這裡看起來也不錯。

Outlook.com 和 Outlook 移動應用

這些客戶端使用 Webkit 或基於 Webkit 的渲染引擎，因此它們提供良好的 HTML 渲染並且通常不會破壞您的電子郵件。

展望辦公室 365

Outlook Office 365 有兩個不同版本，桌面電子郵件客戶端和基於 Web 的電子郵件客戶端。桌面版與 Outlook 2007-2019 類似，使用 Word 作為渲染引擎（難以用於電子郵件）。基於 Web 的電子郵件客戶端使用 Webkit 或 Blink 並以類似於 Outlook.com 的方式呈現電子郵件（更容易）。

不再有損壞的電子郵件

在 90 多個電子郵件客戶端、應用程序和設備（包括所有版本的 Outlook）中預覽您的電子郵件，以確保獲得品牌一致、無錯誤的訂閱者體驗。

了解如何 →

一個展望來統治一切

一月份，微軟宣布了他們的“One Outlook”願景，即從 2022 年的某個時候開始，用一個可以在任何地方運行的客戶端取代桌面客戶端。

新的電子郵件客戶端將基於當前的 Outlook Web 應用程序。所以希望它有一個基於 Webkit 的渲染引擎，並且能夠很好地渲染 HTML 電子郵件。不幸的是，當這種情況發生時，所有那些舊的桌面客戶端不會消失，因此它們仍然需要在一定程度上得到支持。

做或者不做，不可以嘗試

你的頭還暈嗎？

如果是，那麼讓我們為您提煉它：關鍵要點是我們正在使用兩種不同的渲染引擎——Word 和 Webkit。 Webkit 更容易編碼，而 Word 更難。兩者都沒有好壞之分。它們只是需要不同的方法，並且需要考慮不同的怪癖。

讓我們看看 Outlook 桌面客戶端中的一些常見呈現問題以及如何解決這些問題。

請在圖像上包含寬度和高度屬性

Outlook 不支持寬度和高度的 CSS 樣式，如果您不包含寬度和高度屬性，Outlook 將以其實際大小顯示您的圖像。如果您使用的是視網膜圖像（應該如此），這意味著您將獲得會破壞電子郵件的巨大圖像。

包括 ALT 文本

不要讓 Outlook 的安全消息代表您的圖像。確保包含 ALT 文本。特別是因為 Outlook 默認不顯示圖像，除非人們打開該功能。

使用表格

電子郵件已經走了很長一段路，您可以在許多電子郵件客戶端中使用 <div> 塊，但 Outlook 不是其中之一。 Outlook 將忽略您應用於 <div> 標籤的大多數樣式，包括寬度和填充。因此，為您的內容使用 <table> 標籤很重要。

一定要使用 Outlook 特定的代碼來解決呈現問題

這可能無法解決您的所有問題，但很多時候包含一些特定於 Outlook 的 CSS 可以幫助您解決僅在 Outlook 上看到的呈現問題。或者你可以隱藏不上的Outlook工作小塊，和使用條件代碼來顯示一個版本，將用於Outlook的特定版本。（稍後會詳細介紹條件代碼。）

為小圖像或表格單元格添加行高

Outlook 設置表格單元格和圖像的最小高度。因此，如果您使用表格單元格作為分隔符或有一個小圖像，請確保為元素添加一個行高屬性，該屬性等於您希望它們出現的高度。例如：

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

糾正 DPI 縮放問題

在 Windows 計算機上，有一個人們可以更改的全局設置（或者在某些情況下，默認情況下設置得更高）可以放大文本和圖形元素以使其更大且更易於閱讀。這對於可訪問性來說非常有用，但對於 Outlook 來說不是那麼好，因為只有某些元素被放大而其他元素沒有。

幸運的是，有一個修復程序。首先，您必須向 HTML 標記添加一個 XML 命名空間：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

然後，在 </head> 標記之前添加一些代碼來修復圖像縮放：

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

最後，確保將任何設置的寬度作為帶有像素的 CSS 屬性包含在內，而不是作為表格的屬性。

✗不是這個寬度=“600” ：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

是的，就像這樣style="width:600px;" ：

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

這將解決 120 DPI 客戶端的大部分問題。看看這個修復前後的並排比較：

Outlook 2013 120 DPI （無修復）	120 DPI 時的 Outlook 2013 （帶修復）

有什麼區別吧？

不要指望懸停效果起作用

Outlook 不支持懸停偽類。您仍然應該包含它以創建交互以增加您的電子郵件在其他電子郵件客戶端中的可訪問性，但如果它在 Outlook 中不起作用，請不要感到驚訝。

不要依賴動畫 GIF 來表達您的觀點

Outlook 桌面客戶端不支持動畫 GIF。您可以讓初始幀顯示您想要在 Outlook 中顯示的圖像，或者您可以在 Outlook 中隱藏動畫 GIF 並使用條件編碼來顯示您想要的靜止圖像。（同樣，接下來將詳細介紹條件編碼。）

不要在沒有後備的情況下使用交互式內容

交互式電子郵件是 Outlook 的一大禁忌。它們取決於 AMP 編碼或複選框 hack，這兩者在 Outlook 上均不受支持。

對於電子郵件的 AMP，將顯示 HTML 文件而不是 AMP 文件，因此無需額外編碼。對於復選框黑客交互，您必須隱藏交互內容並顯示 Outlook 後備。同樣，條件編碼在這裡是您的朋友。

不要向圖像添加填充或邊距

Outlook 會去除圖像的填充和邊距。確保在圖像周圍的表格單元格中添加填充。或者，如果圖像與副本位於同一單元格中，請為副本周圍的標籤添加邊距（<h1>、<h2>、<p> 等）。

恐懼是電子郵件殺手：應對 Outlook 恐懼所需的代碼

為 Outlook 的桌面電子郵件客戶端編寫出色的電子郵件需要跳出“正常”的 HTML 和 CSS。三種類型的代碼可幫助您的電子郵件在這些客戶端中脫穎而出：條件編碼、MSO 屬性和 VML。

使用新事物可能會令人恐懼，但我保證這是值得的。當你讓它正常工作的那一刻？您會覺得自己在不到 12 秒差距內完成了 Kessel Run。

條件編碼

條件編碼是一種編碼，它查看您的訂閱者使用的電子郵件客戶端或瀏覽器，並且僅在滿足評論中的條件時才顯示代碼，例如：

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

您甚至可以通過添加版本號來使用它來定位特定版本的 Outlook 桌面客戶端：

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

但是，Outlook 並不簡單，因此版本號與電子郵件客戶端的名稱不對應：

展望 2000 = mso 9
展望 2002 = mso 10
展望 2003 = mso 11
展望 2007 = mso 12
展望 2010 = mso 14
展望 2013 = mso 15
Outlook 2016、Outlook 2019 和 Office 365 桌面版 = mso 16

然後，您可以通過針對小於 (lt)、大於 (gt)、小於或等於 (lte) 或大於或等於 (gte) 的一系列客戶來獲得更複雜的結果。例如：

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

因此，如果您只看到特定客戶端上發生的一些瘋狂的事情，您可以專門針對該客戶端並為其隱藏和顯示更好的內容。

您還可以使用條件註釋來隱藏 Outlook 中的內容，方法是說“if !mso”，意思是“if not mso”：

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

請記住：條件代碼僅適用於 Outlook 桌面客戶端。由於這是許多問題發揮作用的地方，因此您可能比網絡郵件客戶端的任何修復更需要這些。

但是也有一些方法可以定位 Web 客戶端，但無法定位一個 Outlook Web 客戶端而不是另一個。因此，當您定位 Outlook.com 時，您還將定位 Office 365 Web 客戶端（但不是桌面客戶端）。

您可以利用 Outlook 將“x_”附加到所有類名的事實來定位 Outlook Web 客戶端，但不會為屬性選擇器執行此操作。因此，如果您有一個“foo”類並希望對 Outlook Web 客戶端進行不同的處理，您可以使用以下代碼定位它：

[class~="x_foo"] { }

（感謝 Mark Robbins 的修復和 Dylan Smith 的 howtotarget.email。）

MSO 屬性

如上所述，您可以添加特定於 Outlook 的 CSS，這些 CSS 只會影響 Outlook 桌面電子郵件客戶端。這裡有一些你會發現很常見的，你可能已經聽說過它們：

mso-hide：全部；

此屬性將對 Outlook 桌面客戶端隱藏所有內容。轉發電子郵件時，它確實會被刪除，因此如果您知道訂閱者經常利用該功能，請謹慎使用它。如果您是“以防萬一”編碼器，則可以將其與“if not mso”條件代碼配對。

mso-line-height-rule: 完全正確；

此屬性可確保 Outlook 以您在 line-height 屬性中指定的高度顯示您的行高。沒有它，Outlook 不一定會尊重您的行高。如果您在一個以精度為關鍵的行業工作，您可能非常熟悉此屬性。

mso-padding-alt

這個不太常見，但我不得不不時使用它。它允許您聲明特定於 Outlook 的填充。因此，如果單元格上的正常填充在 Outlook 中呈現不正確，您可以使用mso-padding-alt設置適合您的 Outlook 設計的值。

mso-ansi-字體大小

這是我只偶爾使用的另一種。它允許您設置特定於 Outlook 的字體大小。因此，如果 Outlook 將您的字體渲染得比其他電子郵件客戶端大，並且您最終得到的是您不想要的最後一行短文，請添加mso-ansi-font-size並設置適合您的副本的字體大小。

您可以使用更多 MSO 屬性，因此請繼續查看是否有任何內容可以為您解決渲染問題。

虛擬機

VML 代表矢量標記語言。它是 Microsoft 的 SVG 版本，但該語言已經貶值並且很少使用（是的電子郵件！）。 Microsoft 確實有在線存檔的 VML 文檔，因此您仍然可以查找如何使用它在 Outlook 中創建矢量，它仍然受支持。從理論上講，當 Microsoft 過渡到他們的“One Outlook”模型時，我們將能夠將 VML 拋在後面。

確保包含 VML 命名空間聲明。我通常將它添加到樣板模板中的 <html> 元素中，這樣我就可以在需要時使用 VML：

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

一旦你有了它，你就可以在 MSO 條件中將任何 VML 添加到你的代碼中：

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

該代碼將創建一個 200 像素 x 50 像素的藍色矩形。也許您實際上無法在電子郵件中使用某些東西，但是您可以使用 VML 將圓角按鈕添加到您的代碼、背景圖像和背景漸變中。 Campaign Monitor 有兩個由 Stig 創建的工具，可幫助您創建帶圓角的背景圖像或按鈕。我發現這些是在您剛剛學習時添加 VML 的好方法。

您還可以使用 VML 創建虛假絕對定位、陰影效果或後備以支持 Outlook 中的 CSS 藝術。一旦你深入了解 VML，你就可以做很多事情。

長壽和電子郵件

Outlook 長期以來一直是電子郵件營銷人員的禍根，但並非必須如此。

使用正確的工具，您可以創建在 Outlook 中正確呈現的精美電子郵件。查看本文中的資源以建立您的 Outlook 編碼能力，並使用 Litmus Builder 和電子郵件預覽在您的電子郵件中進行測試。將 Outlook 編碼視為等待解決的難題，您可能會發現自己喜歡 Outlook 及其所有怪癖。

使用 Litmus 在 Outlook 中測試您的電子郵件

在點擊發送之前查看您的電子郵件在 Outlook 中的外觀並解決任何問題。使用 Litmus，您可以確信您正在創建訂閱者可以參與的像素完美的電子郵件。

開始免費試用 →