電子郵件像素藝術：最稀有和最酷的防禦設計策略

圖像屏蔽很常見，一些電子郵件客戶端默認禁用圖像，一些訂閱者關閉圖像以保存移動數據或出於其他原因。 因此，電子郵件營銷人員需要使用防禦性設計技術來確保在禁用圖像時傳達他們的信息。

防禦性設計也有助於電子郵件可訪問性，包括三個關鍵策略：

1. 盡可能多地使用 HTML 或實時文本，而不是將所有文本嵌入到圖像中
2. 將 ALT 文本添加到您的圖像中——或者更好的是，添加樣式的 ALT 文本
3. 在表格單元格上使用背景顏色

讓我們專注於最後一個策略。

圖像被阻止時發生的一件大事是您的電子郵件失去了其結構。 電子郵件變平了，一切都開始變得模糊起來。 使用 HTML 文本並設置 ALT 文本的大小和顏色可以幫助創建結構和層次結構，但背景顏色更強大。

向表格單元格添加背景顏色會創建橫幅、內容塊，並且對於製作防彈按鈕至關重要。 這封 Twitter 電子郵件演示了當圖像被阻止時表格單元格上的背景顏色如何保持電子郵件設計的完整性。

這很好，但是背景色的表格單元格可以做更多——更多。 除了與 HTML 文本一起使用以創建不受圖像阻止影響的電子郵件內容之外，表格單元格背景顏色還可用作圖像的後備。

為此，您可以從一系列嵌套表格中創建馬賽克，並將背景顏色應用於表格單元格。 然後將圖像切片，使每個切片都完美地融入馬賽克的表格單元格中。 這樣，當疊加圖像被遮擋並消失時，彩色表格單元格的底層馬賽克就會出現。

電子郵件像素藝術的例子

為了展示電子郵件馬賽克的強大功能，這裡有幾個示例，每個示例都顯示了左側啟用圖像而右側禁用圖像的電子郵件：

Mothercare在這封電子郵件中為他們的嬰兒車創建了像素藝術，這也充分利用了樣式化的 ALT 文本貫穿始終。

Pizza Express在這封觸發式生日電子郵件中使用了像素藝術，其中還包括個性化圖像和相應的個性化樣式的 ALT 文本。

PlayStation New Zealand使用電子郵件馬賽克來創建汽車人的象徵，巧妙地演繹了變形金剛的“偽裝機器人”口號。

Benton Lingerie捕捉了母親節電子郵件信息的情感，使用電子郵件像素藝術創造了一個大的粉紅色心形。

設計和戰略考慮

在創建電子郵件馬賽克之前，請考慮以下設計和策略問題：

1. 電子郵件像素藝術可能會變重，如果電子郵件超過 102KB，可能會導致您的電子郵件在 Gmail 中被剪切。 所以保持簡單，專注於最小可行的像素藝術圖像。

例如，Benton Lingerie 的像素化心臟可能會隨著表格單元格數量的兩倍或三倍而變得更加輪廓。 但他們的執行顯然是一顆心，因此非常有效。

2. 電子郵件像素藝術可能需要大量額外工作，因此通常最好將它們保留用於大容量或高影響力的電子郵件。 這意味著可能將它們用於新產品發布、網絡星期一活動和類似大型活動的關鍵廣播電子郵件。 但這也意味著考慮將它們用於高容量觸發電子郵件，例如上面的 Pizza Express 生日電子郵件。

同樣，您可以考慮將它們用於大容量電子郵件元素，例如您的徽標或頁腳元素。 如果您這樣做，請將它們作為部分實現，以便您可以更改或更新徽標或頁腳的所有實例的像素藝術。

無論您選擇哪種方法，您都希望確保獲得額外設計工作的影響。

3. 電子郵件像素藝術並不總是與響應式設計兼容。 根據您對響應式電子郵件進行編碼的方式，電子郵件馬賽克可能無法從桌面版本轉換為移動版本。 在您的移動版本中隱藏和堆疊電子郵件內容可能會破壞您的電子郵件像素藝術。 在設計電子郵件馬賽克時一定要考慮到這一點。

