如何設計一個跨客戶端/瀏覽器兼容的電子郵件？

設計電子郵件的正確方法是什麼？合理預期它將在Outlook 2003,2007和Webmail客戶端中正確顯示？我訂閱了各種電子郵件新郵件，並查看了它們的源代碼，並看到其中一些郵件包含2000行HTML & CSS以及我以前從未見過的IF語句（我假定與確定Outlook版本有關）。如何設計一個跨客戶端/瀏覽器兼容的電子郵件？

是否有免費或商業的工具可用於創建標記？有沒有關於如何應用我見過的這些龐大樣式表的標準模式？

來源

2009-10-07 Chris Marisic

使用純文本 - 兼容一切。 :-) – 2009-10-07 13:40:05

儘管我喜歡你的回答，但我們的業務喜歡漂亮而漂亮的電子郵件！ – 2009-10-07 14:02:10

Telerik鏈接到這個網頁從這裏：http://www.telerik.com/support/kb/reporting/export-reports/details/send-telerik-report-in-an-e-mail – xinthose 2016-12-16 14:11:18

我會建議一個預處理基礎的框架一樣Foundation for Emails。

來源

2016-06-03 11:05:00 Zeemee

我現在接受這個答案作爲答案這是2016年，我的原始問題是一個工具來創建電子郵件友好標記。這實際上是一種工具，不像以前只是指導的答案。 – 2016-06-03 16:50:46

由於微軟採用新版本的Outlook的Word HTML引擎，設計電子郵件是一場噩夢。有沒有工具，我知道的，但本指南會給你試圖破譯客戶端時伸出援助之手支持CSS版本：

Guide to CSS support in email clients

來源

2009-10-07 13:28:34

看着那個清單，這是看到有多少X出現的惡夢。 – 2009-10-07 14:00:34

是的，這非常非常令人沮喪，特別是在過去幾年中，網頁瀏覽器的標準和兼容性已經到來時。你不會相信多少罵髒話的HTML電子郵件設計會讓我失望...... – 2009-10-07 14:12:33

我正要瘋了，那個鏈接給我節省了很多麻煩！ – RnD 2014-01-30 13:42:49

保持寬度很窄（〜600px的在猜測）。
使用表格而不是CSS div。
確保它在IE6中正常工作！

來源

2009-10-07 13:29:34 DisgruntledGoat

這是我的出發點，即使這並不可靠，即使是一個固定寬度的簡單單列表格也會在表格單元格無法超出寬度的情況下展開。 – 2009-10-07 13:56:38

由於三個原因，HTML無法在電子郵件中成功實施。

1）HTML被設計爲僅適用於HTTP協議（網絡）而不適用於SMTP協議（電子郵件）。這很明顯，因爲HTML文檔的頭部根據HTTP傳輸提供與文檔處理相關的數據。由於HTML提供不符合SMTP協議提供的條件，因此它在兼容性方面表現出色。到目前爲止，還沒有任何標準來描述電子郵件中的內容格式。

2）HTML不是演示文稿語言。 HTML旨在爲內容提供結構化元數據，絕不會用於演示。 HTML僅用於電子郵件中，因此經常被濫用和使用，完全違反了標準。

3）電子郵件中的單個文檔可以有多個作者，每個作者都有獨立的標題信息。這樣的文件被稱爲電子郵件線程。 HTML沒有這樣的約定。當在電子郵件中提供HTML時，對於接收它的初始用戶可能看起來很好，但當回覆或轉發時，它看起來像廢話並且無法完成其工作，這可能不會做任何事情。據我所知，郵件標記語言是唯一的標記語言，包含功能來解決和服務多個作者對單個標記語言文檔的貢獻而不會發生衝突，這是爲了準確支持電子郵件線索所必需的。

這三個原因是爲什麼HTML與電子郵件完全不兼容並且無法成功。

來源

2009-10-10 15:44:08

