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

ari*_*per 2 html javascript css email html-email

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

dip*_*pas 5

无论您是喜欢手动编写电子邮件还是使用预先存在的模板,创建HTML电子邮件时都需要牢记一些规则:

  • 在布局中使用表格
  • 定宽定位(适用于无响应的电子邮件)
  • 像素单位
  • CSS的可能性(请查看下面的CSS终极指南链接)
  • 内联CSS
  • 锚链接最佳实践
  • 在所有主要客户中进行测试
  • 始终提供基于Web的视图
  • 添加图像内容
  • 避开垃圾邮件文件夹!
  • 添加退订选项

请查看这些网站,以获取有关此主题的更多信息:

如何编写HTML电子邮件通讯

设计完美HTML时事通讯的9个技巧

如何通过6个简单的步骤编写电子邮件通讯

CSS终极指南 -对每个流行的移动,Web和桌面电子邮件客户端的CSS支持的完整分类


小智 5

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

现代 HTML 电子邮件 - 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>
Run Code Online (Sandbox Code Playgroud)

这包括一些修复,例如外部的 100% 包装表,这意味着 Yahoo! 不会左对齐您的电子邮件并修复 Outlook.com 中的行高问题,其中 Outlook.com 将所有行高设为 131%。此处包含的宽度为 640,这使电子邮件具有固定的桌面宽度,通常为 600-700 像素。

应始终使用表格,表格包含行和列(<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>
Run Code Online (Sandbox Code Playgroud)

表中的每一行都需要具有相同的列数,否则行中的列需要嵌套在表中。表格也可以堆叠,因此在一个 中<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>
Run Code Online (Sandbox Code Playgroud)