html電子郵件的最佳實踐

Question

過去，我們在使用html電子郵件佈局方面遇到了問題，並且在某些情況下避免了標準的HTML和CSS實踐，並使用舊的設計方法（如表格定位和圖像）。

如果您在網上搜索「電子郵件最佳實踐」，您仍然有很多當前的建議說使用表格，只使用內聯樣式而不使用嵌入或外部樣式表。 Gmail和Outlook等郵件客戶端經常被列爲現代佈局方面的問題。例如，MailChimp仍建議使用舊方法。

但是，在使用Gmail和Outlook等客戶端進行一系列測試時，我發現即使使用div定位和嵌入樣式表，現在也可以正確處理html呈現。

是否有更準確和最新的文檔可以安全地使用當前的實踐？

Answer 1

石蕊有寫一些關於它的文章。從頭開始編寫一些HTML電子郵件模板後，這裏是我的一些技巧：

• 使用內聯CSS
• 使用表，而不是浮動的div在表
• 鳥巢表（從一個代碼點可怕，但它是去舊客戶端）
• 除非你有備用的風格，不要使用CSS3的方式。
• 使用基本字體
• 響應速度永遠不會是理想的，是幸福的東西，作品不夠好
• 做一個基本的模板，並用石蕊測試在不同的客戶端。
• 儘可能使用HTML屬性（寬度，高度）
• 我說過使用表嗎？

電子郵件客戶端不斷更新，因此很難獲得不斷更新的最佳實踐文檔。瞭解你的公衆和優化他們使用什麼似乎是一個不錯的方法（不優化Outlook 98中，如果你沒有用戶就可以了）。

Answer 2

最有可能的，這應該是一個評論。事實上，我是以評論開始的，但顯然不適合。所以，只是要說清楚，這不是試圖回答你的問題。我知道你正在努力完成一項特定的任務，而這個「非答案」無法幫助你完成它。

相反，我想確保你明白爲什麼當前的限制是強制執行的，他們的目的是什麼。另外，他們爲什麼不可能改變。有兩個重要方面需要考慮：

1. 電子郵件消息始終保持爲文本消息。在很多情況下，它不是呈現它的瀏覽器。

2. 發件人是不應該有在多個控制（比方說大部分）文本和接收器的與文本交互能力的顯示屬性，如：

   • 隱藏鏈接能力或其他文字中的元素
   • 設置自定義路線的能力（它們保留用於引用信息，回覆信息的哪些部分是新的與重複的內容
   • 一般來說，欺騙或使某物顯示爲別的東西的能力，
   • 禁用或影響與消息的交互是毫無疑問的，所以是javascript

如果你仔細想想，大多數人更喜歡他們的電子郵件是文字，真的。該電子郵件應該是私人的，私人的。將其視爲更長的短信或聊天消息。

你想讓我看起來很酷嗎？說服我在瀏覽器中看到它。不要在我的電子郵件中推送網頁，或者該電子郵件可能以垃圾形式出現。爲什麼？因爲你不會有禮貌地停止推動我的臉上不重要的東西，並試圖干擾我閱讀我想要從你的信息中讀取的內容的能力。

不要強迫我接受瀏覽器級別的侵略性內部應該是...簡單的文本。並且處理這個事實，爲了保持對我的電子郵件的控制權，大多數時候我會選擇文本查看模式。

Answer 3

過去8年來一直在做電子郵件，而且每個月都會有一次新的呈現問題來調整我們的代碼。以下是關於我通常用電子郵件進行的一些提示以及允許根據屏幕大小進行列堆疊的編碼方法。

一些電子郵件提示：

• 總是內聯CSS。我不信任在線CSS網站，只是今天早上我看到一個將兩列轉換爲單列的網站。
• 表是你最好的朋友
• 您可以使用Web字體，但支持的客戶端是only a few
• 要打破錶列成行使用頁眉（次），而不是表數據（TD）。那就是如果你不使用混合編碼方法。
• 圖像寬度爲HTML元素（如此Outlook工作）和寬度：100％，最大寬度和高度，因此它作爲一個響應式圖像和屏幕縮放。

沒有完整的最佳實踐列表，但這裏有一個來自the monks，我認爲這很好，但不是完整的列表。

有一種編碼方法稱爲hyrbid/spongy。這使用Outlook條件代碼，div和表。這是我始終使用的編碼方法，以確保我的代碼適用於所有電子郵件客戶端。混合/海綿電子郵件編碼

擊穿：

• Div的用於在非Outlook客戶端在div內部
• 表是用於構造該列中的內容和
• 列使用Outlook條件語句以便我們在Outlook中看到一個好的結構。