编写HTML电子邮件时的最佳做法和注意事项

我已经开发了十多年的网站,但很快就发现,我开发网络的许多习惯在为电子邮件客户端开发时没有任何用处。 这给我带来了巨大的挫折感,所以我想我会问一个问题,希望能为像我这样可能会不时地为gmail,outlook等设计的其他人提供最佳实践和必要的考虑。

例如: <style>...</style> vs inline CSS。

简而言之:从网络世界转移到电子邮件世界的是什么,什么不是。

这似乎是一个很好的地方列出一些试图学习HTML电子邮件的人资源。 这(可能)是您可以在网上找到的最全面的HTML电子邮件资源列表。 快乐的学习。

入门指南:

  • 活动监视器
  • Mailchimp
  • Sitepoint
  • 在线访问客户
  • TUTS +

CSS支持和一般指南:

  • 广告系列监视器| CSS支持指南
  • HTML电子邮件Boilerplate
  • 石蕊| 电子邮件客户常见问题
  • 广告系列监视器| 它会起作用吗?
  • Mailchimp | 电子邮件营销领域指南

你应该总是将你的CSS内联在html-email中。 这里是一个CSS内联工具列表

响应式指南:

  • 广告系列监视器| 响应支持指南
  • 风格运动| 响应支持指南
  • 石蕊| 响应方式信息图
  • 石蕊| 响应式和移动资源大名单

模板和框架:

  • Ted Goas | Cerberus响应电子邮件模式
  • 电子邮件酸| 响应模板
  • 布赖恩·格雷夫斯| 响应电子邮件模式
  • Antwort | 响应式布局
  • Zurb | 墨水响应模板
  • 广告系列监视器| 免费电子邮件模板
  • Mailchimp | 电子邮件蓝图

响应替代示例:

  • Tuts + | 响应电子邮件没有媒体查询
  • 堆栈溢出| 流体示例
  • 电子邮件酸| 怪物的流体布局
  • 风格运动| 流体手机邮件设计
  • 堆栈溢出| 浮动内容

上面的Ted Goas Responsive链接也是一个很好的例子。

疑难解答和一般指南:

  • 电子邮件酸| 雅虎媒体查询错误解决方法
  • 堆栈溢出| HTML电子邮件中的Colspans和Rowspans
  • Mailchimp | Outlook有条件的CSS
  • 石蕊| 禁止蓝色超链接
  • 堆栈溢出| HTML电子邮件中的Web字体

您将需要使用VML来获取在Outlook中工作的背景图像(除了在body标签中 )。 这里有一些VML链接:

  • 广告系列监视器| 防弹背景
  • 广告系列监视器| 防弹按钮

我一直在做这些(在相当长的时间)为我的工作一段时间。 HTML电子邮件有很多缺陷。 不同的电子邮件客户端呈现不同的HTML,使IE6先进。

这是我迄今为止学到的一个总结。

  • 使用内联CSS :样式并不总是被支持。
  • 使用表格布局 :我知道,但div布局依赖于CSS,许多电子邮件客户端无法应付。
  • 不要使用rowspan :这会导致奇怪的间距问题。
  • 不要使用背景图片 :支持这些是有限的。
  • 带有“display:block”的样式图片标签 :这样可以修复hotmail的奇怪间距问题。
  • 如果使用多个表将它们嵌套在一个父表中 :这会阻止更奇怪的间距问题。
  • 不要使用Javascript :再次支持不好。
  • 确保您的电子邮件清晰无图 :用户可能无法加载它们。
  • 提供一个在线版本和链接 :即使他们的电子邮件客户端是可怕的,这可以让用户看到预期的内容。
  • 测试,测试,测试 :仅仅因为它在一个电子邮件客户端中工作并不意味着它在其他工作。 一个大的是Outlook 2007。它使用word来呈现HTML(叹气)。

这还不是一个全面的清单,但应该让大多数人走上正轨。

内联的CSS和表 – 认为约2000年的Web开发,你会没事的。 活动监视器对于电子邮件客户端可以处理的内容有很好的资源。 也可以使用http://www.emailonacid.com/进行测&#x8BD5; – 不必发送大量测试。

我自己也发现这个指南非常有用: 指导电子邮件客户端的CSS支持 。

这也不错,所以看看什么电子邮件浏览器支持内联CSS: http : //www.campaignmonitor.com/css/

我也建议litmusapp(谷歌它!)。 这是检查事物的好工具。