创建html电子邮件时事通讯的最佳方式

问题描述：

如何撰写在MS Outlook中正确呈现的html时事通讯？我的html看起来不好，但作为一个网页很好。我已经写了html，并且它在Chrome和IE中看起来不错，但是在外观上，这个样式是拙劣的。我按照其他网站的指示使用了所有内联CSS。你需要特殊的软件，还是有任何好的培训资源可以帮助你？简而言之，发送html电子邮件通讯的最佳方式是什么？这里是我的一小段代码，足以给你的想法：创建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>

答

你是对使用所有内嵌样式。这是一个好的开始。

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

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

答

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

谢谢两位非常多，这给了我一些伟大的线索去！ – sunspore

创建html电子邮件时事通讯的最佳方式

相关推荐