需要帮助为传出电子邮件创建 HTML 代码，使其在各种 Mac / PC 和移动 IOS / Android 电子邮件客户端上按预期工作

问题描述 投票：0回答：1

我很好奇是否有人对如何创建电子邮件安全/友好的传出 HTML 有任何建议？

我知道发送 HTML 电子邮件有多种规范，并且在客户端收到时正文具有出色的准确性。

我尝试发送各种传出 HTML 电子邮件测试，但是接收客户端正文并不总是按预期准确显示。

一些似乎有问题的问题是，各种电子邮件客户端，无论是移动优先 - PC、Mac 还是 Linux 等。似乎以不同的方式显示正文 - 并且标头标签 - 媒体查询和对齐不是我想要的。

  • 有人说，例如，Gmail 可能无法正确反映媒体查询和/或样式等标头标签是否正常工作 - 并且 Gmail 更喜欢内联样式......？

问：有什么办法可以最大限度地减少这些问题，以便外发 HTML 电子邮件的正文在很大程度上反映我最初的选择吗？

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- other code here -->
<style>@media only screen and (max-width:480px) {
.button_content-cell {
padding-top: 10px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important;
}
.button_border-row .button_content-cell {
padding-top: 10px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important;
}
}
</style>
<!-- other code here -->
</head>
<body>
<!-- other code here -->
</body>
</html>
html css html-email
1个回答
0
投票

作为前端开发人员，交付与所有邮件客户端中提供的设计完全相同的 HTML 电子邮件是我们臭名昭著的任务之一：D。我不得不在这里写一个答案，因为我最近的任务是优化我们团队用来编译 HTML 电子邮件的 React 组件库，以完全支持 Outlook 2016。这很有趣！

确实，每个邮件客户端在呈现 HTML 的方式上都会有微小（或巨大！）的差异。例如，Apple Mail 和 Gmail 对 HTML 和 CSS 规范有相当广泛的支持，因此 HTML 在浏览器和这些邮件客户端中的呈现方式之间存在相当大的一致性。

另一方面，Outlook 使用 Word 渲染引擎来渲染 HTML，因此，它采用一种非常不同的方法来获得与其他邮件客户端相同的外观（这也是为什么它是每个电子邮件设计者的噩梦）。

我通常建议对电子邮件中的几乎每个组件坚持使用 HTML 表格和内联 CSS — 它们受支持并在大多数邮件客户端上提供一致的呈现。

我发现一个有用的工具是“我可以发送电子邮件吗”，它可以检查我们的目标邮件客户端是否支持我将要引入代码的内容。例如，如果您的代码中有使用圆角的元素，您会发现 Windows Outlook 客户端不支持 border-radius 属性：


在我确保每个目标邮件客户端都支持我的源代码，或者它具有特定邮件客户端（例如 Outlook）的后备代码之后，在将我的 .html 文件发送给下一个团队之前，我理想地想知道 HTML 如何我自己在每个目标邮件客户端中呈现。


有多种工具可以实现此目的，我没有使用所有这些工具，但是 
SendGrid
 对我来说非常有用。通过在电子邮件 API 中创建动态模板，您可以粘贴 HTML 代码并在各种邮件客户端上运行测试渲染（这只是其中的一部分）：


例如，您可以选择 Apple Mail 和 Outlook 2016 客户端，并为这些客户端生成渲染：



一旦我可以验证我编译的 HTML 代码与各处请求的设计相匹配，我就可以安全地发送文件进行交付。




增强创建和设计交叉兼容 HTML 电子邮件工作流程的一个小技巧是使用像 Astro 这样的框架，您可以在其中编写可重用的组件 - 这使事情变得特别容易，因为您可以将每个组件的代码隔离到单独的文件中，并致力于使特定组件交叉兼容。


然后，您可以创建一个新页面作为您的电子邮件模板，只需按原样导入每个组件，而不必担心在已经针对其优化的不同邮件客户端中正确显示它。将您的项目构建为静态 .html 并完成！


您可能还会发现这些文章对于解决 Outlook 的常见问题特别有用：




    Outlook HTML 电子邮件：如何修复 11 个常见渲染问题
  • 

    • 在 Outlook 中向容器添加圆角 |内容.ai
  • 

    
    • 


      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.