如何创建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/，但是您需要采用不同于网页的方法。