#NoFailMail：5 種最常見的電子郵件設計失敗（以及如何避免它們）

已發表: 2018-08-03

設計可能是電子郵件中最令人困惑的事情。啟動我們的#NoFailMail 計劃的主要原因之一是幫助電子郵件設計人員、開發人員和營銷人員克服所有可能破壞電子郵件的因素，無論是圖像、格式還是電子郵件客戶端。

很明顯，但我們還是要說：在發送下一封電子郵件之前，您必須找到並修復設計錯誤。設計失敗會阻止您的讀者打開您的信息並對其採取行動，並影響您的品牌聲譽。

在這篇文章中，您將了解困擾電子郵件的五種常見電子郵件設計失敗以及如何修復每一種失敗。

失敗！

電子郵件失敗 #1。沒有針對多種屏幕尺寸進行設計。

電子郵件世界不再分為台式機和移動設備。從牆上的“智能”電視屏幕到手腕上的智能手錶，您的訂閱者都可以閱讀您的電子郵件。

他們甚至可能不會閱讀您的消息。相反，他們可能在聽 Alexa 或 Google Home 等家庭助理或屏幕閱讀器大聲朗讀您的電子郵件。

Litmus 和 Fluid 2016 年的一項研究表明，51% 的訂閱者退訂了在智能手機上無法正常顯示或無法正常工作的電子郵件，43% 的訂閱者將這些電子郵件報告為垃圾郵件。這些統計數據證明，為多屏幕設計不再是一件好事。

快速瀏覽電子郵件客戶端市場份額會向您展示移動如何主導這一領域。前 10 名電子郵件客戶端中有四個僅適用於移動設備，他們聲稱打開的電子郵件總數超過 40%：

蘋果 iPhone，29%
蘋果 iPad，10%
三星郵件 4%
谷歌安卓，3%

響應式和混合設計使用流動的表格和圖像使內容跨不同大小流動，是創建跨客戶端和平台正確呈現的電子郵件的最佳選擇。

我們的免費電子書《電子郵件優化和故障排除終極指南》將幫助您了解如果您正在從以桌面為中心的格式過渡到移動優化格式，哪種方法可能最有效。

與此同時，這五種解決方法將使您的電子郵件更具可讀性，並且更容易根據您的訂閱者是在台式機還是移動設備上查看它們而採取行動：

使用更大的字體大小。
這聽起來很瘋狂——在較小的屏幕上使用更大的字體？——但它確實有效。目標是不強迫人們捏合、縮放或左右滾動您的消息以查看您的內容的可讀性。我們建議正文的最小字體大小為 14 像素，標題的最小字體大小為 22 像素。
設計一個觸摸友好的 CTA。
手指不如計算機鼠標精確。用按鈕替換可點擊的鏈接。然後，將這些按鈕的大小設置為至少 44 像素 X 44 像素，這大約是平均指尖的大小。
縮小到一列。
兩欄或三欄的電子郵件佈局在較小的屏幕上閱讀效果不佳。請記住，您的目標是使您的電子郵件內容易於閱讀，無需捏合、縮放或橫向滾動。如果您還沒有準備好升級到響應式設計，選擇單列佈局將使您的電子郵件在更多屏幕尺寸上更具可讀性。
精簡您的內容。
您真的需要電子郵件中的所有內容來獲得點擊或轉化嗎？使用鏈接跟踪和其他工具來確定您的讀者點擊了什麼以及他們忽略了什麼。移動到一個主副本塊，或最多兩個。用強烈的英雄形象而不是一組較小的產品照片來吸引註意力。
此外，針對較短的句子和復制塊。標準桌面格式的五行副本可以在移動設備上輕鬆換行為 10 或 15。
抽空白色空間。
空白是圖像和復制塊周圍的空白區域。大量使用它可以將注意力集中在內容區域，為 CTA 按鈕提供更多呼吸空間，並在復制塊中分解段落。

電子郵件失敗 #2：讓藍色鏈接破壞您的設計

自動鏈接在 iOS 和 Gmail 中是一個有用但有時令人討厭的特性。當日期、電話號碼和地址自動變成可點擊/可點擊的藍色鏈接時，您就會看到這一點。

這些在純文本或個人電子郵件中很有用，因為它們很方便——輕輕一按即可啟動地圖或點擊通話，或將事件保存到日曆。但在任何非白色背景下，它們也很難閱讀。它們還會干擾您對該電子郵件的品牌塑造。

值得慶幸的是，有一些方法可以禁用這些藍色鏈接。在 iOS 郵件中，您可以通過設置 Apple Mail 的數據檢測器選擇器樣式來覆蓋藍色鏈接（了解操作方法）。 Gmail 中的藍色鏈接可以通過使用方法來修復（將地址或電話號碼包裝到標籤中並定義該跨度的樣式，或者您可以通過向 CSS 添加 Gmail 特定的樣式聲明來覆蓋所有默認樣式（這裡是如何）。

你的電子郵件有藍色鏈接嗎？

在發送之前，在 90 多種流行的電子郵件客戶端和設備中預覽您的電子郵件並發現錯誤（包括藍色鏈接）。

了解更多 →

電子郵件失敗 #3：圖像出錯

啊，圖片。它們可能會在很多方面出錯，但是當您正確使用它們時，它們會讓您的電子郵件栩栩如生。因此，值得您花時間查看我們每天看到的圖像失敗以及如何防止它們破壞您的設計：

