為什麼我的電子郵件在 Outlook 客戶端中看起來很糟糕？

已發表: 2018-07-04

讓我們面對真相。創建電子郵件是一項非常簡單的任務。但是將這些電子郵件格式化為與 Outlook 兼容是一項艱鉅的任務。事實上，比你想像的要難。

Outlook 是您將找到的最常用但歷史悠久的電子郵件客戶端。但是，它不支持您在 Gmail 等其他電子郵件客戶端中發現的多項改進。

示例：

如果您使用了具有背景透明度的 PNG 圖像，Outlook 會嚇壞的！它不知道如何渲染這樣的圖像。同樣，您可能想知道為什麼圓形按鈕（使用border-radius CSS 屬性創建）在Outlook 客戶端中看起來是方形的。因為 Outlook 不支持border-radius 和其他幾個CSS 屬性。

以下是您的 Outlook 電子郵件看起來很糟糕的原因以及您可以採取哪些措施來改進您的電子郵件設計。

為什麼我的電子郵件在 Outlook 中看起來很糟糕？

現在電子郵件營銷人員面臨的最大挑戰是為 Outlook 構建電子郵件模板。這是因為，從 Outlook 2007 開始，Microsoft 已停止使用 Internet Explorer 來呈現電子郵件，並開始使用 Microsoft Word 作為其呈現引擎。這種轉換最適合 Microsoft Office 用戶，因為它允許他們將內容從 Word 或 Excel 複製或粘貼到 Outlook 電子郵件中。但是，這使得基於 HTML 的電子郵件生成器的場景變得艱難。由於 HTML 電子郵件在外觀上看起來不同，要克服某些挑戰，請按照以下步驟改進電子郵件活動。

使用 Outlook 呈現電子郵件的挑戰

電子郵件營銷人員在設計電子郵件活動之前需要考慮很多。他需要了解使用 Outlook 的客戶訂閱。 Outlook 的桌面版、移動版和網頁版在呈現電子郵件方面完全不同。當談到使用 Outlook 呈現電子郵件時，以下是需要注意的事項。

為什麼圖像被剪裁和加載緩慢

在電子郵件中包含圖像時，Outlook 對圖像大小有一定的限制。

電子郵件通訊在電子郵件營銷活動中發揮著重要作用。通過向其中添加圖像使它們變得動態。有時，當將長圖像添加到廣告系列的模板時，它會在接收端被剪裁或重新縮放。這是因為 Outlook 剪輯了超過 1728 像素高度的圖像頂部。因此，在這種情況下，我們需要調整 1728 像素以下的圖像大小，使其看起來不被裁剪。

在無法調整圖像大小的情況下，最好的替代方法是將圖像裁剪成兩個單獨的圖像，然後在廣告系列中使用。

圖像未調整大小

Outlook 不適用於受 HTML 約束的圖像。也就是說，如果電子郵件模板添加了使用 HTML 調整大小的圖像，Outlook 將僅以原始大小而不是調整大小的值顯示圖像。因此，我們需要確保圖像在用於任何電子郵件自動化之前已調整好大小。

背景圖片

讓客戶“驚嘆”的最佳策略是創建一封帶有品牌背景圖片的電子郵件。我們可以通過在圖像上疊加實時文本來使背景圖像更有目的性。即使在沒有向客戶顯示圖像的情況下，實時文本也將幫助我們傳達電子郵件的目的。

但是，Outlook 不支持帶有 HTML 的背景圖像。我們需要對訂閱者查看的背景圖像使用 VML（矢量標記語言）。

在 HTML 的<body>標記中輸入以下代碼，以使背景圖像覆蓋整個電子郵件窗口

<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

上面的代碼完美地顯示了在 Outlook 2007、2010 和 2013 中打開的電子郵件的背景圖像。但 Windows Mail 10 需要在代碼中進行一些修改，以添加圖像及其源允許背景圖像。

下面的代碼將使圖像的頂層透明並有助於修復背景圖像。

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

動畫 GIF不適合

視頻勝於雄辯。

但是，從技術上講，電子郵件模板需要復雜的編碼來支持視頻。考慮替代方案，作為電子郵件營銷人員，我認為 GIF 是一種動態選擇。 GIF 是動畫圖像，以最簡單的形式傳達信息。 Outlook 不支持 GIF。

GIF 圖像加載，但只有 GIF 的第一幀呈現給客戶。

如果您的電子郵件列表中有 Outlook 訂閱者，請確保圖像的第一幀共享 GIF 的主要上下文。

考慮使用動畫部分為其他電子郵件客戶端的訂閱者提供額外的優勢。

邊界半徑屬性

說到電子郵件營銷，號召性用語按鈕是一項使電子郵件產生潛在客戶的功能。我們點擊了多少次圓形的 CTA 按鈕？

邊框半徑屬性是一個常見的 CSS 屬性，但這不適用於 Outlook。在 Outlook 中，為訂閱者提供了帶有方形邊框的 CTA 按鈕。

額外的空格

有時，在使用 Outlook 呈現電子郵件後，圖像上方的空格就像我們過去在打印預覽選項中看到的那樣。

正如之前在博客中所說，這是因為 Outlook 2007 使用 Microsoft Word 來呈現 HTML 電子郵件。

因此，電子郵件看起來與實際設計有些不同。

主要字體問題

如果訂閱者的設備缺少主要字體樣式，Outlook 將使用 Times New Roman 呈現整個電子郵件，而忽略代碼中提到的後備字體。

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

電子郵件模板應該是完美的

您為電子商務商店運行電子郵件活動。您設計的模板應該有助於發送有效的電子郵件，因為這不是客戶親自與您見面的舊傳統現場營銷。

營銷人員的長相決定了品牌的可信度。那麼，我們現在發送什麼來代表我們的品牌？

電子郵件。電子郵件的設計模板會給客戶留下您品牌的第一印象。電子郵件與內容看起來越好，品牌就越好

但是，我們不能隨意使用高級格式選項來使我們的電子郵件看起來有吸引力。我們可能會看到電子郵件在 Outlook 中看起來很完美，但是當它被其他電子郵件收件人呈現時，情況就不是這樣了。

您應該堅持在電子郵件 html 中使用表格。不要嘗試使用具有位置和浮動的 div 元素，因為 Outlook 不支持它。不幸的是，目前還沒有解決方法。

取消訂閱選項是必須的

管理電子商務商店，我們始終希望讓客戶與我們的品牌保持互動。

怎麼做？

時事通訊。向客戶提供有關您的業務領域的趨勢和更新的潛在信息。

但最終決定是否遵循您的品牌的是客戶。向我們訂閱的客戶應該可以隨時選擇退出訂閱列表。

退訂按鈕是我們發送給客戶的每份時事通訊中必須的，如果我們的客戶沒有看到這個按鈕，
期待什麼？
我們可能會收到垃圾郵件！

從 Outlook 發送電子郵件會使我們的品牌面臨這種風險，因為它沒有提供此標準選項。

鏈接更改為帶下劃線的藍色/紫色文本

作為電子郵件營銷人員，我們需要充分利用我們發送給客戶的電子郵件。

我們可以包括訂閱鏈接、指向我們趨勢博客的鏈接、指向我們網站的重定向鏈接，以實現客戶參與。

當從 Outlook 發送 HTML 電子郵件時，當在不同的電子郵件客戶端上查看時，此類鏈接會以帶下劃線的藍色/紫色文本顯示。

為避免此問題，請使用<font>標記並用<span>標記和样式屬性包裝文本。

嘗試使用以下代碼 -

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook 可以很好地填寫您的個人收件箱。

但是，說到業務 - 開箱即用。