交互式電子郵件的回退：如何對抗對交互性的有限支持

已發表: 2019-01-31

交互式電子郵件體驗連續第三年被評為最熱門的電子郵件設計趨勢之一。那麼為什麼我們在收件箱中沒有看到更多交互式電子郵件呢？對於許多品牌來說，有限的收件箱提供商支持是他們不發送更多互動廣告的主要原因。

如果您有備用方案，您就不必擔心有限的支持。有很多方法可以幫助您在受支持的情況下創建引人入勝的交互式電子郵件，同時仍能保證在所有其他收件箱中獲得實用且美觀的體驗。

為什麼回退很重要

對 HTML 和 CSS 的支持因電子郵件客戶端而異，並且您可能用於增強電子郵件交互性的許多 HTML 和 CSS 元素可能並非處處都受支持。

如果您不考慮不支持的情況，您的電子郵件可能看起來已損壞。讓我們看看這個漂亮的交互式圖像輪播示例：

交互式電子郵件圖像輪播 — 來自 Offset by Shutterstock 的交互式電子郵件，帶有圖像輪播。
在 CodePen 中查看。

帶有強大圖像的交互式輪播在 Apple Mail 中看起來很棒，訂閱者可以使用箭頭或複選框來瀏覽圖片。但這是同一封電子郵件在 Yahoo! 中的呈現方式。如果沒有回退，請發送郵件：

如果沒有回退，電子郵件看起來已損壞，並且可能不會看到很多點擊。我們不希望這種情況發生！因此，讓我們看看如何通過防彈回退使交互式電子郵件在任何地方都能正常工作。

使用隱藏和顯示框架的強大功能

隱藏和顯示框架是在電子郵件中設置交互性和回退的最基本和最常見的策略。雖然簡單，但它仍然非常強大。

該框架正如其名稱所暗示的那樣：它隱藏了不支持它的客戶端的交互性，並顯示了一個回退。

您在 HTML 中設置了兩個完全獨立的部分——一個用於交互式內容，另一個用於靜態後備。這樣，您不僅可以指定這兩種不同類型的內容，還可以為電子郵件的每個版本設置不同的鏈接和不同的跟踪，從而可以跟踪和比較交互式版本與靜態版本。把它看成是一個電子郵件中的A / B測試。

讓我們看看如何使用這個簡化的示例（或查看 CodePen）在電子郵件代碼中實現這一點：

 <!-- start INTERACTIVE_SECTION --> <!--[if (!mso)&(gte IE 10)]> <! -- --> <div > <div class=" content " > This is where the Interactive Content goes. </div> </div> <!--<![endif]--> <!-- end INTERACTIVE_SECTION --> <!-- start FALLBACK_SECTION --> <div > This is where the Fallback Content goes. </div> <!-- end FALLBACK_SECTION -->

互動部分使用來自不支持交互性的電子郵件客戶端的條件語句來隱藏內容。這包括 MSO 條件語句，它會在不支持交互性的 Outlook 版本中隱藏它們之間的所有內容，以及內聯 CSS，它可以直觀地隱藏其他非交互式電子郵件客戶端的內容（即綠色代碼）。然後以深紅色突出顯示的代碼引入覆蓋交互部分代碼的樣式，同時強制隱藏部分。

我們想要“視覺上”調用，因為內容仍然加載，即使它不可見。這一點很重要，因為您可能在交互部分中引入的所有圖像和其他文件都會影響回退佈局的加載時間。作為一種解決方法，請嘗試為兩種佈局盡可能多地利用相同的圖像。

對於內容，您可以使用任何常規電子郵件代碼填充回退部分，或者只需將那些<div>包裹在您可能擁有的任何現有靜態電子郵件代碼中。 對於交互部分，您可以隨意使用您有興趣實現的任何類型的純 CSS 技術。 搜索純 CSS 輪播、熱點、測驗、滾動效果等可以產生一些很好的靈感！

使用外部鏈接的樣式表

同時，深紅色代碼中引用的 CSS 託管在一個外部鏈接的 CSS 文件中，該文件包含如下代碼：

 #interactive { display: block !important; max-height: inherit !important; overflow: visible !important; } #staticfallback { display: none !important; } #interactive .content { Font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; display: block; color:#ffffff; }

該#interactive和#staticfallback風格都有著重要的！; 規則以允許它們覆蓋 HTML 中的內聯 CSS。這些是隱藏和顯示佈局的關鍵樣式聲明。該#interactive。內容的聲明代表了你會用實際的風格你的互動內容，互動雖然佈局通常會需要超過這個例子來工作的代碼。例如，如果您想設置僅出現在交互佈局中的 CTA 樣式，您將創建一個新聲明，如#interactive .cta （或.interactive-cta ，只要選擇器對於交互部分是唯一的）並添加您的樣式到 CSS 文件。

然後，您將在您的<head>標記的最底部引用此外部樣式表的 HTML 中添加一個鏈接標記，就像在這個簡化示例中一樣。

 <head> <style type="text/css"> /* Boilerplate Styles */ /* Responsive Media Query Styles */ /* Progressive Enhancement Styles */ </style> <!-- External CSS for Interactive Version --> <link rel="stylesheet" type="text/css" href=" http://your-url.com/hideshow.css "> </head>

掌握 CSS 特異性

正如您所看到的，其中涉及到很多 CSS 特異性技巧。 CSS 本身代表“層疊樣式表”，它指的是你的 CSS在特殊性方面的特殊性決定了哪條規則勝出。因此，在所有嵌入的 CSS 之後放置<link>標記對於允許外部 CSS 文件中的所有樣式覆蓋它之前的樣式至關重要。

那麼為什麼是外部鏈接的 CSS 文件，而不是嵌入或內聯的 CSS？因為如果電子郵件客戶端支持此功能，那麼它很可能支持外部 CSS 文件中包含的所有樣式。以這種方式保持交互式 CSS 分離意味著您可以減少交互式樣式與非交互式代碼發生衝突的可能性，因此不會以意外結果告終。

錦上添花：通過漸進式增強優化有限的交互支持

一旦您設置了兩個主要版本（交互式版本和靜態備用版本），您就可以繼續使用一些基本的交互式元素來增強您的靜態備用版本。這是上面電子郵件的靜態版本，使用懸停效果使徽標和 CTA 更具吸引力：

您可以在此處了解如何創建這些簡單但功能強大的懸停效果。

想要更多這樣的資源嗎？

將最好的電子郵件營銷和設計技巧、統計數據和資源直接發送到您的收件箱，並始終處於電子郵件創新的最前沿。

隨時了解 →