4. 電子郵件像素藝術不必嘗試替換被阻止的圖像。 正如我們在 PlayStation 和 Benton Lingerie 示例中看到的那樣，電子郵件像素藝術可能與電子郵件中的圖像完全不同。 不要覺得您總是必須創建英雄圖像的 8 位版本。 有時，傳達圖像的精神同樣有效——而且可能更容易編碼，而交付更少。

5. 某些電子郵件更有可能阻止圖像。 阻止電子郵件中的圖像的可能性並不統一。 在電子郵件關係的開始和接近結束時，圖像阻塞的可能性都較高。

對於您向訂閱者發送的第一封電子郵件，他們可能會阻止陌生髮件人的圖像。 這意味著您可能希望為您的歡迎電子郵件和交易電子郵件投入更多精力進行防禦性設計。

對於關係中遲到的電子郵件（即在相當長的一段時間不活動之後），圖像可能會被阻止，因為它們位於訂閱者的垃圾郵件文件夾中。 這意味著您可能希望在重新參與電子郵件和重新許可電子郵件中投入額外的防禦性設計工作。

在這兩種情況下，除了大量使用 HTML 文本和样式化 ALT 文本之外，額外的努力可能包括電子郵件像素藝術。

優化圖像阻塞 Litmus Builder 可讓您輕鬆編碼電子郵件並在 70 多種電子郵件應用程序和設備中預覽它們。 只需單擊一下即可打開和關閉圖像，以完善您的電子郵件像素藝術。 建立偉大的電子郵件 →

如何製作電子郵件像素藝術

考慮到這些因素，創建電子郵件像素藝術的最佳方式是什麼？

首先，我們建議：

• 圖像到表格轉換器
• 電子郵件優化狗
• 圖像-HTML 應用程序

但是，您可能會發現這些方法並非在所有情況下都有幫助。 通常情況下，我們希望您希望手動構建您的電子郵件像素藝術。

如果這是您要走的路線，以下是您需要採取的主要步驟：

1. 在方格紙或您選擇的設計軟件中勾勒出最小可行的電子郵件像素藝術圖像。
2. 使用 Photoshop 或其他設計軟件中的切片工具將圖像劃分為必要的塊大小，以創建電子郵件馬賽克並將它們保存為單獨的圖像。 使用文件命名約定，可以輕鬆地將整個圖像拼湊在一起。
3. 使用嵌套在表格中的一系列表格，在您需要適應您的設計的位置創建塊。
4. 為確保您的切片圖像無縫地組合在一起，請為您的表格指定 cellpadding="0"、cellspacing="0" 和 border="0"。
5. 將所需的 bgcolor 應用到每個表格單元格。
6. 在禁用圖像的情況下預覽您的電子郵件，以確保它按預期呈現。

這是來自 Action Rocket 的 EmailWeekly 時事通訊的電子郵件像素藝術的一個很好的例子。 在 Litmus Builder 界面中選擇“切換圖像”以查看關閉圖像的電子郵件。

罕見且出乎意料的策略

電子郵件營銷人員了解設計圖像的必要性。 我們知道，根據 Litmus 對近 3,000 名營銷人員的 2018 年電子郵件現狀調查，83% 的品牌總是或經常在其電子郵件圖像中使用 ALT 文本。

然而，雖然添加 ALT 文本非常簡單，但創建電子郵件像素藝術絕非如此。 因此，近 77% 的品牌從不使用電子郵件馬賽克。

對於勇敢的品牌來說，這是一個機會。 這種策略的罕見性意味著它是一種通過提供意想不到的東西來給訂閱者帶來驚喜和愉悅的有效方式——而且越來越多的品牌正在迎頭趕上。 超過 23% 的品牌至少很少使用電子郵件像素藝術，高於 2017 年的 18%。

想要更多這樣的資源嗎？

訂閱 Litmus Weekly 以在收件箱中獲取每週的電子郵件靈感、提示和技巧。

上榜→