電子郵件模塊:如何自信地實際擴展獨特的電子郵件

已發表: 2021-05-04

多年來,您可能已經聽說過模塊化電子郵件模板,但還沒有真正實現。 或者,您可能不熟悉這個想法。 那麼究竟什麼是電子郵件模塊,您應該使用它們嗎? 簡單的答案是肯定的,並且與電子郵件中的其他問題不同,沒有“視情況而定”。

根據我們的電子郵件工作流狀態報告,52% 的電子郵件團隊從頭到尾花費兩週或更長時間來製作電子郵件。 模塊化電子郵件可加快流程以提高效率——因此您可以將更少的時間花在重複的代碼上,而將更多的時間花在創新上。 這是一個明智的選擇。

繼續閱讀以了解:

  • 什麼是電子郵件模塊?
  • 模塊化電子郵件的好處
  • 如何開始模塊化設計

什麼是電子郵件模塊?

電子郵件模塊是可重複使用的內容塊,可以以不同的組合方式組合在一起以創建電子郵件或一系列完整的電子郵件模板。 也稱為組件,模塊有多種類型,例如片段(針對特定電子郵件量身定制,如號召性用語按鈕)和部分(在多封電子郵件中保持一致,如電子郵件頁腳)。

作為更廣泛的電子郵件設計系統或品牌指南的一部分,您的所有模塊都可以放在一個模式庫中。 因此,您的團隊確切地知道如何混合搭配以構建不會中斷的符合品牌標準的電子郵件。 本質上,模塊化電子郵件設計圍繞較小的部分或模塊組合在一起以創建更大的設計。 就像樂高積木可以放在一起建造任何東西一樣。

模塊化電子郵件有什麼好處?

模塊化有很多好處,我已經暗示了一些。 如果您仍有疑問,這裡有好處。

標準化又名保持品牌和無錯誤

您的徽標或品牌顏色是否因電子郵件而異? 模塊化設計處理了這樣的不一致。 由於這些塊都經過預編碼和測試,您可以放心,它們將創建在所有電子郵件中保持您的品牌標準的電子郵件。 沒有錯誤。

節省時間並加快電子郵件工作流程

根據我們的 2020 年電子郵件現狀調查數據,大約 35% 的營銷人員在每封電子郵件上花費 1-2 個小時進行編碼和開發。 另有 34% 需要至少 3 小時。 由於超過一半的受訪者一次處理六封或更多電子郵件,這些開發時間很快就會增加。

隨著電子郵件設計標準化,您不必再擔心從頭開始編寫電子郵件。 這為您節省了大量時間,因此您可以更快地將電子郵件發送出去。 就個人而言,我現在可以在 10 分鐘內創建電子郵件。

靈活性和創造力

模板往往給人一種僵硬和無聊的感覺。 但是模塊化模板呢? 他們很有趣。 因為它們只是電子郵件的一部分,您可以混合搭配它們以滿足您的需求,這樣您就不會每次都堅持相同的舊佈局。

您的塊是實時電子郵件設計系統的一部分。 這意味著您可以隨著設計系統的發展不斷添加新的,以保持靈活性和創造力。

可用於拖放式電子郵件構建器

電子郵件模塊的另一個好處? 它們基本上是“即插即用”,因此,非常適合像 Litmus Builder 的拖放式可視化編輯器這樣的拖放式電子郵件構建器。 只需設置它們,您就可以開始了。

非編碼人員也可以創建電子郵件

在可視化編輯器中設置​​可重用內容塊後,您無需接觸代碼即可構建電子郵件。 這意味著即使您的非編碼人員也可以創建電子郵件! 再也不用擔心會不小心弄壞東西了。

擴展電子郵件生產

由於每個人(無論其技術能力如何)都能夠快速創建模塊化電子郵件,因此您可以輕鬆擴展整個電子郵件製作流程並發展您的電子郵件營銷計劃。 專注於諸如針對不同訂閱者群體的個性化電子郵件之類的事情——這在以前是永遠需要做的。

電子郵件收件箱檢查

快速創建品牌上無錯誤的電子郵件

使用 Litmus Builder 在一個無縫流程中構建、預覽和 QA 測試您的電子郵件。 不再在工具之間來回跳躍。

了解如何 →

如何開始模塊化設計

我們建議從創建電子郵件設計系統開始。 您不必從這一步開始,但這是確保您的電子郵件模塊分類和標準化的好方法。 如果不這樣做,那麼您可以創建非常基本的模塊,這些模塊在使用時需要很多樣式。 或者您可以創建風格化的塊,知道可能需要大量維護來維護它們。

一旦設計系統最終確定——實際上,不要等待。 設計系統是有生命的東西,會隨著您繼續構建電子郵件而發生變化。 不要等到整個系統完成後,一旦有足夠的塊來製作模板就開始編碼。

