響應式電子郵件 101 網絡研討會問答：HTML 和 CSS 基礎

已發表: 2015-03-16

隨著移動端打開量的不斷增加（在過去四年中它們增加了 500% 以上！），移動電子郵件策略（如響應式設計）的討論也隨之增加。 在我們的響應式電子郵件 101：HTML 和 CSS 基礎網絡研討會中，我們了解了移動電子郵件領域、創建響應式電子郵件的基礎，以及為什麼這些技術對於改善訂閱者體驗至關重要。 我們還介紹了電子郵件客戶端支持，並演示瞭如何從頭開始編寫響應式電子郵件。

沒能成功嗎？ 別擔心。 我們記錄了整個過程！ 此外，我們甚至還提供了幻燈片。

獲取幻燈片 + 錄音 →

我們的網絡研討會座無虛席，所以雖然我們在問答部分嘗試回答盡可能多的問題，但我們無法全部回答。 下面，我們匯總了一些最常見的問題。

響應式設計入門

您認為移動開放的增長已經達到飽和，還是會繼續增加？

雖然我們在過去四年中看到移動端打開量出現了巨大的增長——超過 500%——但我們已經看到它的增長開始趨於平緩。 然而，我們認為隨著更多移動設備的普及，移動端開放將繼續緩慢上升。

流暢、自適應和響應式設計之間有什麼區別？

流體設計由沒有媒體查詢的相對寬度組成。 自適應設計由多個視口/斷點處的固定或相對寬度組成。 響應式設計由多個視口/斷點處的相對寬度組成。 以下是一些很好的資源，可幫助您更好地了解它們之間的差異：

  • 可擴展、流暢還是響應式？ 了解移動電子郵件方法
  • 固定 vs. 流體 vs. 自適應 vs. 響應
  • 哪種佈局？ 靜態的、流動的、自適應的還是響應式的？
  • Liquidapsive

哪種方法具有最好的電子郵件客戶端支持——流暢的、自適應的或響應式的？

從純粹的支持角度來看，流暢的電子郵件具有最好的支持。 自適應和響應式設計都需要使用支持有限的媒體查詢。

然而，這並不意味著流體設計是電子郵件的最佳方法。 流體設計是創建電子郵件的移動友好版本的一個很好的折衷方案，但其核心仍然是電子郵件的全寬設計。 這實際上取決於您的特定受眾，他們打開電子郵件的位置，以及您優化訂閱者體驗的設計策略。

什麼是媒體查詢？

媒體查詢 (@media) 是一個條件語句，它為一組特定的規則觸發一組 CSS。 您可以通過以下資源了解有關媒體查詢和電子郵件的更多信息：

  • 響應式電子郵件設計的操作指南
  • 了解 HTML 電子郵件中的媒體查詢

有沒有關於響應式設計對電子郵件的影響的數據？

你打賭！ 我們最近與 MailChimp 一起做了一份關於響應式設計和電子郵件測試對點擊的影響的報告。 我們發現響應式設計使移動用戶的點擊次數增加了 15%。

有了混合支持和這麼多變通方法，轉向響應式設計似乎勢不可擋。 我該如何開始？

由於當前電子郵件客戶端的支持如此有限，響應式電子郵件設計可能難以實現。 我們的第一個建議是在深入研究之前盡可能多地了解響應式電子郵件設計。我們建議查看 MailChimp、Campaign Monitor 和 Litmus 上的資源以幫助指導您。

如果您不習慣直接進入響應式電子郵件的實際開發，請考慮使用簡單的拖放式電子郵件編輯器來構建您的電子郵件。 StampReady、Canvas 和 MailChimp 等產品將為您免去電子郵件編碼的麻煩。

如果您願意深入研究代碼，請查看 Litmus Builder，這是一個專為電子郵件設計而構建的代碼編輯器。 首先嘗試實施基本的響應式電子郵件技術——這將為在支持響應式設計的客戶端（主要是 Apple 設備）中打開電子郵件的用戶提供出色的體驗。

另外，請務必在發送前預覽您的電子郵件！ 您可以使用 PutsMail 向自己發送電子郵件，或者使用 Litmus 在 40 多個不同的電子郵件客戶端中查看您的電子郵件的外觀。

