如何創建HTML電子郵件以在所有電子郵件客戶端中工作？

Question

我知道這是一個模糊的問題，但我會很感激任何指導。我的客戶有一個電子郵件用戶列表，他發送HTML電子郵件。問題在於，當被不同的電子郵件客戶端查看時，電子郵件看起來並不一致。例如，一封電子郵件在Gmail中看起來不錯，但在Outlook或AOL中可怕。

是否有一個適合此問題的解決方案？也就是說，是否有一個特定的CSS規則可以使用，等等？謝謝你的幫助。

Answer 1

粗略我可以列出幾個做的和不要的可以幫助你

1. 始終使用而不是DIV嵌套表來創建HTML
2. 不要忘了與HTML一起添加純文本部分，所以在「以HTML格式查看」設置爲「否」時郵件不會被修剪。
3. 始終使用內聯CSS

4. 優化您的圖像，使它們不超過72ppi。

5. 千萬不要使用背景圖片。

6. 切勿使用外部鏈接的CSS。
7. 不要爲整個郵件使用單個圖像
8. 在爲電子郵件編寫HTML時，請考慮它與網頁的不同。是的，它們確實不同，因爲Web瀏覽器能夠提供比電子郵件客戶端更好的HTML。

Answer 2

本質上，HTML電子郵件在每個電子郵件客戶端中看起來都不完全相同，因爲CSS和媒體查詢支持因客戶端而異。但是，您可以採取一些步驟，以使它們看起來相當一致並優雅地降級。

我想從這裏開始：https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919這是一篇關於構建流體電子郵件模板的好文章，您可以使用它作爲創建其他電子郵件的基礎。它還包括電子郵件的the source code。

一旦您的郵件編碼完成，您可以使用Litmus這樣的服務檢查它，看看它在許多客戶端/設備上的樣子。石蕊對於解決電子郵件問題也很好。

最後查看Campaign Monitor的HTML電子郵件的CSS支持列表：https://www.campaignmonitor.com/css/這是全球十大最受歡迎的移動，Web和桌面電子郵件客戶端對CSS支持的完整分類。

至於Outlook，它確實是一個痛苦，但一定要利用Outlook條件標籤專門針對Outlook。查看this thread中的第一個答案，瞭解條件標籤的完整概要。獎金提示：如果您在Outlook coditional標籤中添加樣式，請務必使用！重要，前面有一個空格。