以下是如何開始。

1. 審核您的電子郵件,看看哪些部分是常用的

完成對電子郵件的審核,以查看是否發現任何模式。 您在電子郵件中看到哪些部分重複出現? 是否有您反複使用的頁眉和頁腳塊? 一欄和兩欄內容塊怎麼樣? 這些都是模塊的良好候選者。

帶有電子郵件模塊的電子郵件模板
我們時事通訊中的模塊示例

列出或記錄您計劃模塊化的部分以及它們的使用方式(包括參與規則)。 從一開始就組織您的組件,使您可以更輕鬆地在整個團隊中找到和正確使用它們,尤其是在您繼續擴展模式庫時。 它可以像為頁眉、正文和頁腳標記內容塊一樣基本。 或按團隊或客戶分類。

我喜歡使用 Litmus 設計庫中的類別按部分和電子郵件類型組織我的。

2. 確定標準和品牌指南

設計人員和開發人員在創建模塊時應攜手合作,以確保創建和維護標準(例如元素之間的間距和模塊之間的間距)。

電子郵件填充指南
我們在摘要中維護的時事通訊中的間距示例

並確保利益相關者在繼續之前就特定於電子郵件的品牌準則達成一致,例如字體和顏色。

3. 構建電子郵件樣板

您的所有模塊都需要放入框架或樣板 HTML 中。 這為您在如何佈置電子郵件方面提供了最大的靈活性。 有幾種不同的方式可以配置樣板,但所有樣板都在頂部包含一個部分,其中包含開始標籤、標題內容、任何重置和品牌樣式以及結束標籤。

電子郵件樣板代碼
從 Mark Robbins 的 Good Email Code 中獲取這個樣板 →

馬克羅賓斯創建了一個很棒的精簡基本電子郵件模板來幫助您入門。 將其與 Jay Oram 最新的電子郵件標準 CSS 重置樣式存儲庫相結合,您將擁有一個不錯的樣板文件。

4. 構建你的模塊

可以通過多種方式創建模塊。 只要您與模塊保持一致,那麼它們在組合時就會協同工作。 我將介紹兩種不同的方法:基於 <table> 的模塊和基於 <tr> 的模塊。

使用基於 <table> 的模塊

您可以將每個模塊包裝在一個表中,以便在添加模塊時將這些表堆疊起來。 基於表的模塊看起來像這樣:

基於表格的電子郵件模塊
優點:模塊整潔且獨立。 一張表中的任何佈局樣式都不會影響其他模塊。

缺點:堆疊表格有時會導致 Outlook 中的呈現問題,例如細白線。

使用基於 <tr> 的模塊

基於表行的模塊需要放置在包含表中。 然後,可以將行放置在包含表中,將行堆疊在一起,如下所示:

基於行的電子郵件模塊

優點:Outlook 中的白線問題較少。

缺點:一個模塊中的渲染問題可能會導致另一個模塊中的渲染問題。 並且可能需要更多代碼來在行內嵌套表以解決問題。

5. 測試,測試,再測試!

這兩種模塊方法都要求您進行一些質量保證 (QA) 測試,以確保一個組件不會破壞整封電子郵件。

我發現同時構建模塊和測試的最佳方法是創建一個包含 Litmus Builder 中所有模塊的大模板。

石蕊中的模塊化電子郵件模板

這允許 QA 測試模板中的模塊以查看它們如何相互影響。 它還確保保持模塊之間的間距。 添加所有模塊後,它們可以無縫複製並作為片段或部分保存在 Litmus 的設計庫中。

6. 開始在電子郵件製作過程中使用模塊

創建模塊後,只需在構建過程中使用它們即可。 大多數代碼編輯器都為您提供了一種向代碼或樣板添加片段的方法。

我使用 Litmus Builder。 在代碼編輯器視圖中,您可以使用代碼段觸發詞或插入菜單將代碼段直接添加到代碼中。 使用 Litmus Builder 中的拖放式可視化編輯器,只需將代碼片段拖放到位即可。

石蕊標誌

嘗試模塊化電子郵件創建

Litmus 使模塊化變得容易。 在設計庫中存儲和組織您的片段和部分。 然後,使用 Litmus Builder 中的可視化編輯器快速構建和 QA 測試電子郵件。 它甚至預裝了帶有模塊的完全優化的電子郵件模板,因此您可以直接進入。

開始免費試用 →

讓我們模塊化

如果您想在不犧牲靈活的電子郵件設計的情況下保持敏捷和高效,您會喜歡電子郵件模塊。 它們可以節省大量時間,讓您既符合品牌要求又具有創意。 誰不想要那個? 試一試——你以後會感謝我的。