響應式電子郵件設計面臨挑戰？嘗試行動優先電子郵件編碼

想要充分利用電子郵件行 響應式電子郵件設 銷嗎？最好確保您將響應式電子郵件設計放在首位。這似乎是理所當然的，對吧？但事實是，優化行動裝置的電子郵件行銷活動並不像您想像的那麼容易。

最近，我與Sinch Mailjet的同事共同主持了一場關於設計主題的電子郵件學院網路研討會。 Mailjet 和 Email on Acid 的大量使用者出席了會議。當我們調查人們最大的設計難題時，響應式電子郵件設計位居榜首。

大多數人在智慧型手機和行動裝置上查看電子郵件至少已經有十年了。那麼，為什麼設計和編碼適合行動裝置的電子郵件仍然如此令人頭痛呢？

這可能是因為響應式電子郵件設計是事後的想法，而不是您的起點。改變方式的第一步是對程式碼進行簡單的切換。對於一些電子郵件開發人員來說，這是一個思想轉變。我們中的許多人首先為桌面編寫響應式電子郵件，然後添加 CSS媒體查詢以適應較小的螢幕。但現在可能是你徹底改變這種做法的時候了。繼續閱讀，我會解釋…

為什麼響應式電子郵件設計很重要

您不必費力尋找電子郵件行銷統計數據和研究，這些統計數據和研究表明智慧型手機用於查看電子郵件的人數增加。目前，可以肯定地說，至少一半的電子郵件開啟發生在行動裝置上。

2024 年關於全球消費者如何處理電子郵件的報告發現，約71.5% 的消費者最常使用手機查看電子郵件，而只有不到 4% 的消費者使用平板電腦。不到 25% 的消費者表示，他們主要使用電腦來檢查電子郵件收件匣。

當然，雖然智慧型手機可能是用於檢查電子郵件的主要設備，但它並不是唯一的設備。許多收件者會在一個環境中查看電子郵件，然後使用不同的裝置或應用程式返回查看該電子郵件。例如，某人可以在工作時在桌面上查看電子郵件，然後當晚在沙發上休息時查看電子郵件。

無論電子郵件在何處打開，您都需要提供理想的體驗。這意味著專注於響應式電子郵件設計，它可以根據不同的螢幕尺寸調整 HTML 電子郵件行銷活動的佈局。

即使是擁有電子郵件的 B2B 品牌也開啟了桌上型電腦和筆記型電腦的趨勢，也應該考慮響應式電子郵件設計。因為你永遠不知道你的下一個大潛在客戶何時會在他們的智慧型手機上打開電子郵件。

兩次電子郵件活動的故事…

讓我們來描繪為什麼響應式電子郵件設計如此重要：

場景 1：無回應惡夢

想像一下，您剛剛推出了限時搶購，並且您的電子郵件發送給了數千名訂閱者。但是呃哦——這個設計不適合行動裝置。你的 CTA 按鈕很小，文字不縮放就無法閱讀，而且圖像檔案太大，需要很長時間才能加載。結果呢？沮喪的客戶、錯失的銷售機會、退訂率飆升，以及行銷團隊其他成員的集體抱怨。

場景 2：行動友善夢想成真

現在，翻轉該腳本。您的閃購電子郵件經過設計和編碼，可以回應各種螢幕尺寸。有些聯絡人在手機上看到單列佈局，而有些聯絡人則在桌面上開啟時看到三列設計的特色產品。 CTA 按鈕非常醒目，而且很容易點擊 -​​ 而不僅僅是點擊。具有出色的可讀性，並且圖像經過優化以實現快速加載。結果呢？一次成功的行銷活動，您的電子郵件比任何其他行銷管道帶來了更多的流量和銷售。

這是一個有問題的電子郵件設計的直覺範例。這是差不多九年前的事了，所以我們會給梅西百貨一些恩典（希望現在他們知道得更多了）。一看這個活動，您可能就會發現一個大問題。想像一下嘗試點擊這些產品類別按鈕，更不用說在手機上閱讀一些文字了。

