Question

如何撰写可在MS Outlook中正确呈现的html简报？我的HTML看起来很糟糕，但作为一个网页很好。我有html写的，它在chrome和IE中看起来不错，但在outlook中，样式很拙劣。我按照其他网站的指示使用了所有内联CSS。您需要特殊软件，还是有任何良好的培训资源可以提供帮助？简而言之，发送html电子邮件简报的最佳方式是什么？这是我的代码的一小部分，足以给你这个想法：

<!DOCTYPE html>

<head> 
   <charset="utf-8">
   <title>GPA Newsletter</title>    
 </head>

 <div style="padding: 0px; margin: 0px; background: gray; padding: 10px">               

    <div style="padding-bottom: 80px; background: linear-gradient(gray, white);"> 
        <h1 style="margin-top: 0;">Here is your September 2017 GPA Maintenance Newsletter</h1>          
        <img src="https://i.imgur.com/5xskeoF.jpg" alt="The newsletter logo" style="margin-top: 30px;   border-radius: 30px; border: 5px solid black; max-width: 100%; display: block; margin: auto;    width: 50%; argin-bottom: 40px;">
        <img src="https://i.imgur.com/uhdSAow.jpg" alt="The comcast logo" style="max-width: 100%;        display: inline; float: left; margin-left: 12%; margin-bottom: 20px;">
        <h2 style="text-align: right; padding-right: 15%; margin-bottom: 0;">September 2017</h2>            
    </div> 

 </div>

Answer 1

您使用所有内联样式是正确的。这是一个好的开始。

另外，根据我的经验，创建HTML简报的最佳方法是使用固定像素尺寸。 640pixels 宽是保证的最低公分母（因此它可以在任何计算机上的任何电子邮件客户端中使用）。我最近看到的更常见的宽度尺寸是 720px 。但我认为百分比（％）根本不起作用。电子邮件客户端在呈现HTML方面并不像浏览器那样复杂。

Code School有一个很好的小班，教授如何构建HTML电子邮件。 https://www.codeschool.com/courses/unmasking-html-emails

Answer 2

当我制作简报时，我尝试只使用大多数支持的方法，或者至少我记得并相信几乎所有客户都能使用的方法。然后有测试新闻通讯的工具，例如我们使用石蕊。不要使用div（使用表），许多客户端无法正确呈现它们。背景也没有足够的支持，...（背景颜色更好）。你必须在许多地方指定字体系列，....这只是你的代码的一部分是错误的。对此没有简单的答案，只需要一些有用的经验，或者尝试使用某些框架或模板。 https://foundation.zurb.com/emails/email-templates.html 此链接也可能对您有所帮助： https://www.campaignmonitor.com/css/

创建html电子邮件简报的最佳方式

2 个答案: