等待。 我的電子郵件剛剛發生了什麼？ 網絡研討會錄音

已發表: 2016-02-11

幾乎每個設計師和開發人員都必須在他們職業生涯的某個階段建立電子郵件——無論他們是否願意。 但是，數量龐大的電子郵件客戶端——每個都有自己的渲染問題——讓許多人在失敗中搖頭，對電子郵件設計問題的衝擊感到困惑。

在經歷了許多這樣的場景之後，我們與來自 Sendwithus 的 Alex Mohr 聯手闡明了電子郵件新手面臨的最常見問題，更重要的是，提供了這些問題的一些解決方案。

如果您沒有機會參加網絡研討會，“等等。 我的電子郵件怎麼了？”，別擔心。 您可以下載幻燈片並查看下面的錄音。

查看幻燈片和錄製 →

盡我們所能，我們無法解決網絡研討會期間提出的每個問題。 還有一些很棒的。 因此，我正在利用這個機會回答那些剛剛涉足電子郵件營銷和設計的人提出的一些更常見的問題。

為什麼 Google 和 Microsoft 在呈現電子郵件方面如此糟糕？

所有電子郵件客戶端都無法呈現一些 HTML 和 CSS——用於編碼電子郵件活動的兩種語言。 這是因為它們都使用不同的渲染引擎。 渲染引擎是電子郵件應用程序的底層部分，它決定將哪些代碼渲染到屏幕上以及如何實際渲染。

渲染引擎

在 Google 的 Gmail 中，出於安全原因，預處理器用於從電子郵件中刪除特定部分的代碼。 雖然現在幾乎所有其他 webmail 客戶端都已經解決了這個問題，但 Gmail 基本上去除了電子郵件 <head> 中嵌入的 CSS 樣式。 而且，由於許多設計師使用這些樣式來確定他們的廣告系列的外觀，因此這些電子郵件在 Gmail 中會受到影響。

這在 Gmail 的移動客戶端上尤其明顯，因為媒體查詢（傳統響應式設計中使用的 CSS 觸發器）位於該部分。 這就是為什麼開發了混合（或海綿）編碼等技術，作為 Gmail 糟糕的呈現能力的直接解決方案。

對於 Microsoft 的 Outlook 客戶端，問題在於 Outlook 實際上使用 Microsoft Word 作為其呈現引擎。 沒錯，學生和商界人士都使用富文本編輯器來呈現 HTML 和 CSS 代碼（或者至少它嘗試這樣做）。 雖然舊版本的 Outlook 使用已安裝的 Microsoft 網絡瀏覽器 Internet Explorer 版本來呈現電子郵件代碼，但從 Outlook 2007 開始，Word 已用於使 Outlook 用戶更容易進行富文本編輯。

不幸的是，對於電子郵件設計人員來說，Word 對 Web 和電子郵件活動中常用的 HTML 和 CSS 的支持非常有限。 這種對 Web 標準的有限支持導致電子郵件活動在 Outlook 中看起來很糟糕。 就此而言，了解這種支持是使電子郵件在 Outlook 或任何電子郵件客戶端中看起來不錯的第一步。

以下是一些資源，可幫助您更好地了解電子郵件客戶端對 HTML 和 CSS 的支持：

  • Campaign Monitor 的 CSS 終極指南
  • 了解 Gmail 和 CSS：第 1 部分和第 2 部分
  • 在 Microsoft Outlook 客戶端中呈現差異的指南
  • 設備、操作系統、應用程序和引擎如何影響渲染
  • 桌面渲染問題？ 將初始測試集中在少數渲染引擎上
  • Webmail 渲染解釋：為什麼預處理器是敵人

使用 Web 字體時，您如何處理 Outlook 未顯示正確字體的問題？

Web 字體（通過 Web 提供而不是安裝在用戶設備上的字體）越來越受歡迎。 由於它們允許公司通過排版保持品牌並鼓勵實時文本，因此它們是電子郵件營銷人員的理想工具。 不幸的是，並非所有電子郵件客戶端都支持它們。 而且，在 Outlook 的情況下，缺乏支持會導致顯示 Times New Roman 而不是 HTML 中聲明的任何後備字體的情況。

我們之前已經通過一個解決方案解決了這個問題，該解決方案需要受影響文本的 HTML 類和一些特定於 Outlook 的 CSS。 雖然此解決方案仍然有效，但更清潔、更易於維護的解決方案已獲得關注。 最初由 Action Rocket 的人提出，這個解決方案需要使用 @font-face 規則來提供字體並將它們包裝在電子郵件頭部的媒體查詢中。

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

此解決方案是一種極好的方法，因為它不需要 HTML 類屬性污染您的代碼，同時仍確保 Outlook 回退到您聲明的字體堆棧。 查看 Action Rocket 的原始文章以了解有關該技術的更多信息。

您如何阻止藍色鏈接在移動設備上發生？

移動設備是有用的工具。 為了讓它們更有用，像 Apple 這樣的公司在他們的電子郵件客戶端中添加了一項功能，允許用戶快速向他們的聯繫人、日曆或地圖應用程序添加信息。 您很有可能在電子郵件中看到過這樣的內容：

ios_links

特定的類似文本的地址、日期、時間和電話號碼以藍色帶下劃線的鏈接突出顯示，以表明可以與之交互。 不幸的是，這些藍色鏈接有時會導致設計和可訪問性方面的問題。 當深色背景上的淺色文本變成藍色時，這些鏈接現在很難（如果不是不可能的話）閱讀，更不用說與之交互了。

藍色鏈接可訪問性

我們之前寫過關於此問題的解決方案，該解決方案允許您在該文本上維護樣式，但同樣，更新的解決方案越來越受歡迎。 事實證明，包含以下代碼段會殺死 iOS 上的藍色鏈接，而無需在 HTML 中添加額外的標記。 只需將其包含在您的電子郵件的頭部並發送出去。

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