如果您的目標是優化電子郵件以實現轉化，您需要確保人們可以與您發送的內容互動。但我們應該提到…適合行動裝置的電子郵件與響應式電子郵件並不完全相同。

行動友善與響應式電子郵件設計

讓我們澄清一下行動裝置友善和響應式電子郵件之間的區別：響應式電子郵件應該是行動裝置友善的，但行動裝置友善電子郵件不一定是響應式的。

雖然您可以遵循適合行動裝置的電子郵件的最佳實踐，但這與響應式電子郵件不同。響應式電子郵件設計意味著您的電子郵件的佈局、字體大小、按鈕、電子郵件內容等可進行調整和適應，以在不同的螢幕上提供理想的體驗。為了實現這一點，您要么需要知道如何對電子郵件進行編碼，要么需要使用響應式電子郵件模板，這些模板已經編碼適應螢幕尺寸，同時使用拖放電子郵件編輯器。

當然，您也可以擁有一封可以適應不同螢幕尺寸的電子郵件，但它在行動裝置上的外觀或功能仍然不佳。為了提供最佳體驗，您需要採取兩個步驟：

1. 確保您的電子郵件具有回應能力。
   • 這通常意味著使用 CSS 媒體查詢
2. 確保您的電子郵件也適合行動裝置。
   • 這意味著遵循電子郵件設計最佳實踐以獲得良好的行動體驗。

為什麼響應式電子郵件設計是一個挑戰？

Sinch Mailjet 的Inbox Insights 2023發現，世界各地的電子郵件寄件者將響應式電子郵件設計視為一項重大挑戰。對於那些編寫電子郵件行銷活動程式碼的人來說，這是一件特別重要的事情。

儘管超過 36% 的受訪者選擇響應式電子郵件作為他們的三大挑戰之一，但超過 42% 的電子郵件開發人員選擇了該選項。請參閱我們有關電子郵件開發人員觀點的文章以了解更多資訊。

那麼，是什麼讓響應式電子郵件設計如此具有挑戰性？

一方面，很容易預設採用桌面優先的電子郵件開發方法。畢竟，這就是我們編寫程式碼的環境。然而，結果是，我們最終首先為更大的螢幕開發電子郵件，從長遠來看，這可能會讓事情變得更加困難。

例如，採用為桌面設計的三列佈局的電子郵件並將其重新編碼以使其在各種行動裝置上正確顯示將需要大量的開發工作。

• 這些列應該如何堆疊？
• 圖像和文字需要如何改變？
• 您應該考慮哪些移動斷點？

為了適應較小的螢幕而需要編寫的程式碼越多，出現導致問題的小錯誤的機會就越多。缺少一個大括號，整個電子郵件佈局突然變得一團糟。

另一方面，當您從在智慧型手機上查看電子郵件的簡單佈局開始，然後擴展桌面設計時，情況就不同了。如果在桌面上查看電子郵件的訂閱者最終看到您的電子郵件行銷活動的行動佈局，那麼它看起來仍然不錯，並且他們仍然可以參與。

但在行動裝置上查看桌面版本的電子郵件卻不能說同樣的話。這就是為什麼 行動優先電子郵件編碼是更安全的選擇。

如何切換到行動優先電子郵件編碼

可以說，透過程式碼實現響應式電子郵件設計的最受歡迎方法是使用媒體查詢。

現在，當然可以在不使用媒體查詢的情況下開發響應式電子郵件。電子郵件極客 Nicole Merlin 撰寫了一篇精彩的文章，介紹了她在沒有媒體查詢的情況下編寫響應式電子郵件的過程。然而，在本文中，我們將重點放在媒體查詢編碼上。

目前，幾乎所有主要電子郵件用戶端都很好地支援螢幕尺寸的媒體查詢支援。 （請參閱以了解最新資訊。）這就是我用於響應式電子郵件設計的方法。當您首先為行動裝置編碼時，媒體查詢是相當萬無一失的。

