标签：故事 创建 发送 HTML 模板 邮件 CSS 签名

邮件签名：一个故事

这不是一个典型的技术博客，而是发生在我身上的非常有趣的事件。

几天前我发生了一件有趣的事。我被要求为作为组织电子邮件签名的电子邮件创建一个模板。它将添加到通过我们的系统自动发送或由营销或销售团队手动发送的每封邮件中。

我认为工作太无聊了，我得到了一个 Figma 文件，并被要求用 HTML 和 CSS 重新创建它。

但是当我完成我的代码并尝试将直接从浏览器复制的 HTML 粘贴到电子邮件内部时，真正的问题出现了。因为这也是我被要求做的。当我从浏览器复制设计并将其粘贴到 Gmail 编辑器中时，风格变得疯狂。一切都搞砸了。这太烦人了。我尝试使用相同的模板发送虚拟电子邮件，但它不起作用。

我去找了一些同事，但没有人知道出了什么问题。然后我决定查看一些在线可用的模板以及它们是如何构建的。

所以，首先我看到这些模板中的所有内容都是图像。就像图像的一小部分一样，一切都被组合并创建了一个布局。我想我有一个想法，我也会这样做。

我让我的平面设计师向我发送每个部分的图像，然后我将这些图像放在我必须用 CSS 构建的布局中，然后我再次创建相同的东西，但这次没有文本或其他东西......但只有图片。

关闭...我打开邮件并粘贴 HTML 布局.. 没有任何效果。我筋疲力尽。我再次编写了整个 CSS，但似乎没有用。现在，我想是时候问问一些前辈了。不幸的是，我的经理在家工作。而且我没有耐心让他松懈并等待他的意见。虽然我知道这次谈话会持续很长时间......他说，“维杰，你必须弄清楚自己。”

那时我希望有人与我交谈，我知道解决方案一定很简单，但那是我糟糕的一天。我看到我的 CTO 就座在那里。我去找他，把问题告诉他。他对我笑了笑说，你有没有在某个地方托管这些图像？就像在驱动器上或需要的地方一样。我当然做到了。我说我把它们放在了 GitHub 上。
然后他让我看一下 CSS 部分，并告诉我在邮件模板的情况下我们应该正确，'内联 css'。
我绝望了。直到此时，我还在样式标签中编写 CSS，但它不起作用。我认为我需要一次谈话。但有时小谈话会给我们带来精彩的谈话，我们需要从他们的经验中学习。正是在这一刻，我想，'内联 CSS' 应该能救我。

然后我走到办公桌前，将我的整个 CSS 转换为内联 CSS。我得到了预期的输出，然后我从渲染的 HTML 中复制并将其粘贴到邮件上并正确粘贴，但是一旦我单击发送按钮并且当邮件处于发送状态时，模板布局就会不匹配，并且接收器会随机设计输出。正如我所说，那是我糟糕的一天。我去了营销团队..向他们解释了我们无法直接从浏览器复制 HTML 布局并将其放入邮件的问题。并且还要求他们使用一些邮件模板创建工具来创建邮件模板。

在花了更多时间在样式和 CSS 上并研究了更多关于模板的内容之后，我又看到了一件事。使用 HTML 和 CSS 创建的邮件模板与我们通常编写的代码不同。这不一样。它不支持现代 CSS。我很震惊。当我对它进行更多研究时，我知道，我们不能，我再说一遍，我们不能在创建邮件模板时使用 CSS flexbox。
我停下来喝了点水，然后我重新创建了整个模板，没有使用 flexbox 和内联 CSS。在 HTML 上渲染后，我复制了它，然后将其粘贴到邮件中，它就可以工作了。

我再次确认它是否有效。它正在工作。我也发送了一些电子邮件并从营销团队再次确认。它正在工作。邮件模板照原样复制，可以直接通过邮件发送。我们也可以将这些东西放在邮件签名中。

当我分析为什么会这样？为什么邮件模板不支持 flexbox 和大多数现代样式工具？这是因为，邮件不仅限于 Gmail，其他一些服务也使用邮件，如 Yahoo 或 Outlook。他们对样式的定义可能不同。因此，支持现代样式可能会与模板上方的正确邮件内容发生冲突，这也比您的页脚或签名更重要。

另一个原因是，邮件专门用于文本或消息形式，我们发送时尚样式的东西是矛盾的，这些样式可能会影响正确的邮件主题。

所以，我理解，关于使用 HTML 和 CSS 创建邮件模板和签名的一些事情就是这样。

1. 主要使用图像会帮助你解决头痛问题。注意这些图像存储在某个地方，比如驱动器或 GitHub
2. 始终使用内联 CSS。外部或内部写作都无济于事。
3. 不要使用现代 CSS，如 flexbox、web kit 或网格（我不确定网格）。
4. 尝试使用语义 HTML 并尝试仅使用 HTML 创建所有格式和布局，例如使用表格和 div。

这个故事的寓意是，每当您遇到任何问题时，与某人交谈是克服您以前的想法并提出新想法的关键。不管你在说什么，如果你向他们解释你的问题，他们可能不理解，但对你来说，这将是考虑同样问题的第二种方式。

谢谢你。

与我联系 推特 和 领英 更多精彩故事。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/10946/46270208

标签：故事,创建,发送,HTML,模板,邮件,CSS,签名
From： https://www.cnblogs.com/amboke/p/16648549.html