只需 5 個簡單步驟即可使您的電子郵件設計具有響應式行動裝置友善性
已發表: 2024-01-17您希望您的電子郵件通訊和行銷活動在任何裝置上看起來都很棒嗎？ 當然可以。 沒有人希望自己的辛勤工作在某人的收件匣中變得無法閱讀。 幸運的是，只需五個步驟，您就可以確保您的電子郵件具有響應能力並準備好給訂閱者留下深刻的印象。 因此，帶上一些茶點、您最喜歡的播放清單或飲料，然後讓我們開始確保它們在任何螢幕上都呈現最佳效果。
以百分比而不是像素設定列寬
為了讓您的電子郵件設計具有回應能力，請使用百分比而不是固定像素值來設定列寬。 這使得列可以靈活地調整以適應不同的螢幕寬度。
使用流體網格
流體網格方法使用列寬百分比，以便它們可以根據螢幕尺寸根據需要擴展和收縮。 對於簡單的兩列佈局，左列寬度為 60-70%，右列寬度為 30-40%。 例如：
<表>
<tr>
<td width=”65%”>此處為第 1 列內容</td>
<td width=”35%”>此處為第 2 列內容</td>
</tr>
</表>
這將使第 1 列佔用 65% 的可用空間，第 2 列佔用剩餘的 35%。 在大型桌面螢幕上，第 1 列最終可能有 650 像素寬，而在小型行動螢幕上，可能只有 200 像素寬。 但相對比例將維持不變。
新增響應斷點的媒體查詢
媒體查詢可讓您根據螢幕寬度套用不同的樣式規則。 您可以使用它們在不同的斷點處對流體網格進行進一步調整。 例如：
/* 對於手機： */
@media only 螢幕和（最大寬度：600px）{
表，TD {
寬度：100%！重要；
}
}
/* 對於平板電腦： */
@media only 螢幕和（最小寬度：601px）和（最大寬度：900px）{
表，TD {
寬度：80%！重要；
}
}
這將使表格和列在小型手機上擴展至填充 100% 的螢幕寬度，在平板電腦上填充 80% 的螢幕寬度，從而使設計完全響應。
使用可調整大小的流體圖像和媒體
為了使您的電子郵件設計適合行動設備，圖像和其他媒體需要流暢地調整大小以適應任何螢幕尺寸。 請遵循以下提示：
使用響應式影像尺寸
將圖像新增至電子郵件時，請使用響應式圖像大小調整。 這意味著提供多種圖像尺寸，以便電子郵件用戶端可以為正在查看的螢幕選擇正確的尺寸。
例如，不僅包含 1000 像素寬的大圖像，還包含：
- 中等尺寸（約 600px）
- 小尺寸適合窄列（約 400 像素）
- 適合小移動螢幕的小尺寸（約 200 像素）
電子郵件用戶端將自動選擇最適合螢幕和頻寬的尺寸。 若要在電子郵件中指定多個圖像尺寸，請使用 <img srcset> 屬性。
使媒體適合行動裝置
對於視訊或 GIF 等其他媒體，還提供多種尺寸選項。 視訊應具有不同解析度的 MP4 來源。 GIF 和 iframe（如 YouTube 嵌入）應該具有寬度限制，可以調整大小以適應任何螢幕。
牢記這些提示，您的電子郵件圖像、影片和其他媒體將在任何裝置上完美顯示。 您的訂閱者將會欣賞一封看起來很棒並且無論在哪裡打開都易於閱讀的電子郵件。
字體大小以 em 為單位，而非像素
為了讓您的電子郵件設計適合行動設備，您需要將字體大小設為 em，而不是像素。 像素是固定單位，因此如果有人放大瀏覽器，文字可能會變形。 另一方面，Ems 是根據使用者設定縮放的相對單位。
使用響應式電子郵件框架
響應式電子郵件框架具有預先建置的元件，可根據任何螢幕寬度自動調整大小。 一些流行的選項包括 MJML、Foundation for Emails 和 Ink。 這些框架使用 em 來調整大小，因此您不必擔心自己進行轉換。
如果不使用框架，請將像素轉換為em
如果您想完全控制 CSS 並且不喜歡使用框架，則需要將任何像素大小轉換為 em。 就是這樣：
- 確定基本字體大小（以像素為單位）。 假設它是 16px。
- 將其轉換為 em。 1em = 16px（您的基本尺寸），因此 16px = 1em。
- 您想要使用的任何尺寸，除以 16px 並乘以 1em。 例如，對於 24px 標題，24px/16px = 1.5em。
- 將 CSS 中的所有像素大小替換為 em 等效值。
響應式地調整您的內容
為了使您的電子郵件設計具有響應能力，您需要對齊內容，以便它在任何螢幕尺寸上都能正確顯示。 按著這些次序：
使用流體測量
不要對列、映像和容器使用固定像素寬度，而是使用百分比。 這將允許您的內容根據螢幕寬度按比例縮放。 例如，不要使用寬度=“600px”的圖像，而使用寬度=“50%”。
避免沉重的造型
透過限制自訂樣式的使用來保持電子郵件簡單，自訂樣式在某些電子郵件用戶端中無法正常顯示。 依靠基本的 HTML 表格、內聯樣式和佈局的對齊屬性。 需要時居中元素。
無論您的讀者使用什麼裝置打開收件匣，遵循這些實用步驟都將確保您的電子郵件內容顯示精美。 為您的訂閱者創建出色的響應式電子郵件設計體驗是值得付出努力的。
測試、測試、再測試
檢查它在行動裝置上的顯示方式
我們都知道大多數人使用行動裝置存取電子郵件。 因此，為了確保您的電子郵件適合行動設備，請透過在不同的手機上發送來測試您的電子郵件。 在 Android、iPhone 和平板電腦上查看它們。 檢查影像、按鈕和文字在縱向和橫向模式下的顯示方式。
在主要電子郵件用戶端上進行測試
並非所有電子郵件用戶端都以相同的方式顯示電子郵件。 測試 Gmail、Outlook、Yahoo Mail 以及訂閱者常用的任何其他主要電子郵件服務。 尋找有關圖像、嵌入連結、按鈕或其他互動元素顯示方式的任何問題。 編輯程式碼以修復任何顯示問題並確保客戶端之間的一致性。
檢查後備內容的顯示方式
對於在電子郵件用戶端中停用圖像的訂閱者，您的後備內容將取代圖像出現。 仔細檢查所有替代文字、圖像標題和圖像描述本身是否有意義，並為您的電子郵件內容提供上下文。 即使沒有圖像，後備內容仍應帶來良好的讀者體驗。
對電子郵件渲染服務的評論
使用免費的電子郵件渲染測試服務（例如 Litmus、Email on Acid 或 Mosaico）來查看您的電子郵件設計如何在各種電子郵件用戶端和裝置上同時渲染。 他們提供報告，突出顯示需要解決的任何問題，以提高電子郵件的回應能力。 更改您的程式碼並重新上傳測試電子郵件，直到報告乾淨為止。
仔細檢查連結和互動元素
電子郵件中的嵌入式連結、按鈕和任何其他互動式元件需要在所有平台上正常運作。 仔細檢查連結是否轉到預期目的地，以及所有按鈕或表單是否按預期運行。 在啟動行銷活動之前，對其進行多次測試，以確保不存在損壞的連結或不起作用的元素。
需要不斷的測試和調整來完善電子郵件的響應式設計。 但預先付出的努力將使電子郵件在所有訂閱者的裝置和電子郵件用戶端上具有廣泛的覆蓋範圍和高參與度。
解決常見的響應式電子郵件問題
行動端內容氾濫
- 使用單列佈局。 在電子郵件中，多列很少能很好地回應。
- 保持段落和章節簡短明了。 長文本塊在小螢幕上很難閱讀。
- 盡可能使用項目符號和編號清單。 它們比段落佔用更少的空間。
- 在小螢幕上隱藏次要內容。 您可以使用媒體查詢根據螢幕寬度顯示/隱藏內容。
電子郵件寬度問題
一些較舊的電子郵件用戶端在響應式電子郵件寬度方面存在問題。 要解決此問題：
- 設定電子郵件容器的最大寬度。 我們建議大多數電子郵件使用 600 像素。
- 在寬度聲明後新增 !important 以覆寫某些電子郵件用戶端 CSS。 例如：
- 新增 Outlook 2007-2013 的後備代碼。 這些舊版本需要單獨的樣式：
遵循這些故障排除提示將解決最常見的響應式電子郵件問題。 如果您還有其他問題，請告訴我！
結論
這些是確保您的電子郵件具有響應能力的一些簡單方法。 請記住，如今超過 50% 的電子郵件是透過行動裝置開啟的，因此針對較小的螢幕尺寸進行最佳化至關重要。 檢查所有電子郵件範本並對字體大小以及圖像大小和間距進行必要的更改。 您的收件人會很高興收到一封電子郵件，無論他們使用哪種設備，他們都可以閱讀並參與其中。