對大多數人來說，最大的轉變是使用媒體查詢而不是.只需這樣做，您就可以採用行動優先的方法來開發電子郵件。

媒體查詢：最大寬度與最小寬度

當您學習使用媒體查詢編寫回應式電子郵件時，您很有可能被告知使用該max-width屬性，這本質上是一種桌面優先的心態。十年前，這對許多寄件者來說可能是有意義的，但情況已經改變了。

那麼，和之間的最大差別是什麼

桌面優先 = 最大寬度

當您使用該屬性時，您實際上是在告訴電子郵件用戶端您的桌面樣式是預設樣式，並且您使用媒體查詢來適應較小的螢幕。 max-width 描述了停止套用行動樣式之前的最大寬度。因此，您的樣式應從最大到最小排序。

換句話說，max-width表示：如果螢幕尺寸小於或等於X，則執行Y。

以下是您如何使用最大寬度媒體查詢編寫基本的兩列桌面電子郵件，該查詢將堆疊各列以供移動查看：本上，我們所說的是，嵌套在媒體查詢中的任何程式碼都應該僅在螢幕尺寸或視窗小於 480 像素時觸發。當行動裝置的螢幕或桌面上的瀏覽器視窗低於 480 像素時，列將會堆疊。

將每個 div 的顯示屬性設為，這允許列像表格一樣工作。媒體查詢表示當螢幕尺寸高於 480px 時使用這些樣式。 （注意：父 div 的顯示屬性需要設定為 table 才能運作。）

然後，您需要將顯示屬性變更為針對行動裝置進行阻止，並將寬度屬性設為 100%。您還需要使用來覆蓋媒體查詢上方的程式碼。

移動優先 = 最小寬度

當您使用該屬性時，您是在告訴電子郵件用戶端您的行動樣式是預設的，並且您使用媒體查詢來適應更大的螢幕。最小寬度定義開始套用樣式之前的最小寬度。因此，您可以從最小到最大列出您的樣式（也稱為移動優先）。

換句話說，表示：如果螢幕尺寸大於或等於X，則執行Y。

這是兩列電子郵件佈局的相同基本程式碼。不同的是，這次我們首先使用行動媒體查詢和編碼。它仍然設定為 480 像素，但現在當螢幕大於 480 像素時它將套用桌面樣式。還使用偽類在電子郵件的移動或堆疊版本周圍添加一些間距，這些間距在媒體查詢中被覆蓋和刪除。

當您採用桌面優先的方法時，您最終會覆 荷蘭電子郵件列表 蓋比這些媒體查詢中更多的內容。但是，如果您進行行動優先電子郵件編碼，您設定的大多數行動樣式都會轉移到桌面。

另外，如果您的媒體查詢不起作用，則預設會顯示移動樣式。東西看起來可能比您在桌面螢幕上預期的要小，但佈局不會破壞，訂閱者甚至可能不知道其中的差異。

這意味著當你首先做行動工作時，你實際上需要做的改變更少。另外，您的桌面樣式最終會短得多，而不是擁有很長的行動樣式，這些樣式會覆蓋桌面上的許多內容。

對於那些透過非 Google 帳戶使用 Gmail 應用程式的用戶來說，使用該功能也很有幫助。這些所謂的 ANGA 帳戶可能存在許多導致媒體查詢中斷的渲染問題。

行動優先電子郵件開發的真相

雖然我堅信首先要針對行動螢幕進行編碼，然後使用最小寬度來使內容具有響應性，但我似乎屬於少數派，這有點令人驚訝。

當我們對 Acid 的 LinkedIn追蹤者進行 Sinch Email 的非正式、不科學的民意調查時，我們發現大多數電子郵件開發人員都在使用最大寬度媒體查詢。只有 11% 採用行動優先方法並使用最小寬度。事實上，越來越多的人正在使用流體混合電子郵件編碼方法，該方法實際上完全跳過了媒體查詢。

