Question

我想知道如何使用HTML和CSS设计电子邮件模板，然后将其合并到电子邮件中。我希望像其他公司在发送确认电子邮件和新闻通讯时那样做。

Answer 1

无论您是希望手动编写电子邮件，还是使用预先存在的模板，在创建HTML电子邮件时都要记住一些规则：

在布局中使用表格
固定宽度定位（针对无响应的电子邮件）
像素单位
CSS的可能性（查看下面的CSS终极指南链接）
内联CSS
主播链接最佳实践
所有主要客户的测试
始终提供基于网络的视图
添加图片内容
避免使用垃圾邮件文件夹！
添加取消订阅选项

请查看这些网站，了解有关此主题的更多信息：

How to Code HTML Email Newsletters

9 Tricks to Design The Perfect HTML Newsletter

How To Code An Email Newsletter in 6 Simple Steps

The Ultimate Guide to CSS - 针对每个流行的移动，网络和桌面电子邮件客户端的CSS支持的完整细分

Answer 2

我在开始工作之前使用的一本非常有用的书是：

Modern HTML Email - Jason Rodriguez

关于为电子邮件编写HTML的书很少，所以这是我发现的唯一正确的书之一！

每当我开始发电子邮件时，我都会使用如下所示的起点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{-webkit-text-size-adjust:none;}
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>
</head>

<body style="padding:0px; margin:0PX;" bgcolor="">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor=""  style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="640" align="center" valign="top">

<!--Insert content here-->


</td>
</tr>
</table>
</body>
</html>

这包括一些修复，例如外部100％包装表，这意味着Yahoo!不会在Outlook.com中调整您的电子邮件和修复行高问题，其中Outlook.com的所有行高为131％。此处包含的宽度为640，这为电子邮件提供了固定的桌面宽度，通常为600-700px。

表应始终使用，表包含行和列（<tr>和<td>）。表可以嵌套在彼此之中：

<table width="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>

表中的每一行都需要具有相同的列数，否则行中的列将需要嵌套在表中。表也可以堆叠，因此在<td>内，您可以拥有多个垂直堆叠的表，而不需要行。文本或图片等内容的范围为<td>。

所有CSS样式都应该是内联的：

<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:14px; color:#fffffe; text-align:right; text-decoration:none; font-weight:normal;">Hello</td>

如何使用HTML和CSS为gmail制作电子邮件模板

2 个答案: