這是電子郵件設計的未來

關於電子郵件設計被困在過去的說法很多。 處理他們的第一個項目的設計師對錶格和內聯樣式的使用感到遺憾。 策劃他們的第一個營銷活動的營銷人員拒絕超越批量和爆炸的心態。

但是一些勇敢的發件人拒絕讓圍繞電子郵件設計的（有時）過時的技術和心態阻礙他們。 他們正在突破電子郵件設計的界限，使用高級網頁設計中常見的技術來驚喜、愉悅並與訂閱者建立聯繫。

讓我們來看看與實驗性電子郵件設計相關的挑戰，並總結一些我們最喜歡的未來派電子郵件活動。

2020 年的電子郵件營銷 借助 20 位領先專家的見解以及來自數千名營銷人員和消費者的調查結果，為電子郵件營銷的未來做好準備。 現在就下載

電子郵件設計不必受到限制

當大多數人想到電子郵件營銷時，他們會想到由希望銷售某些東西的公司發送的乏味乏味的時事通訊。 而且，如果您的任務是創建電子郵件活動，您可能會查看一堆 HTML 表格和內聯 CSS 併計算分鐘，直到您完成編寫一封在任何地方都可以正常工作的電子郵件。

雖然電子郵件設計的基礎確實有點陳舊，但考慮到一點創造力、計劃和大量測試，您可以用它們做的事情真的沒有限制。 是的，電子郵件設計人員必須使用基於表格的設計（感謝 Outlook！）、內聯 CSS，並在大量黑客中游刃有餘，但是，如下面的示例所示，您仍然可以在收件箱中完成一些令人驚奇的事情。

為了證明這一點，這裡有一些我們最喜歡的電子郵件示例，它們打破了規則並突破了電子郵件設計的界限。

電子郵件中的輪播？

不久前，英國零售商 B&Q 發送了一封電子郵件，點燃了整個行業。

在此活動中，用戶可以將鼠標懸停在或點擊按鈕上，並觀看不同的內容部分平滑地滑進和滑出電子郵件。 這種技術通常被稱為輪播，在網絡世界中被廣泛使用，但在電子郵件活動中很少見。 有些人可能會抱怨輪播效果不佳且僅用於展示，但 B&Q 活動是如何使用尖端技術給電子郵件訂閱者帶來驚喜的一個很好的例子。

電子郵件使用了許多 CSS3 屬性以及一些巧妙的定位，以發揮其魔力。 通過使用 CSS 過渡、動畫、z-index 和 overflow 屬性，設計師精心製作了一封巧妙的電子郵件，可以直接點擊。

更令人印象深刻的是，對於不支持這些更高級技術的電子郵件客戶端，一切都可以很好地回退。

瘋狂的顏色和星球大戰

英國電子郵件機構 Action Rocket 在電子郵件設計方面一直處於領先地位。 他們巧妙地標題為電子郵件新聞每週摘要，電子郵件周刊，他們測試了一些最終可能會進入客戶活動的創造性技術。

我們最喜歡的例子之一是他們的電子郵件，其中詢問了“這封電子郵件是什麼顏色？”。

使用 CSS 關鍵幀動畫，它們為標題部分的背景顏色設置動畫，從而產生令人著迷的幻覺效果。 起初它很微妙，但是一旦訂閱者抓住了動畫，他們就無法轉身。

Action Rocket 的另一個很好的例子是他們最近的受星球大戰啟發的摘要，利用實驗性的 -webkit-perspective 屬性和 CSS 轉換，重新創建了每個人最喜歡的科幻電影的標誌性開場爬行。

電子郵件中的信息圖表？

雖然電子郵件代理顯示塊一直發送很棒的電子郵件，但真正引起我們注意的是他們最近的信息圖表電子郵件。

與 Email Weekly 示例中的背景顏色類似，顯示塊使用 CSS 關鍵幀動畫為已經精心設計的廣告系列增添活力。 真正很棒的是，電子郵件的響應非常好，可以在移動設備上很好地堆疊每個部分。 響應式設計和動畫圖標都有助於增強有關移動電子郵件使用的一些重要數據。

我們還沒有在電子郵件中看到很多這樣的信息圖表，這使得它更加令人印象深刻和開創性。 我們很想看到更多信息圖表的例子，這就是為什麼我們要舉辦一場專門針對它們的社區競賽！

HTML5 視頻和互動導覽

我們喜歡實踐我們所宣揚的東西，這就是為什麼我們使我們的電子郵件變得美觀且響應迅速，儘管我們的受眾主要是桌面用戶。 這也是我們自己的一些尖端電子郵件活動背後的原因，例如我們去年電子郵件設計會議的 HTML5 視頻背景（我們今年夏天將再次舉辦......）。

我們的設計師 Kevin 使用一些高級電子郵件客戶端定位來逐步增強原本簡單的設計。 如果你很好奇他到底是如何做到的，他寫了一篇博客文章，詳細介紹了這個過程。

並且，為了慶祝我們的電子郵件代碼編輯器 Builder 的推出，他通過在電子郵件中構建交互式導覽來更進一步。

利用 CSS 動畫、複選框 hack 和對 CSS 內容屬性的自由使用，他在收件箱中展示了 Builder 的一些功能 - 讓訂閱者無需登錄即可體驗產品。有很多支持它的代碼，但您可以直接在 Builder 中查看它（有點像電子郵件 Inception）。

更美味的電子郵件菜單

與輪播電子郵件一樣，設計師 Jerry Martinez 從網絡中汲取靈感，為移動訂閱者設計了一個漢堡菜單。

導航元素對於電子郵件設計者來說總是一個技巧——尤其是在移動設備上。 由於它們在堆疊時往往會佔用大量空間，因此它們可能會分散對活動中主要號召性用語的注意力。 為了解決這個問題，Jerry 設計了一個優雅的漢堡菜單，允許移動用戶有選擇地顯示導航項目。

Jerry 的解決方案給我們留下了深刻的印象，我們邀請人們在我們的社區競賽之一中展示其他創意導航模式……

社區競賽：真正的前沿

我們的社區競賽是我們真正挑戰人們提出一些瘋狂想法的地方。 每個月，我們都會給他們一個主題，讓他們發揮自己的技能。 我們的第一場比賽，著眼於 ALT 文本的創造性使用，產生了一些驚人的結果，就像一封電子郵件中的 Space Invaders：

在我們的第二場比賽中，我們讓人們想出了有趣的導航模式。 我們被一些結果震驚了，比如 Remi Parmentier 的粘性導航概念：

嘗試新事物？

雖然在電子郵件中嘗試新事物是令人興奮的，但如果您不徹底測試您的廣告系列，很多事情都可能出錯。 電子郵件預覽使在桌面、網絡郵件和移動電子郵件客戶端中測試任何技術變得容易。

免費試用 Litmus →