這可能是“但我們一直都是這樣做的”之類的情況之一。如果您學會使用最大寬度編寫電子郵件程式碼，那麼這可能是一個很難改掉的習慣。但如果你問我，對行動優先響應式電子郵件使用 min-width 的優勢超過了更新程式碼的挑戰。

行動優先電子郵件設計系統的 7 個技巧

在開始以行動優先的心態撰寫電子郵件之前，您可能必須重新考慮行銷活動的設計方式。當您有一個可遵循的定義系統時，響應式電子郵件設計會更快、更有效率。

如果您尚未使用電子郵件設計系統，這將是開始的絕佳機會。如果您已經有一個已定義的系統，則只需進行一些調整即可。這裡有一些重要的建議…

1. 電子郵件設計模型

如果您一直在縮減為桌面設計的電子郵件，以使其更適合行動設備，那麼您需要重新考慮您的方法。

無論螢幕尺寸如何，將所有內 為什麼購買電子郵件行銷線上課程？ 容切換為一欄電子郵件佈局可能是最簡單的。在行動優先的電子郵件建立中，簡單性絕對很重要。然而，這不是唯一的方法。

嘗試重新考慮您的響應式 HTML 電子郵件模板，牢記開頭和結尾。換句話說，電子郵件範本應該如何在最小和最大的螢幕上顯示？不要考慮桌面佈局的元素如何在行動裝置上堆疊，而是考慮響應式單列電子郵件如何在更大的螢幕上「取消堆疊」或擴充。

建立適用於行動裝置和桌面裝置的模型，同時牢記斷點。最常見的行動斷點是 480px，但一些較小的 iPhone 是 320px。

2. 字體大小

仔細查看您的主要字體以及您在字體堆疊中使用的任何其他字體。確保文字大小在手持裝置上可讀。

雖然 16 像素字體通常被認為是可訪問性的最佳實踐，但我選擇在我們的設計系統中將行動電子郵件的字體大小提高到 18 像素。對於我們品牌使用的字體，感覺 16px 對於智慧型手機來說太小了，尤其是在某些裝置上的高解析度顯示器上。

請記住，「最佳實踐」並不是硬性規則，有時需要根據不同情況進行調整。

3. 空白區域

為您的行動優先電子郵件提供喘息的空間。電子郵件設計中足夠的空白對於良好的行動體驗非常重要。

元素之間的空間可以讓您更輕鬆地使用資訊並理解您所傳遞的訊息。在號召性用語或產品圖像等重要功能周圍留下空白有助於將觀眾的注意力吸引到設計的該部分。

保持段落簡潔明了，因為大塊文字在小螢幕上很難閱讀。如果文字連結非常靠近，收件人可能很難點擊正確的內容。

4. 點選目標

說到點擊，這是行動和桌面用戶體驗之間最大的差異之一。您的訂閱者用手指或拇指點擊，而不是用滑鼠和遊標點擊。無論您的 CTA 按鈕多麼引人注目和富有創意，如果觸摸目標難以點擊，您的點擊率都會受到影響。

可訪問的點擊或觸摸目標的最小建議尺寸為44px x 44px。此尺寸基於成人指墊的平均長度，約為 10 毫米。您可能希望按鈕比這更大。有些電子郵件開發人員建議使用全角 CTA 按鈕，因為如果有人用一隻手操作其設備，則可以更輕鬆地用拇指點擊。

5. 專欄

雖然單列佈局將提供最適合行動裝置的電子郵件設計，但在某些情況下，您肯定會使用列而不堆疊所有內容。

我曾經在 Acid愚人節時事通訊的電子郵件中這樣做過，它模仿了 Myspace 頁面的外觀，作為有趣的復古。對於電子郵件中顯示「前 8 位」好友的部分，我在行動裝置上使用兩列佈局，在桌面查看時使用四列佈局。

