掌握 Outlook：回顧常見的渲染問題

微軟是電子郵件行業最大的參與者之一。 Microsoft Outlook 及其基於 Web 的 Outlook.com 的市場份額合計超過 10%。 這是相當巨大的！

在用戶可以從種類繁多的電子郵件客戶端中進行選擇的世界中，Outlook 為何如此受歡迎？ 不僅 Microsoft Office 通常安裝在全球企業的計算機上，而且許多運行 Windows 的家用計算機和筆記本電腦都預裝了 MS Office。 隨 MS Office 打包的默認電子郵件客戶端是... Outlook。

然後是 Outlook.com，它的職業生涯始於 1996 年作為 Hotmail 的電子郵件客戶端。1997 年，微軟以大約 4 億美元的價格收購了 Hotmail，並推出了名為 MSN Hotmail 的 Hotmail。 後來它再次更名為 Windows Live Hotmail。 最後，2013 年 Hotmail 被 Outlook.com 完全取代。 由於 Outlook.com 的歷史與 Hotmail 交織在一起，因此截至 2015 年，Outlook.com 擁有超過 4 億的活躍用戶也就不足為奇了。

Outlook 中的常見呈現問題

為 Outlook 構建電子郵件一直具有挑戰性。 從 Outlook 2007 開始，Microsoft 停止使用 Internet Explorer 來呈現電子郵件，而是選擇使用 Microsoft Word 作為其呈現引擎。 對於 Microsoft Office 用戶來說是個好消息，他們可以將項目從 Word 或 Excel 無縫複製並粘貼到他們的 Outlook 電子郵件中。 對於使用 HTML 構建電子郵件的電子郵件營銷人員和開發人員來說，這不是什麼好消息。 嘗試將 HTML 網頁複製並粘貼到 Word 文檔中，您將大致了解 Word 如何翻譯 HTML。

自然而然，才華橫溢的電子郵件開發人員開始發揮他們的魔力，開發大量電子郵件黑客，以確保他們漂亮的 HTML 電子郵件在 Outlook 中呈現出同樣精美的效果。 這不是一件容易的事，因為很多黑客往往涉及 VML（矢量標記語言），這不是您在電子郵件開發的硬敲學校中傾向於學習的東西！

以下是電子郵件開發人員在為 Outlook 開發電子郵件時面臨的一些更常見問題的簡要概述：

在電子郵件開發中使用表格

在現代 Web 開發中，您可以使用容器（例如 div）來包含內容，而表格僅用於表格數據。 但是，要在 HTML 頁面中正確定位元素（例如 div），通常需要 CSS 屬性（例如 float 和 position）。

Outlook 不支持這些屬性。 為了正確構建您的電子郵件以獲得最大的跨設備/客戶端/瀏覽器呈現能力，開發人員使用表格來構建電子郵件。

儘管表格多年來一直在為電子郵件開發人員工作，但它們在電子郵件設計方面可以完成的工作受到限制。 設計人員必須從行和列的角度考慮，以便他們的設計可以輕鬆地使用表格構建。

帶有 VML 的背景圖像

實時文本。 實時文本。 實時文本。 這是電子郵件營銷人員的口頭禪。 在電子郵件中包含盡可能多的實時文本，以確保您的電子郵件到達收件箱（而不是垃圾郵件），每個人都可以訪問，並且可以在關閉圖像的情況下閱讀。

背景圖像可以讓您在圖像上疊加實時文本，無論是圖案還是漂亮的照片。 背景圖像可以為您的電子郵件設計創造一種美麗的深度感，同時仍然可以訪問。

但是，Outlook 不支持純 HTML 的背景圖像。 Outlook 需要使用 VML 來製作背景圖像。 值得慶幸的是，您無需完整學習 VML 即可在電子郵件中使用背景圖像。 Campaign Monitor 有一個很棒的工具，可以為您生成 VML 和 HTML 代碼，以便在您的電子郵件中為您提供防彈背景圖片。

不支持動畫 GIF

由於電子郵件中缺乏對視頻的支持，並且電子郵件營銷人員努力使他們的電子郵件更具活力和吸引力，因此簡陋的動畫 GIF 是為您的電子郵件增添活力的完美方式。