使用錯誤的圖像格式
這裡的解決方案不是使用“正確”的圖像格式，無論是 JPEG、GIF、PNG 還是 SVG，因為沒有一種正確的格式。每種格式在文件大小、壓縮、質量和最佳用例方面都與其他格式不同。有關最常見圖像格式的優缺點的詳細比較，請參閱“PNG、GIF 或 JPEG？哪種是電子郵件的最佳圖像格式？” 在 Litmus 博客上。
未針對 Retina 顯示進行優化
“Retina 顯示屏”是 Apple 創造的一個術語，指的是在移動設備上看到的高 DPI 顯示屏。未針對 Retina 顯示進行優化的圖像通常會顯得模糊不清，從而導致視覺體驗不佳。

非 Retina 訴 Retina 圖像
為了讓您的視覺效果在視網膜上做好準備，請以您計劃顯示的大小的兩倍左右創建您的圖像，然後在 HTML 中將圖像大小定義為您的預期大小。如果您想顯示 300×200 像素的圖像，請將其創建為 600×400，並使用 HTML 屬性或 CSS 屬性將其定義為 300×200。
不過一定要注意文件大小。雖然使用視網膜圖像可以改善視覺效果，但也會增加其文件大小，這意味著您的圖像可能需要更長時間才能加載到收件箱中。如果您使用多個 Retina 優化圖像，您可能會在 Gmail 中觸發郵件剪輯。

測試您的圖像文件大小 + 加載時間

使用 Litmus Checklist，您可以測試圖像的文件大小、加載時間和斷開的鏈接。此外，立即查看您的廣告系列在流行電子郵件客戶端中的外觀。

開始檢查清單 →

電子郵件失敗 #4：不為圖像設計關閉

圖像的另一個問題是當它們不渲染時。某些電子郵件客戶端會自動阻止加載圖像，直到用戶允許為止。或者，用戶自己更喜歡默認情況下阻止圖像並選擇他們想要查看的圖像。

無論哪種方式，圖像阻止都會降低您的電子郵件在郵件打開後立即進行通信的能力。雖然您不能強制用戶取消阻止圖像，但您可以採取措施使圖像關閉消息看起來不錯。 ALT 文本和防彈按鈕易於實現，可以幫助您挽救在沒有圖像驅動的情況下可能丟失的轉換：

使用基本的或樣式化的 ALT 文本。 ALT 文本是您選擇用來描述圖像並在圖像被阻止時出現的詞語組合。這應該是標準做法——大多數電子郵件編輯器會給你一個空間來寫你的圖像描述——但是快速瀏覽收件箱會發現幾乎所有其他電子郵件都有圖像但沒有 ALT 文本。這是禁用圖像時沒有 ALT 文本的大量圖像電子郵件的樣子：
這是啟用圖像的同一封電子郵件。看看您的客戶會錯過什麼？
一個好的 ALT 文本實踐是編寫有效的描述，而不僅僅是圖像標籤。要更進一步，請嘗試帶樣式的 ALT 文本。在這裡，您添加一些內聯 CSS 來更改 ALT 文本的字體、顏色、大小、樣式和粗細。
使用防彈按鈕
如果您將號召性用語放在圖像中，則在圖像關閉時它將不可見。防彈按鈕使用 HTML 和 CSS，而不是 JPG 和 GIF 等圖像格式。他們不依賴圖像渲染來顯示在電子郵件中。這是啟用圖像的同一封電子郵件：

Litmus 社區和產品佈道者 Jason Rodriguez 在其指南“電子郵件設計防彈按鈕終極指南”中概述了按鈕設計的四種基本方法。查看它以了解每種方法的編碼、示例以及優缺點。

電子郵件失敗 #5。未針對純文本電子郵件進行優化

不，我們不會重振 2000 年代初期的文本與 HTML 的大辯論。但是純文本電子郵件在您的電子郵件策略中仍然發揮著重要作用，尤其是隨著智能手錶、屏幕閱讀器和家庭助理的增長，這些都沒有呈現 HTML。

這些提示將幫助您創建引人注目的純文本電子郵件，無論是獨立郵件還是多部分 MIME 郵件的文本版本：

寫簡短但清晰的標題。 使用至少一行空白來區分每個標題與其下方的複制塊。使用破折號或等號等印刷設備來設置它。
分解長複製塊。 使用更多但更短的副本塊來避免可怕且不可讀的副本灰色河流。
使用列表創建信息層次結構。 純文本電子郵件中的所有類型都是相同的字體和磅值。所以，你必須更加努力地引導你的讀者找到你的關鍵點。使用列表突出顯示系列中的信息。使用文本友好的名稱設置每個項目，例如破折號 (–) 或星號 (*)。（項目符號在純文本中不起作用。）
自由地使用空白。 空白區域組織相關信息以便於掃描。在復制塊、號召性用語和頁眉或管理頁腳之間使用寬邊距和額外的換行符。
定義 CTA。 人們在擁有 CTA 按鈕之前做了什麼？他們使用像空白這樣的引人注目的東西來將它們與其他副本分開，並使用箭頭（>> 和 <<）等排版設備來將它們分開。避免使用冗長的 CTA 列表，並用空白將它們包圍起來，使它們易於點擊或手指。

這封電子郵件說明了純文本電子郵件的所有這些最佳實踐：

我們在之前的博文中介紹了更多發送 #NoFailMail 的方法： #NoFailMail 的更多提示和資源

#NoFailMail：為什麼避免錯誤是電子郵件成功的關鍵
測試如何幫助您避免 5 大電子郵件失敗
5 文案失敗你應該避免

想要更多這樣的資源嗎？註冊我們的時事通訊以了解最新的電子郵件。