2023 年的設計、模板和示例

您是否曾在手機上打開過電子郵件，但發現圖片質量低下、文字太小、號召性用語按鈕損壞？ 這些都是靜態電子郵件設計的缺陷。 響應式電子郵件就是答案。

鑑於超過一半的美國居民在手機上查看電子郵件營銷信息，您需要針對多個屏幕優化您的電子郵件，包括手機和平板電腦。

響應式電子郵件使用流暢的圖像和表格，以在不同的屏幕尺寸之間保持靈活性。 最終，他們交付為每個用戶的最佳體驗而設計的內容。

雖然可以使用 CSS 媒體查詢設計響應式電子郵件，但您不需要任何編碼經驗即可製作。 創建響應式電子郵件不僅僅是編碼人員的工作。

在這裡，我們列出了一些最佳實踐和現成的模板，以及有關響應式電子郵件基礎知識的快速教程。

響應式電子郵件也更易於訪問，因為它們允許訂閱者在他們喜歡的設備上閱讀。

為了說明這一點，這是我收到的促銷電子郵件在桌面上的樣子。

這封電子郵件有很棒的圖像、可購買的圖標，而且格式很好。 當我在手機上打開電子郵件時，這就是我所看到的。

我仍然擁有相同的信息、相同的照片和可購買的圖標。 唯一明顯的區別是電子郵件格式。 為了更好地適應移動體驗而有所不同。

現在，想像一下如果將相同的桌面佈局應用於移動設備。 我必須放大我的手機才能看到任何圖片或文字。 我不會那樣做，而是退訂。

通過響應式電子郵件，可以增強用戶體驗以及營銷活動的投資回報率。

想一想：對優化的移動電子郵件設計感到滿意的訂戶會發現自己會打開更多營銷信息，因為他們知道這些信息易於訪問且看起來不錯。

因此，有了所有這些關於響應式電子郵件的討論，您一定很想創建自己的電子郵件。 接下來，我們將查看一些響應式電子郵件示例和模板。

響應式電子郵件設計

您可以通過多種方式設計響應式電子郵件。

如果您具備編碼知識，則可以為不同的屏幕尺寸編寫不同的電子郵件模板。 您還可以使用適用於所有屏幕尺寸的預製模板。

無論採用何種方法，您都需要電子郵件營銷軟件。 在這裡，您可以設計一封電子郵件，然後在多個設備上預覽該電子郵件。 大多數電子郵件軟件都會向您展示設計在多個設備上的外觀。

下面的視頻將帶您了解如何使用模板設計電子郵件。 在視頻中，用戶使用的是 Klaviyo，但無論您使用什麼軟件，這些概念都適用。

編寫響應式電子郵件

如果您希望使電子郵件的元素具有響應性，則需要使用媒體查詢。

媒體查詢是一種 CSS 技術。 它允許您設置僅在某些條件為真時出現的樣式規則。 例如，您可以指定當屏幕寬度為 600 像素或更小時要使用的字體大小和圖像大小。

使用電子郵件時，您可以使用媒體查詢來指定您的設計在台式機、平板電腦和移動設備上的外觀。 為此，您需要指定以下內容：

• 使用選擇器“@media”並指定“screen”。 這表明該代碼將影響帶有屏幕的設備。
• 以像素為單位設置“最大寬度”。 這指定代碼將生效的屏幕尺寸。
• 指定您希望特定屏幕遵循的任何 CSS 樣式指南。

讓我們看一下下面的代碼。

@media 屏幕和（最大寬度：600px）

身體

字體大小：30px；

當應用於電子郵件的 CSS 時，對於 600 像素寬或更小的屏幕，正文將以 30 像素的大小顯示。

雖然這種方法可以幫助您製作電子郵件回复的某些元素，但我們建議您盡可能使用模板。

除非您擁有全面的網頁設計經驗，否則對多個媒體屏幕進行編碼可能既耗時又令人沮喪。

如果您不是技術人員或想要更簡單的方法，請嘗試使用帶有內置響應式模板的電子郵件營銷工具。 例如，HubSpot 的免費電子郵件軟件提供默認響應的拖放模板。

響應式電子郵件設計示例

現在是探索示例的時候了。 從這個視頻開始，它介紹了一些最好的電子郵件營銷活動。

然後，您可以閱讀一些我們最喜歡的響應式電子郵件設計。

1. TOMS 時事通訊

在 TOMS 的時事通訊中，桌面版和移動版的主要區別在於顯示廣告的堆疊和大小。

通過響應式設計，移動版沒有混亂的導航，圖像也很適合屏幕。 CTA 也已移動以提高可見性。

圖片來源

2.大都會藝術博物館

正如在 TOMS 時事通訊中看到的那樣，響應式電子郵件設計有助於以視覺上吸引人且易於消化的方式堆疊內容。 MET 的這個例子也不例外。

在移動設備上，菜單的位置會發生變化。 指向不同禮品店商品的鏈接位於頁面底部。 這使可用紀念品的圖像保持在最前面和中心位置。

圖片來源

3. 桑葚

