【问题标题】:how to make html email look exactly the same as previewed just in browser?如何使 html 电子邮件看起来与仅在浏览器中预览完全相同?
【发布时间】:2012-11-29 17:32:52
【问题描述】:

我正在处理一个 HTML 电子邮件模板,我注意到我在浏览器中获得的预览与我在电子邮件收件箱中获得的预览略有不同。就像有时您可能会在浏览器中让两个表格相互对齐,但在您收到的电子邮件中,它们可能不再对齐并且存在一些小的差异。

所以我只想知道是否有可能使在浏览器中预览的 html 电子邮件与您在收件箱中得到的完全一样。我知道这肯定与每个单独的电子邮件服务提供商有关,它们有自己的默认 css 或类似电子邮件的东西,还有您正在使用的浏览器和操作系统。但是,是否有可能确保至少在一种电子邮件服务(例如 gmail)中,无论您使用什么浏览器或操作系统,每次预览的内容都是您在收件箱中收到的内容?有多难?

【问题讨论】:

    标签: html css email


    【解决方案1】:

    我见过强大的 MailChimp 模板,它们基本上只是 1998 年风格的文档,其中充满了表格元素。标记很丑陋,但它们有效。只需握住鼻子并使用桌子。至少对于电子邮件来说,编写语义上有意义的标记没有那么大的压力。

    【讨论】:

      【解决方案2】:

      简要回答您的问题:

      不,我认为不可能在浏览器中预览 HTML 电子邮件并让它显示为好像它正在特定的电子邮件客户端(例如 Microsoft Outlook 或 Gmail)中呈现。虽然这不是一个解决方案,但我能想到的最类似的功能是use the User Agent of another web browser within Google Chrome's developer tools

      更新(2013 年 5 月 31 日):以下内容也可作为处理 HTML 电子邮件的有用指南。

      1. http://rodriguezcommaj.com/blog/The-Little-Guide-To-HTML-Email

      2. http://rodriguezcommaj.com/modern-html-email

      包含上下文和有用资源的更详细答案:

      这是一个非常具有挑战性且经常令人沮丧的问题。它在很大程度上类似于 Web 开发人员不断处理的跨浏览器兼容性问题。但是,有一些主要区别:

      • 虽然主流浏览器刚刚超过 5 个,但流行的电子邮件客户端却超过 20 个。

      • 此外,W3C 还极大地帮助浏览器实现了自身的标准化。这个过程一直很缓慢,但比迄今为止在电子邮件客户端中看到的任何标准化都快得多。

      例如,this article 讨论了 2007 年电子邮件客户端标准化的重大挫折,该挫折至今仍影响着我们。它也简洁地总结了这个问题:

      “当 IE 团队使用新的、更兼容的 Internet Explorer 7 来抚慰各地 Web 开发人员的痛苦时,Office 团队推出了一个快速的解决方案,淘汰了 Outlook 一直用于电子邮件的基于 IE 的渲染引擎,并将其替换为……请用……Microsoft Word”。

      上述文章还提到了微软提供的一个工具:2007 Office System Tool: Outlook HTML and CSS Validator。 Microsoft 还提供了以下文档,以帮助设计人员和开发人员完成支持 Outlook 较差的标准支持的任务:

      Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 Part 1
      Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 Part 2.

      除了将您的测试 HTML 电子邮件发送到您自己的电子邮件客户端(基于 Web 或桌面)之外,测试几乎所有流行电子邮件客户端的最佳方法是使用以下电子邮件服务之一。每个都提供在大约 20 个左右的电子邮件客户端中预览电子邮件模板的能力。它们没有特定的顺序,它们是:

      GetResponse
      Litmus
      Mail Chimp
      Campaign Monitor
      Email on Acid

      如果您正在寻找免费选项,Premailer 可以通过简单地去除标签来提供预览,因为大多数电子邮件客户端的 CSS 支持有限。例如,据我所知,Gmail 完全去除了内联和外部引用的 CSS。

      此外,如果您想知道哪些客户的市场份额最大,这里有两个快速估计:

      Litmus Email Client Stats
      Campaign Monitor Email Client Stats

      祝你好运,我希望这会有所帮助!

      【讨论】:

      • 非常感谢您的回答。很有帮助!
      猜你喜欢
      • 2013-11-11
      • 2017-10-04
      • 2011-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-08
      • 2014-12-11
      相关资源
      最近更新 更多