但是，Outlook 不支持動畫 GIF。 雖然圖像將加載並向用戶顯示，但只會渲染動畫的第一幀。

如果您有訂閱者在 Outlook 中打開電子郵件，並且您使用的是動畫 GIF，請計算動畫的第一幀。 保持 GIF 簡單，動畫不是消息不可或缺的一部分，而更像是對那些可以看到完整動畫的人的額外好處。

不支持填充 p、div 和 a 標籤

Padding 是一個很棒的 CSS 屬性，可以為您的元素引入空間。 這是一個有用的 CSS 屬性，可用於在電子郵件中定位元素或在元素周圍創建呼吸空間以增強設計。

一個簡單的解決方法是使用表格中的 HTML 屬性 cellpacing 和 cellpadding 在表格內的元素周圍創建空間。

要在段落中引入填充（p 標記），請使用樣式屬性 mso-line-height-rule:exactly; 結合 line-height 給你的副本和文本一些喘息的空間，使它更容易理解：

 <p>Your text here</p>

不僅僅是 Outlook

雖然桌面客戶端多年來一直給電子郵件開發人員帶來問題，但現在有一個新版本 Outlook.com 供電子郵件開發人員解決，它本身已經引發了自己的渲染怪癖。 其中很多都與 Outlook 中的怪癖不同。 （當然。）

一個變化並不是朝著正確方向邁出的一步——Outlook.com 刪除了放置在一組媒體查詢中的任何內容。 所以沒有辦法區分電子郵件的移動版本還是桌面版本。

不過有一些好消息。 舊版本的 Outlook.com 中存在一些已修復的呈現錯誤。 最值得注意的是：浮動/保證金黑客。 為了讓舊版本的 Outlook.com 理解這些 CSS 屬性，它們必須使用大寫字母或大小寫的混合來編寫。 現在情況無關緊要。

以前，要讓 Outlook.com 了解邊距屬性，您必須使用：

 Margin: 10px;

但現在你可以使用：

 margin: 10px;

有關更完整的更改列表，電子郵件開發人員 Remi Parmentier 撰寫了一篇很棒的博客，介紹了您需要了解的有關新 Outlook.com 的信息，以及電子郵件開發人員應注意的事項。
掌握前景

保持你的代碼相關

如果您曾經擔任過電子郵件開發人員，通常會覺得電子郵件呈現能力的目標帖子超出了預期。 隨著電子郵件開發的不斷發展，總會有新技術需要“轉換”到 Outlook。

例如，當引入混合/海綿電子郵件開發以確保 Gmail 移動應用程序呈現電子郵件的移動版本時，電子郵件開發人員還開發了新技術來使 Outlook 能夠呈現這些電子郵件。

隨著電子郵件開發人員進一步挑戰極限，許多人渴望創建無表格電子郵件，因此必須針對仍在使用的許多 Outlook 版本簡化這些新技術。

可以公平地說，對創新和才華橫溢的電子郵件開發人員的需求從未如此強烈。 電子郵件中的 VML 尚未掌握，只要 Outlook 使用 Word 作為其呈現引擎，這將是電子郵件開發人員可以繼續推動他們的知識和價值的關鍵領域。

建立電子郵件需要時間

鑑於 Outlook 給電子郵件開發人員帶來的所有這些挑戰，以及需要支持的電子郵件客戶端和設備的列表不斷增加，難怪在電子郵件營銷上花費了大量時間來開發和測試 HTML 電子郵件。

在我們的 2016 年電子郵件生產狀況中，超過 44% 的受訪者表示在電子郵件開發上花費了超過 3 小時。 這不是很短的時間，在查看整個電子郵件營銷工作流程時需要考慮在內。

對於電子郵件開發人員來說，Outlook 一直是一個棘手的問題。 不幸的是，它不能被忽視，因為它擁有相當大的電子郵件客戶端市場份額，如果您在 B2B 營銷部門工作，它可能會更大。 簡而言之，Outlook 不容忽視。

正在努力使您的電子郵件在 Outlook 中正常工作？

我們與 Microsoft 合作，優先處理 Outlook 中的電子郵件呈現錯誤，更快地識別問題，並向社區宣布改進和修復。

幫助我們改進 Outlook 並提交您的渲染錯誤。

提交 Outlook 呈現錯誤 →