如果您對響應式電子郵件設計有任何疑問或遇到編碼問題，請前往 Litmus 社區尋求幫助。

你推薦任何響應式框架嗎？

是的！ 我們建議查看 ZURB 的響應式框架 Ink（注意：此框架需要一種解決方法才能在 Outlook 2007-2013 中正確呈現）。 如果你喜歡 Sass，Faust Gertz 製作了 Ink 的 Sass 版本，Alex Ilhan 有一個名為 Zenith 的 Sass 電子郵件框架。 此外，來自 Code School 的 Dan Denney 有一個很棒的電子郵件工作流程，稱為 Emayll，Brian Graves 有一個驚人的響應式電子郵件模式集合。

針對不支持媒體查詢的客戶端進行優化

如果客戶端不支持響應式設計，那麼該客戶端會顯示什麼？

每個電子郵件客戶端都以不同的方式呈現電子郵件，尤其是在移動電子郵件應用程序方面。 本質上，如果他們不支持響應式設計，它將回退到全角電子郵件的某個版本。 有時它會是一個“縮小”的全角版本，有時它會是一個放大的“放大”版本，有時像 Gmail 這樣的客戶端可能會自動增加字體大小以製作“移動友好”版本的電子郵件。

最好的辦法是在發送之前始終預覽您的電子郵件。 您可以使用 PutsMail 向自己發送電子郵件，或者使用 Litmus 在 40 多個不同的電子郵件客戶端中查看您的電子郵件的外觀。

為不支持響應式設計的客戶（例如 Android 版 Gmail 應用程序）進行響應式設計的最佳方法是什麼？ 我們應該有什麼類型的“備份”？

我們建議首先讓您的電子郵件對移動設備友好。 這意味著擁有最少量的電子郵件內容並針對移動用例進行設計，例如更大的字體和按鈕大小。 開箱即用的單欄設計也讓您可以更輕鬆地為 Gmail 應用程序呈現電子郵件。

對於那些熟悉高級編碼技術的人來說，開發電子郵件並解決 Gmail 應用程序中缺乏響應式支持的最佳方法是“混合編碼方法”。 它本質上使用移動優先的方法，並使用一些特定於電子郵件的技巧將電子郵件縮放到桌面寬度。 您可以在此處閱讀有關如何實施混合編碼方法的更多信息：

  • 混合編碼方法
  • 混合編碼 Redux-提高標準
  • 響應式電子郵件設計中來之不易的經驗教訓

代碼問題

你能把你的媒體查詢放在一個單獨的 CSS 文檔中，並在頭部鏈接到那個文檔嗎？

由於電子郵件客戶端支持有限，不建議對電子郵件使用鏈接樣式表（<link> 標記）。 所有樣式都應嵌入到電子郵件的 <head> 中。

響應式電子郵件設計最常見的斷點是什麼？ 理想的斷點數是多少？

由於 iPhone 上的打開次數最多，因此您的電子郵件開始在最小 414 像素處設置斷點非常重要，這是新 iPhone 6 Plus 的寬度。

對於給定的設計，沒有“理想”的斷點數量——這一切都取決於您的個人設計和優化訂閱者的體驗。 最好至少考慮一個斷點以使您的電子郵件響應。

你推薦使用表格還是 div？

電子郵件設計絕對需要使用基於表格的佈局和結構。 其原因是電子郵件客戶端（如 Outlook 桌面客戶端）缺乏對 <div> 的支持，因為它與 HTML 的實際結構和基礎有關。 一些電子郵件客戶端確實支持 <div> 並且可以非常強大地用於某些黑客和解決方法，特別是對於響應式電子郵件。

您可以使用媒體查詢更改表中的 align="left" 或 align="right" 屬性嗎？ 或者，它只是為了改變風格？

從技術上講，您無法更改 CSS 中的 align HTML 屬性，但還有其他解決方法。 您可以將每個單獨的表格包裝在一個空的 <div> 中，並使用 float 屬性或 display 屬性來交換錶格。 ActionRocket 有一篇關於使用這種高級技術的很棒的博客文章。

使用響應式電子郵件，如何支持背景圖像？ 如果我希望它們是全角的，那麼保存背景圖像的理想尺寸是多少？

