如何创建HTML电子邮件模板？

Question

之前我发布了here关于如何让两个表响应的问题。首先他们回答我不应该使用<table>而不是<div>，但后来他们说我需要使用旧式<table>，因为它将是一个电子邮件模板。

毕竟我正在将标题转换为表格中的旧样式，因此它在浏览器中看起来相当不错，但在通过电子邮件发送之后它再次完全混乱（除了在我的手机上）。现在我正在使用旧样式，但它仍然不起作用。这可能是什么问题？

更新：

整整两天我试图用HTML创建自己的电子邮件模板。包含这个，我读了很多关于这个主题的帖子。我作为一个全栈开发人员所经历的是，电子邮件开发完全是一种不同的编程方式。如果您想用HTML创建自己的电子邮件模板，请先阅读this。

@Gwally和我建议的是使用Zurb Foundation这是一个响应式前端框架，它将帮助您以简单的方式创建电子邮件模板。准备好之后，您应该使用Litmus测试您的电子邮件模板。

简而言之;用HTML创建自己的电子邮件模板非常困难。这需要花费很多时间，毕竟你不知道电子邮件模板几乎适用于所有电子邮件客户端。我从Zurb Foundation开始，它的效果非常好;）

祝好运！

Answer 1

有很多地方可以找到现代HTML模板作为电子邮件项目的基础。 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 classes in email，您应该使用内联样式来维护电子邮件中的布局。

您可以查看本文，了解如何在电子邮件中获得响应式布局。 https://css-tricks.com/ideas-behind-responsive-emails/但你需要以不同于网页的方式处理它们。