2016 年構建成功電子郵件的 7 個設計技巧

已發表: 2016-01-26

作為電子郵件設計師，您的工作是為訂閱者提供實用的電子郵件體驗。這意味著消除可能侵蝕訂戶體驗並最終損害您的品牌形象的摩擦。

由於電子郵件在不斷發展，因此實現這一目標很複雜。掌握電子郵件世界的最新更新至關重要，尤其是當這些變化（例如新應用程序以及 HTML 和 CSS 支持的更新）可能影響您精心設計的活動時。

在 2016 年電子郵件現狀報告中，我們匯總了去年電子郵件世界中發生的一切，幫助確定可能對您的電子郵件活動產生巨大影響的重大創新。

獲取免費報告 →

以下是您將在其中找到的內容的先睹為快：

1. 牢記蘋果手錶

2015 年 4 月，Apple Watch 推出。將可穿戴設備添加到電子郵件應用程序群中是不可避免的——它給電子郵件設計師帶來了一些重大影響。如果您的受眾包括技術早期採用者和潛在 Watch 用戶，那麼請考慮 Watch 上的訂閱者體驗。

由於 Apple Watch 在檢測到遠程或鏈接圖像時顯示純文本，因此優化電子郵件的純文本版本至關重要。另請注意，為桌面純文本消費保留的特殊字符、額外空格和其他格式化技巧對 Watch 的小屏幕的轉換效果非常差。

還有一個更高級的選項可以將第三部分添加到您的消息中：text/watch-html。通過包含這個附加部分並將 Content-Type 指定為“text/watch-html”，當 HTML 部分不合適時，Watch 將顯示 text/watch 部分而不是純文本部分。但是，在添加 Watch 部分之前，請務必與您的 ESP 核對 - 並非所有人都支持它。

2. 圖像阻塞優化

Outlook 2016 和 AOL 的 Alto Mail 應用程序都是在 2015 年推出的——默認情況下每個都是塊圖像。電子郵件設計人員應該使用防禦性設計技術，例如 ALT 文本、防彈按鈕以及圖像和 HTML 文本的適當平衡來對抗圖像阻塞。

3. 不要隱藏您的退訂鏈接

2015 年 9 月，Gmail 向所有 Gmail 網絡郵件和 Android Gmail 應用程序用戶推出了新的“阻止”功能，為消費者提供了另一種清除收件箱中不想要的電子郵件的選項。當訂閱者“阻止”發件人時，這意味著他們將永遠不會再看到來自該發件人的電子郵件。

好處是新的“阻止”選項應該減少垃圾郵件投訴，因為一些以前會點擊“報告垃圾郵件”的訂閱者現在會點擊“阻止”。不利的一面是，“阻止”按鈕可能為 ISP 干預創建了一個新的、較低的欄，因此一些之前可能單擊“取消訂閱”的訂閱者現在將改為單擊“阻止”。

那你該怎麼辦？讓退訂更容易。如果訂閱者無法輕易發現您的退出鏈接，有些訂閱者會簡單地阻止您的消息或將其標記為垃圾郵件。如果您的退訂鏈接被隱藏在灰色的小字體中，那麼是時候將它用更大、更易於閱讀的文本單獨一行拆分了。

此外，添加“list-unsubscribe”標題，Gmail 會在某些情況下在您的發件人姓名和發件人電子郵件地址後放置一個“取消訂閱”鏈接。

雖然此鏈接允許訂閱者跳過您的選擇退出過程——包括偏好中心，如果你使用一個——但它仍然比收到阻止或垃圾郵件投訴更可取。

4. 更新您的交互式電子郵件

2015 年 9 月，Apple 發布了最新版本的移動操作系統 iOS 9。這個更新的操作系統增加了對一些新 CSS 屬性的支持，並引入了一些必然會讓電子郵件設計者感到沮喪的變化。

一種這樣的挫敗感？並不總是支持一般的兄弟選擇器 (~)。 Litmus 社區成員 Remi Parmentier 和 Justin Khoo 都報告說，當與 :hover 或 :checked 偽類選擇器一起使用時，iOS 9 不支持通用兄弟選擇器 ~。

許多交互式電子郵件使用偽類來檢查電子郵件中是否發生了某些事情，並根據狀態適當地設置樣式元素。但是，此錯誤會導致以前的交互式電子郵件變為靜態。

幸運的是，有一個修復！只需用相鄰的同級選擇器 + 替換一般的同級選擇器 ~ 即可。雖然不如不太具體的通用兄弟選擇器靈活，但它實現了相同的結果。

5. 使用基於表格的佈局

2015 年 9 月，微軟推出了最新版本的 Outlook 客戶端——Outlook 2016。不幸的是，它與其前輩相比沒有太大變化。與 Outlook 2007、2010 和 2013 一樣，Outlook 2016 使用 Microsoft Word 呈現電子郵件，它對 HTML 和 CSS 的支持很差，並且有很多令人沮喪的怪癖。

較新版本的 Outlook（2007-2016）對 HTML 和 CSS 的支持很差，並且包括一些需要記住的怪癖：

不支持 div 和表格單元格中的背景圖像
不支持 CSS 浮動或位置
不支持文字陰影
對填充和邊距的支持不佳
對 CSS 寬度和高度的支持不佳
嵌套元素背景顏色的問題

由於缺乏對許多 CSS 屬性的支持，基於表格的佈局是 Outlook 2016 中優化的必要條件。您還可以使用條件 CSS 專門針對 Outlook 2016。

6. 使用移動友好的元素

由於 55% 的電子郵件打開發生在移動設備上，因此制定移動電子郵件策略比以往任何時候都更加重要。雖然使用響應式設計是一個不錯的選擇，但在不支持媒體查詢的情況下，您還必須使用適合移動設備的元素。

例如，AOL 的 Alto Mail 應用程序和 Universal Outlook 應用程序（兩者均於 2015 年推出）都不支持媒體查詢。

利用大文本、易於觸摸的按鈕和單欄設計為您的訂閱者提供盡可能最佳的體驗。

7. 使用開放數據做出設計決策

雖然查看整個行業的電子郵件開放趨勢是採用某些電子郵件客戶端的一個很好的指標，但重要的是您的受眾。查看您的受眾在哪裡打開他們的電子郵件並相應地調整您的設計比以往任何時候都更加重要。

例如，我們看到 2015 年 iPhone 打開的數量增加了 22%，現在佔電子郵件打開總數的 33%。如果您在自己的觀眾中看到類似的東西，您可以使用該數據來為您的設計決策提供信息。我們知道，iPhone 的操作系統 iOS 對 HTML 和 CSS 具有出色的支持，因此您可以在我們的廣告系列中安全地使用 HTML5 視頻背景等高級技術。

關鍵是了解你的聽眾。使用電子郵件分析，您將獲得優化設計所需的數據。立即註冊免費試用。不需要信用卡。

獲取 2016 年電子郵件狀態報告

想要更多信息和可操作的要點嗎？立即下載免費報告，了解最新的電子郵件更新和進展。

獲取 2016 年電子郵件狀態報告 →