如何为使用HTML和CSS的Gmail创建电子邮件模板

问题描述：

我想知道如何使用HTML和CSS设计电子邮件模板，然后将其合并到电子邮件中。我想要像其他公司一样发送确认电子邮件和简讯。如何为使用HTML和CSS的Gmail创建电子邮件模板

这很可能是在[webapps.se] – 2014-10-03 22:57:42

大多数已知mailchimp.com更适合 – 2014-10-03 22:58:33

答

无论您喜欢手工代码的电子邮件，或者使用预先存在的模板，也有一些规则要记住在创建HTML电子邮件：

在布局
固定宽度的定位（非响应电子邮件）
像素单元
与CSS（查看终极指南下面CSS链接）
内联CSS
锚链接最佳实践
测试中的所有主要客户
总是提供基于Web的浏览
添加图像内容
避免垃圾邮件文件夹！
添加取消订阅选项

看看这些网站对这个问题的详细信息：

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 - 一个完整的为e支持的CSS支持细分非常流行的手机，Web和桌面电子邮件客户端

答

，我曾经在我开始工作是一个非常有用的书：

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％的包裹台，这意味着雅虎不会将您的电子邮件与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创建电子邮件模板

相关推荐