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

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

入门指南:

• Campaign Monitor
• Mailchimp
• Sitepoint
• Reach Customers Online
• Tuts+
• Email on Acid

CSS支持和一般指南:

• Campaign Monitor | CSS Support Guide
• HTML Email Boilerplate
• Litmus | Email Clients FAQ's
• Campaign Monitor | Will it work?
• Mailchimp | Email Marketing Field Guide
• Email on Acid | CSS Basics: A Beginner’s Guide to Stylizing HTML

你应该总是把你的CSS嵌入到html电子邮件中。以下是 CSS Inlining Tools

响应指南:

• Campaign Monitor | Responsive Support Guide
• Style Campaign | Responsive Support Guide
• Litmus | Responsive How-To Infographic
• Litmus | Big List of Responsive & Mobile Resources

模板和框架:

• Ted Goas | Cerberus Responsive Email Patterns
• Email on Acid | Responsive Template
• Brian Graves | Responsive Email Patterns
• Antwort | Responsive Layouts
• Zurb | Ink Responsive Templates
• Campaign Monitor | Free Email Templates
• Mailchimp | Email Blueprints

响应性备选示例:

• Tuts+ | Responsive Email Without Media Queries
• Stack Overflow | Fluid Example
• Email on Acid | Monster's Fluid Layout
• Style Campaign | Fluid Mobile Email Design
• Stack Overflow | Floating Content

上面的Ted Goas响应链接也有一个极好的流体示例。

故障排除和一般指南:

• Email on Acid | Yahoo Media Query Bug Workaround
• Stack Overflow | Colspans and Rowspans in HTML Email
• Mailchimp | Outlook Conditional CSS
• Litmus | Banning Blue Hyperlinks
• Stack Overflow | Webfonts in HTML Email

你需要使用 VML 使背景图像在Outlook中工作(除了 in the body tag ). 以下是一些VML链接:

• Campaign Monitor | Bulletproof Backgrounds
• Campaign Monitor | Bulletproof Buttons

我做这些(有时)已经有一段时间了。HTML电子邮件有很多陷阱。不同的电子邮件客户端呈现不同的HTML,使IE6看起来更高级。

这是我到目前为止所学知识的总结。

• 使用内联CSS :不总是支持样式。
• 使用表格布局 :我知道,但div布局依赖于css,许多电子邮件客户端无法处理。
• 不要使用rowspan :这会导致奇怪的间距问题。
• 不使用背景图像 :对这些的支持是有限的。
• 使用“显示:块”设置图像标记样式 :这修复了hotmail的奇怪间距问题。
• 如果使用多个表,则将它们嵌套在一个父表中 :这会阻止更多奇怪的间距问题。
• 不要使用Javascript :同样不太受支持。
• 确保您的电子邮件清晰易读,没有图像 :用户不能加载它们。
• 提供联机版本并链接到它 :这允许用户看到预期的内容,即使他们的电子邮件客户端很糟糕。
• 测试,测试,测试 :仅仅因为它在一个电子邮件客户端中工作并不意味着它在其他客户端中工作。《2007年展望》让你大吃一惊。它使用word来呈现HTML(sigh)。

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

内联css和表格-想想2000年左右的web开发,你会没事的。竞选班长有一个很好的资源,什么东西电子邮件客户可以处理。同时使用 http://www.emailonacid.com/ 用于测试-节省了发送大量测试的时间。