一些網絡研討會與會者敏銳地指出，上述 CSS 專門針對 Apple 設備。 雖然我最近的測試表明藍色鏈接在 Android 上沒有問題，但一些 Litmus 社區成員在 Android 和 Gmail 鏈接電話號碼等內容時遇到了問題。 查看社區討論以了解一些巧妙的解決方法。

處理響應式圖像的最佳方法是什麼？ 視網膜圖像怎麼樣？

隨著越來越多的人採用響應式電子郵件設計，對響應式圖像的需求也在增加。 我處理響應式圖像的最佳建議是我為 Julie Ng 學習的一種技術，Julie Ng 是令人敬畏的電子郵件開發通訊背後的開發人員。

基本上，您可以在 img 標籤中以多種方式聲明圖像尺寸。 為了防止某些電子郵件客戶端以完整尺寸顯示較大的視網膜圖像，您可以使用 width 屬性聲明寬度。 這以像素為單位提供了良好的基線寬度。 對於響應式電子郵件，然後將圖像的寬度、最大寬度和最小寬度聲明為內聯 CSS。 下面是一個例子：

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

自然地，您需要為禁用圖像並聲明 display:block; 時提供一些 ALT 文本。 以防止圖像周圍出現不必要的空白。 如果您需要對圖像進行額外的控制，您可以在電子郵件的頭部使用類和 CSS 來定位它。 請記住，並非所有地方都支持嵌入式 CSS。

當涉及到視網膜圖像時，最好的辦法是簡單地以電子郵件中圖像的預期顯示尺寸的兩倍創建圖像。 例如，如果您有一個 600 像素 x 200 像素的圖像，您可以將其創建並保存為 1200 像素 x 400 像素的圖像。 通常將其包含在您的電子郵件中。 我之前提到的寬度屬性將防止它在 Outlook 等客戶端中顯示為荒謬的巨大圖像，並且您的圖像在具有視網膜屏幕的設備上看起來既漂亮又清晰。

對於希望在電子郵件中使用動畫 GIF 的人有什麼建議嗎？

去吧！ 動畫 GIF 是為您的電子郵件活動添加動感和興趣的絕佳方式。 我們非常喜歡這項技術，因此編寫了一份在電子郵件中使用動畫 GIF 的詳盡指南。

只是理解它們並非在任何地方都受支持，最顯著的是 Microsoft Outlook，它只顯示動畫的第一幀。 最好確保 GIF 中的任何圖像都用於說明目的，而不是向訂閱者傳達重要信息。 此類信息應始終顯示為電子郵件中的實時文本，以便訂閱者即使在禁用 GIF 和圖像等內容時也可以閱讀。

雖然很多人認為 GIF 只是為了好玩，但大量產品公司正在使用動畫 GIF 來炫耀與他們的產品的互動，並基本上在人們接觸產品之前教他們如何使用產品。 這是 MailChimp 的一個很好的例子：

mailchimp-interface-gif

GIF 是每個電子郵件營銷人員工具箱的重要補充。 不過，建議之一是謹慎使用它們。 如果每個活動都包含一堆 GIF，他們很快就會失去驚喜感。 當您真的想引起人們對活動或展示一些很酷的東西的注意時，偶爾使用它們。

您對在電子郵件中使用視頻有何看法？

就像動畫 GIF 一樣，視頻可以成為吸引訂閱者註意力的絕佳方式。 不幸的是，視頻本身在電子郵件客戶端中的支持更少。 雖然我們曾經能夠在電子郵件中使用視頻背景，但只有 Apple Mail 和 Outlook for Mac 支持它。

不過，這不應該阻止您將視頻與電子郵件結合使用。 人們非常喜歡視頻，公司越來越多地使用視頻營銷來增加與用戶的互動。 在電子郵件中使用視頻的最佳方法是在電子郵件活動中包含視頻的靜止圖像和鏈接到登錄頁面的播放按鈕。 用戶立即明白這是一個視頻，並可以在登錄頁面上查看視頻。

雖然電子郵件中的嵌入視頻可以提供良好的用戶體驗，但我們在 Wistia 的朋友就為什麼登陸頁面是更好的解決方案提出了一些很好的觀點。

  • 登陸頁面上的視頻可以在其他地方重複使用。 這是一個永久的內容資源。
  • 登陸頁面促進了進一步的交互。 看完收件箱中的視頻後，還有什麼可做的？
  • 人們可以更輕鬆地在著陸頁上分享視頻。

所以，一定要在你的電子郵件活動中使用視頻，但至少現在，接受並不意味著在電子郵件中查看視頻的事實。

您有推薦的響應式電子郵件框架嗎？

我們在網絡研討會中提到了一些用於構建更好的電子郵件活動的資源，但它們絕對值得在這裡重複和擴展。

就響應式電子郵件框架和模板而言，有很多可用的：

  • 來自 Ted Goas 的 Cerberus
  • MailChimp 的電子郵件藍圖
  • Zurb 的電子郵件基金會
  • Mailjet 的 MJML

我們最喜歡的一個是我們自己的 Slate，它包括五個用於各種發送場景的響應模板。 無論您選擇何種選項，請務必在電子郵件客戶端中對其進行測試，以確保您的訂閱者不會有任何意外。

查看幻燈片和錄音

我們涵蓋了很多內容，“等等。 我的郵箱怎麼了？” 除了確定最常見的電子郵件問題及其解決方案外，我們還談到了測試每封電子郵件的重要性，甚至研究瞭如何使用 Sendwithus 測試交易電子郵件。 如果您第一次錯過了，您可以下載幻燈片並查看下面的錄音。

查看幻燈片和錄製 →