同樣，通過響應式電子郵件設計，遊戲的名稱是堆疊的。 這一切都是為了讓內容易於閱讀和具有視覺吸引力，無論人們查看內容的設備有多小。

交替的照片和文本對於桌面來說很有意義，而對於移動設備，照片和相關文本的一致堆疊以及分界線確保觀眾不會感到困惑。

圖片來源

響應式電子郵件模板

響應式模板會自動適應任何屏幕尺寸，因此無論是在智能手機、平板電腦還是計算機上打開電子郵件，它看起來都很棒並且功能齊全。

對於編碼背景較少或希望在設計上花更少時間的人，我的建議是使用模板。 它們是確保您的電子郵件看起來專業且響應迅速的必經之路。

響應式電子郵件模板可以節省您設計可以從選擇中挑選出來的電子郵件的時間。 例如，HubSpot 的電子郵件營銷工具包括 60 多個僅用於響應式電子郵件的模板。

現在讓我們來看看一些模板選項。

1.HubSpot

HubSpot 提供了幾個免費的響應式電子郵件模板。 如果您是 HubSpot 客戶或免費用戶，您可以下載並親自試用。

例如，這裡是響應式電子郵件模板之一 - 請注意側邊欄，您可以在其中預覽多個設備上的模板。

圖片來源

單擊設備類型並確保您的電子郵件具有相應的格式是設計過程的最後步驟之一，也是使用 HubSpot 等軟件時響應電子郵件過程中的唯一步驟。

例如，通過單擊智能手機設備進行預覽，您可以查看您的內容（包括字體大小和圖像分辨率）的格式是否適合移動設備。

2.活動監控

CampaignMonitor 提供的模板與許多其他模板類似，其中響應式電子郵件結果顯示在預覽工具中。 例如，這是一個 CampaignMonitor 模板：

圖片來源

您可以並排查看不​​同的設備，以便輕鬆比較設計元素。 可以進行微小的編輯以為所有訂戶創造最佳體驗。

CampaignMonitor 模板通常是免費的，因此如果您的預算很少，它是一個不錯的選擇。

3.條紋

Stripo 提供超過 300 個免費的 HTML 電子郵件模板。 您可以按行業、季節、類型和功能選擇模板。 例如，這是來自他們的商業行業部分的模板。

圖片來源

可靠的響應式電子郵件模板的一個好標誌是可以選擇在桌面和智能手機變體中查看預覽，如 Stripo 的預覽模式所示。

請注意如何在移動預覽中採用單列佈局以適應手機規格。

Stripo 是一個您可以快速訪問以找到符合您目標的模板的網站。 如果您想嘗試響應式電子郵件或想要一些設計靈感，您可以考慮 Stripo。

4. 持續聯繫

Constant Contact 提供超過 200 個專業電子郵件模板，註冊後即可訪問。 通過查看下面的示例，您可以看到該平台提供了響應式電子郵件模板。

圖片來源

Constant Contact 的模板具有拖放編輯、添加調查的選項、電子商務功能和照片庫工具。 這些功能都可以幫助創建電子郵件訂閱者想要看到的內容。

使用像 Constant Contact 這樣的服務很有幫助，因為特定的工具可以讓你保持一致性，就像上面的例子一樣。 您可以看出電子郵件的響應特性不會影響任何設計元素。

現在我們已經了解了一些模板選項，讓我們看看另一種使響應式電子郵件起作用的方法以及最佳實踐。

響應式電子郵件最佳實踐

響應式電子郵件的確切設計將根據您的活動目標而有所不同。 但是，這些提示可以幫助您確保為讀者提供最佳體驗。

• 確保您的響應式電子郵件具有可擴展性和靈活性。 在不同設備上預覽電子郵件以確保您的消息具有響應性。
• 如果您編寫自己的電子郵件，請記住 CSS 媒體查詢會將固定字段更改為流動字段。
• 使用在較小屏幕上易於閱讀的較大字體。
• 單列佈局更容易擴展。 如果簡單的佈局適合您的網頁，那麼一定要考慮將它們用於響應式電子郵件。

在點擊“日程安排”之前，請務必測試您的電子郵件。 只有在您看到它們在多種屏幕分辨率下的外觀後，才最終確定設計。 許多人只是為了方便而通過手機訪問電子郵件。

檢查電子郵件有效性的一種簡單方法是將其作為測試發送給您自己或您的團隊——它是否與您收件箱中的其他響應式營銷電子郵件相提並論？ 如果是這樣，您就可以發送了。

開始使用響應式電子郵件

響應式電子郵件為您的客戶創造更好、更易於訪問的體驗。 如果您只是進行過渡，請先探索預製的響應式電子郵件模板。 這些將節省您的時間，同時為您提供設計靈活性。

然後，徵求第二意見。 讓同事在他們的桌面和手機上打開一封電子郵件。 您可以獲得他們對這兩種體驗的誠實反饋。

最後，不要害怕嘗試。 您可以對不同的響應式設計進行 A/B 測試，直到找到最能引起共鳴的佈局。

很快，您將發送響應式電子郵件並提高打開率。