如何創建HTML電子郵件模板？

Question

之前我在這里發布了一個有關如何使兩個表響應的問題。 首先，他們回答說我不應該使用<table>而不是<div> ，但是后來他們說我需要使用舊樣式<table> ，因為它將是一個電子郵件模板。

畢竟，我將表頭轉換為表格中的舊樣式，結果在瀏覽器中看起來還不錯，但是通過電子郵件發送后，頭又被完全弄亂了（手機上除外）。 現在我正在使用舊樣式，但仍然無法正常工作。 這可能是什么問題？

更新：

我整整兩天試圖用HTML創建自己的電子郵件模板。 包括這一篇，我已經閱讀了許多有關該主題的文章。 作為一個全棧開發人員，我所經歷的是電子郵件開發完全是一種不同的編程方式。 如果要使用HTML創建自己的電子郵件模板，請先閱讀此內容 。

我建議@Gwally使用Zurb Foundation ，它是一個響應迅速的前端框架，它將幫助您以簡單的方式創建電子郵件模板。 准備就緒后，您應該使用Litmus測試您的電子郵件模板。

簡而言之; 用HTML創建自己的電子郵件模板非常困難。 這會花費很多時間，而且畢竟您不知道電子郵件模板幾乎可以用於所有電子郵件客戶端。 我從Zurb Foundation開始，它運作良好；）

祝好運！

Answer 1

有很多地方可以找到現代HTML模板用作您的Email項目的基礎。 在Stack Overflow上有很多建議可以幫助人們進行項目。 重要的是要記住，電子郵件開發不是Web開發。 兩者基於HTML，但是它們以不同的形式使用。 以下是一些可以幫助您的方法。

什么有效

Campaign Monitor對於如何與電子郵件客戶端一起使用電子郵件提供了很好的指導。

• https://www.campaignmonitor.com/css/

工作現代模板

最好的學習方法是查看他人所做的事情，並根據自己的需要進行模仿。 我是Zurb Foundation的個人粉絲。 我曾經一次性使用1.0版，發現2.0版對於解決某些來自電子郵件開發的問題（例如模板一致性）非常有用。

• https://foundation.zurb.com/emails.html
• https://litmus.com/community/templates
• https://www.campaignmonitor.com/email-templates/

提出問題並閱讀答案

電子郵件開發的最佳資源之一是Stack Overflow中的當前位置。 有一些專門的專家幫助社區提供了非常好的問題解答。

祝好運。

Answer 2

基於電子郵件中的CSS類 ，您應該使用內聯樣式來維護電子郵件中的布局。

您可以查看本文，以獲取有關如何在電子郵件中獲得響應式布局的一些建議。 https://css-tricks.com/ideas-behind-sensitive-emails/，但是您需要采用不同於網頁的方法。