如果前 8 名是單張個人資料照片堆疊在一起，看起來就不太對勁了。但由於這些只是縮圖大小的小圖像，所以兩列效果很好。

您也可以在包含大量產品縮圖的電子商務電子郵件中執行類似的操作。或者，兩列可以用作電子郵件中適合行動裝置的照片庫。您不想做的是將正文放在行動電子郵件的列中，因為這很可能很難閱讀。

對於您創建的每個行銷活動，請仔細考慮不同螢幕尺寸上的訂閱者體驗。

6. 視網膜顯示屏

大多數電腦顯示器都具有高解析度顯示屏，使用 Retina 顯示技術的 Apple 設備也是如此。對於這些螢幕，您會希望圖像看起來漂亮且清晰。

為此，請使用尺寸是您希望最 台灣數據 終在最大螢幕上顯示的尺寸兩倍的圖像。因此，在我們先前的範例中，以 600 像素寬顯示的影像的實際大小應為 1200 像素。

這樣做可以提供更大的像素密度，以便影像在視網膜螢幕上看起來不會模糊。

7. 圖像檔案大小

雖然您希望這些圖像看起來清晰，但您不應該因為巨大的圖像檔案而減慢電子郵件的載入時間。這對於行動優先的電子郵件開發尤其重要，因為您永遠不知道收件者何時可能位於沒有高速網路的地方。另外，請注意人們的數據計劃也可能有限。

您不希望訂閱者盯著空白畫面等待電子郵件中的圖片載入。因此，請務必壓縮映像並盡量將其檔案大小保持在 200kb 或更小。在電子郵件中使用太多動畫 GIF也會導致載入時間變慢。 GIF 中的每一幀都是它自己的影像。盡量將 GIF 控制在 1mb 以下。

響應式電子郵件設計的行動優先方法的優點

當我們深入探討行動優先電子郵件設計時，讓我們回顧為什麼這種方法值得您花費時間和精力：

1. 簡化您的工作流程：從行動設計開始並擴展到更大的螢幕通常比相反更容易。
2. 改善使用者體驗：隨著越來越多的人在行動裝置上查看電子郵件，行動優先的方法可確保您的郵件在最有可能首先看到的地方看起來很棒。
3. 讓您的電子郵件面向未來：隨著行動裝置使用量的不斷增長，您的電子郵件將能夠適應市場上出現的任何新裝置。
4. 提高參與度：當電子郵件易於在行動裝置上閱讀和互動時，您更有可能看到更高的點擊率和轉換率。

請記住，響應式電子郵件設計不僅僅是讓事情看起來漂亮（儘管這是一個不錯的獎勵）。這是為了為我們的訂閱者創造更好的體驗，提高參與度，並最終為我們的電子郵件活動帶來更好的結果。

在發送前測試您的響應式電子郵件設計

只有一種方法可以確保您的電子郵件行銷活動在行動裝置上按照您想要的方式呈現 – 那就是在點擊發送按鈕之前對其進行測試和預覽。

如果您要更新範本以支援響應式電子郵件設計，您可以使用 Acid 上的 Sinch Email 來準確查看它們在最受歡迎的行動作業系統和裝置上的呈現方式。利用我們的電子郵件預覽來查看最重要的客戶如何呈現您的程式碼。

雖然有許多平台可以讓您查看 HTML 電子郵件在行動裝置和桌面裝置上的外觀，但我們的解決方案更進一步。您將從實際的電子郵件用戶端渲染中獲得螢幕截圖。例如，測試和預覽電子郵件在 iPhone 上的 Outlook 中的外觀，或在深色模式下在 Gmail 應用程式中的外觀。為您想要查看的用戶端和裝置自訂您自己的測試設定檔。

我們的電子郵件品質保證平台還提供可訪問性、送達率、收件匣顯示、驗證等檢查。它是優化行銷活動和簡化電子郵件行銷複雜性的理想工具。每個付費方案都享有無限的電子郵件測試。使用 Acid 上的 Sinch Email 進行為期一週的免費試用。