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

Question

3

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

最终，我将标题转换为旧式表格，结果在浏览器中看起来非常好，但发送到电子邮件后又完全乱了（除了我的手机）。现在我仍然在使用旧样式，但仍然无法正常工作。问题可能出在哪里？

更新：

我尝试了两天时间创建自己的HTML电子邮件模板。包括这一个，我已经阅读了很多关于这个主题的帖子。作为一个全栈开发人员，我所经历的是电子邮件开发是完全不同的编程方式。如果你想在HTML中创建自己的电子邮件模板，请先阅读这篇文章。

“@Gwally和我建议使用响应式前端框架Zurb Foundation来帮助您轻松创建电子邮件模板。当准备好后，您应该使用Litmus测试您的电子邮件模板。

简而言之，在HTML中创建自己的电子邮件模板相当困难。它需要很多时间，最终您也不知道电子邮件模板是否适用于几乎所有电子邮件客户端。我从Zurb Foundation开始重新创建，效果还不错 :)

祝你好运！

”

- Jamie

除了我的手机，大多数人都不会在手机上阅读电子邮件；-)每个手机或电子邮件客户端都认为自己可以更好地呈现电子邮件。这就是为什么您需要努力使结果在任何地方都能正常工作。litmus.com是一个可以帮助您测试各种客户端的工具。您可能还想阅读这篇文章：测试HTML电子邮件呈现。 - caramba

2个回答

1

根据电子邮件中的CSS类，您应该使用内联样式来维护电子邮件中的布局。

您可以查看此文章以获取有关如何在电子邮件中获得响应式布局的建议。https://css-tricks.com/ideas-behind-responsive-emails/但是，您需要以不同的方式处理它们，与网页不同。

- JasonB

谢谢您的快速回复，但是响应式CSS @media怎么办？ - Jamie

@caramba，你上面的评论说要在另一个工具上测试你的代码并自己解决问题。我的回答是，这就是你应该做的，以使你的代码正常运行。 - JasonB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gwally · Accepted Answer

有很多地方可以找到现代HTML模板，作为电子邮件项目的基础。Stack Overflow上有很多关于如何帮助人们完成他们项目的建议。需要记住的是，电子邮件开发并不等同于Web开发。两者都使用HTML，但它们以不同的形式使用。以下是一些可以帮助您入门的内容。

有效方法

Campaign Monitor有一份优秀的指南，介绍了电子邮件客户端中的有效方法。

使用现代模板

学习的最佳方式是查看他人的工作并模仿其方法以满足自己的需求。我个人喜欢Zurb Foundation。我曾经使用过版本1.0，发现2.0对于解决电子邮件开发中出现的一些问题非常有价值，例如模板一致性。

提问和阅读答案

对于电子邮件开发而言，最好的资源之一就是您现在所在的Stack Overflow。有一些专业的专家为社区提供了非常好的解决方案。

祝您好运。