移動電子郵件客戶端非常支持背景圖像。 沒有用於保存背景圖像的“理想”尺寸。 您應該始終嘗試使用相對較小的文件大小，以便您的訂閱者可以快速下載您的電子郵件。 您可以使用 Litmus 中的圖像檢查功能來測試您的圖像下載速度。

樣式是否必須內聯才能讓它們與許多電子郵件客戶端一起使用？

是的。 一些電子郵件客戶端刪除了電子郵件 <head> 中的所有 CSS 樣式，尤其是 Gmail，這使得內聯 CSS 樣式成為電子郵件的必要條件。

在電子郵件中使用像素或 em 字體大小更好嗎？

最好使用像素來定義電子郵件中的字體大小，因為許多電子郵件客戶端不支持 em。

是否可以使用媒體查詢替換圖像？

可以使用媒體查詢替換背景圖像，但不能使用內聯圖像（ <img> 標籤）。

優化圖像以使其在視網膜顯示器上清晰呈現的最佳方法是什麼？

對於視網膜，您通常希望將圖像製作為最終顯示尺寸的兩倍。 例如，一張 100×100 的圖像實際上應該是 200×200，但使用 HTML 屬性或 CSS 樣式縮小到 100×100。 通常，這種技術應該只用於需要清晰的小圖像，而不是像照片這樣的大圖像。 Litmus 社區上有一些關於視網膜設計的精彩討論：

  • 為視網膜設計
  • 帶有文字號召性用語和視網膜顯示的圖像

是否顯示：無； 或顯示：塊； 在響應式電子郵件中工作？

這不是 display 屬性是否在響應式電子郵件中工作的問題，而是電子郵件客戶端是否支持它。 像大多數 CSS 一樣，它得到一些支持，而另一些則不支持。 最明顯的是 Gmail 不支持它。

是否有任何電子郵件客戶端相當於 Web 瀏覽器的“檢查元素”？ 對我的響應式設計進行故障排除會很有用。

沒有完全等同於 Web 瀏覽器的“檢查元素”。 但是，Litmus 中的交互式測試功能非常有用。 此外，Litmus Builder 具有一鍵式測試和重新測試功能，可以非常快速地迭代電子郵件。

否則，我們建議僅在 WebKit 瀏覽器（Chrome 或 Safari）中進行故障排除。 由於大多數移動打開發生在 WebKit 上，WebKit 具有強大的 CSS 支持，因此在 WebKit 瀏覽器中進行開發和故障排除是對這些電子郵件客戶端將發生的情況的一個很好的複制。

電子郵件客戶端是否普遍支持填充？

電子郵件客戶端幾乎普遍支持填充。 另一方面，保證金屬性沒有很大的支持。 我們強烈建議使用填充。

如何使用對齊方式正確堆疊三列？ 除了左右對齊之外，還應該使用居中對齊嗎？ 或者，您根本不建議使用三列佈局？

是的，您可以在響應式電子郵件設計中堆疊三列，儘管與兩列設計相比，堆疊和反轉它們的選項更有限或更難做到。 表格的對齊方式取決於您希望如何堆疊它們，但您通常會將所有三個表格都向左對齊。

ActionRocket 有一篇關於反向堆疊表的高級技術的好文章。

石蕊建造者

什麼是石蕊生成器？

Litmus Builder 是世界上第一個由電子郵件設計師為電子郵件設計師構建的代碼編輯器。 創建、編輯和共享電子郵件是完全免費的。

Emmet 是否直接內置於 Litmus Builder 中？

這是！ 我們的 Emmet 集成使速記編碼變得輕而易舉。

我們在哪裡可以找到 Litmus Builder 中的響應式電子郵件模板？

Litmus Builder 在模板部分有一個包含 20 多個電子郵件模板的庫。 所有模板都完全免費使用。 查看我們關於 Litmus Builder 的完整幫助文檔。

試用我們免費的、經過預先測試的響應式模板

響應式電子郵件可讓您針對越來越多的移動受眾微調您的設計。 使用 Litmus 社區上的大量免費、預先測試的模板簡化您的電子郵件設計過程。

介紹 Litmus 社區模板

使用 Litmus 預先測試的模板之一啟動您的下一個營銷活動。

訪問模板 →