要在所有客戶端上運行電子郵件是非常困難的，因爲他們在網頁瀏覽器中使用不同的呈現引擎，而這些引擎可能會進行設計開發。嘗試使用LitmusApp的電子郵件測試服務，該服務將爲您提供關於您的電子郵件如何顯示在不同電子郵件客戶端中的截圖。

來源

2010-01-19 18:08:49 Browsera

Oy。這樣可怕的答案。

請參閱？當每個人決定使用表而不是css是某種禁忌時會發生這種情況。每個人都在限制自己的CSS傲慢和精英主義。當所有人都是錘子時，一切看起來都像釘子。難以置信的。

One poster寫道：「這是我的出發點，即使是一個固定寬度的簡單單列表格也會讓表格單元格無限制地擴展到表格寬度以外的地方。

固定寬度是什麼讓你陷入困境。 600像素的固定寬度表顯然將比400像素的電子郵件查看窗口/區域更寬。它不是擴大更寬，它IS更寬。 [sheesh]

無法預測收件人的電子郵件查看窗口/區域的寬度。因此，創建一個表，但將其寬度設置爲100％，而不是一定數量的像素。並將其高度設置爲「自動」。使其填充很好，寬... 7至10像素，最低。

然後只需像往常一樣執行該表中的所有操作，但要堅持使用vanilla HTML4，避免使用XHTML，DHTML，XML，Java，JavaScript等等。只需HTML4。沒有CSS，無論是。只是HTML4。期。

將Web服務器上的圖像使用普通的http：// URL鏈接到某個地方，然後使用普通的img標籤鏈接到它們，放置整個圖像的URL（包括http：///部分）在引號之間，如在...

SRC = 「http://www.website_url.com/filename.jpg」（或.gif或任何）

...，避免使用「替代」功能或任何幻想。

如果你想嚴格控制字體大小，那麼不要猶豫，使用「span」標籤，因爲它幾乎可以在每個電子郵件客戶端中使用......只是不太喜歡它。

也不要讓你的圖像太大...特別是，不要讓任何「標題」或頂部圖像太寬。如果圖形保持600像素寬，並且收件人的電子郵件查看器寬度爲400像素，將表格寬度設置爲自動不會有多大幫助。使用可以很好地嵌套在電子郵件信息的最左上角的圖形;並使用相當小的照片和其他圖形。

做到這一切，你會發現電子郵件在幾乎每個電子郵件客戶端都會看起來相同。通過仔細檢查...

http://litmusapp.com/email-previews

...作爲另一個海報，在這裏，建議。

希望有所幫助。

來源

2010-07-04 07:13:47

所以基本上你的反應是設計一個完全流暢但基於表格的電子郵件設計模板，而不真正使用css？至少當我自己說一個固定寬度的單一列將超過它的寬度時，我相當懷疑，並且與視口無關，因爲表是WIDER而不是整個寬度。 – 2010-07-06 13:42:33

「..並避免使用」alt「功能或任何花哨。」 - 我會說，因爲用戶幾乎總是需要選擇查看電子郵件中的圖像，並且圖像可能不會出現，直到他們已經這樣做，那麼alt標籤是至關重要的 – JohnnyFaldo 2013-04-26 14:23:23

創建合理的跨客戶端兼容電子郵件絕對有一些最佳實踐。

要記住最重要的概念2：

僅使用內聯CSS。這將爲您節省許多麻煩，因爲Gmail和其他許多電子郵件客戶端都窒息了<風格>標記中的CSS。
正如很多人所說，表格是決定元素大小（而不是CSS）的方法。

其實我只是寫了後對這個話題的一些最佳實踐，如果你有興趣：

http://www.versapay.com/developer-blog/the-art-and-science-of-email-rendering-across-email-clients/

來源

2011-03-31 22:36:41

如何設計一個跨客戶端/瀏覽器兼容的電子郵件？

回答

相關問題