编写 HTML 电子邮件时的最佳实践和注意事项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2229822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Practices & Considerations when writing HTML Emails
提问by Sampson
I've been developing websites for over a decade now, but quickly found that many of my habits in developing for the web are useless when developing for email clients. This has caused me an enormous amount of frustration, so I thought I would ask a question:
我已经开发网站十多年了，但很快发现我为 Web 开发的许多习惯在为电子邮件客户端开发时毫无用处。这让我感到非常沮丧，所以我想我会问一个问题：
What are best practices and necessary considerations for others like myself who may find themselves designing for gmail, outlook, etc. from time to time?
对于像我这样可能不时为 Gmail、Outlook 等进行设计的其他人来说，最佳实践和必要考虑是什么？
Example:<style>...</style>vs inline CSS.
示例：<style>...</style>vs 内联 CSS。
In short: what transfers over from the web-world to the email-world, and what doesn't?
简而言之：什么从网络世界转移到电子邮件世界，什么没有？
回答by John
This seems like a great place to list some resources for anyone trying to learn HTML email. This is (probably) the most comprehensive list of HTML Email resources you will find on the web. Happy learning.
这似乎是一个为任何试图学习 HTML 电子邮件的人列出一些资源的好地方。这（可能）是您可以在网络上找到的最全面的 HTML 电子邮件资源列表。快乐学习。
Getting Started Guides:
入门指南：
CSS Support & General Guides:
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 电子邮件样板
- 石蕊 | 电子邮件客户端常见问题解答
- 活动监视器 | 它会起作用吗？
- Mailchimp | 电子邮件营销领域指南
- 关于酸的电子邮件 | CSS 基础：HTML 样式化初学者指南
You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools
您应该始终在 html-email 中内联您的 CSS。这是CSS 内联工具列表
Responsive Guides:
响应式指南：
- Campaign Monitor | Responsive Support Guide
- Style Campaign | Responsive Support Guide
- Litmus | Responsive How-To Infographic
- Litmus | Big List of Responsive & Mobile Resources
Templates & Frameworks:
模板和框架：
- 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
- 特德·戈斯 | Cerberus 响应式电子邮件模式
- 关于酸的电子邮件 | 响应式模板
- 布赖恩格雷夫斯 | 响应式电子邮件模式
- 蚂蚁 | 响应式布局
- 祖布 | 墨水响应模板
- 活动监视器 | 免费电子邮件模板
- Mailchimp | 电子邮件蓝图
Responsive Alternate Examples:
响应式替代示例：
- 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
Also the Ted Goas Responsive link above has an excellent fluid example.
上面的 Ted Goas 响应链接也有一个很好的流畅示例。
Troubleshooting & General Guides:
故障排除和一般指南：
- 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
- 关于酸的电子邮件 | 雅虎媒体查询错误解决方法
- 堆栈溢出 | HTML 电子邮件中的 Colspans 和 Rowspans
- Mailchimp | Outlook 条件 CSS
- 石蕊 | 禁止蓝色超链接
- 堆栈溢出 | HTML 电子邮件中的 Webfonts
You'll need to use VMLto get background images working in Outlook (Except in the body tag). Here are some VML links:
您需要使用VML来获取在 Outlook 中工作的背景图像（除了在 body 标签中）。以下是一些 VML 链接：
回答by Magpie
I have been doing these (at quite times) for my work for a while now. There are many pitfalls with HTML emails. Different Email clients render HTML differently from each other and make IE6 look advanced.
一段时间以来，我一直在为我的工作做这些（在很多时候）。HTML 电子邮件有很多陷阱。不同的电子邮件客户端以不同的方式呈现 HTML，并使 IE6 看起来更高级。
Here's a summery of what I've learned so far.
这是我迄今为止所学内容的总结。
- Use in-line CSS: Styles aren't always supported.
- Use table layouts: I know, but div layouts are css dependent and many of the email clients can't cope.
- Don't use rowspan: This causes weird spacing issues.
- Don't use background images: Support for these is limited.
- Style image tags with "display:block": This fixes weird spacing issues with hotmail.
- If using multiple tables nest them in one parent table: This stops more weird spacing issues.
- Don't use Javascript: Again not supported very well.
- Make sure your email is legible with no images: The user may not load them.
- Provide an online version and link to it: This lets users see the intended content, even if their email client is terrible.
- Test, test, test: Just because it works in one email client doesn't mean it works in others. A big got ya is Outlook 2007. It uses word to render HTML (sigh).
- 使用内嵌 CSS：并不总是支持样式。
- 使用表格布局：我知道，但 div 布局依赖于 css，许多电子邮件客户端无法应对。
- 不要使用 rowspan：这会导致奇怪的间距问题。
- 不要使用背景图像：对这些的支持是有限的。
- 带有 "display:block" 的样式图像标签：这修复了 hotmail 的奇怪间距问题。
- 如果使用多个表将它们嵌套在一个父表中：这会阻止更多奇怪的间距问题。
- 不要使用 Javascript：同样没有得到很好的支持。
- 确保您的电子邮件清晰易读，没有图像：用户可能不会加载它们。
- 提供在线版本和指向它的链接：这可以让用户看到预期的内容，即使他们的电子邮件客户端很糟糕。
- 测试，测试，再测试：仅仅因为它适用于一个电子邮件客户端并不意味着它适用于其他电子邮件客户端。Outlook 2007 是一大亮点。它使用 word 来呈现 HTML（叹气）。
This is far from a comprehensive list, but should set most people on the right track.
这远不是一个全面的清单，但应该让大多数人走上正轨。
回答by matpol
Inline css and tables - think web development circa 2000 and you'll be fine. Campaign monitor have an excellent resource for what stuff email clients can deal with. Also use http://www.emailonacid.com/for testing - saves having to send loads of tests.
内联 css 和表格 - 想想大约 2000 年的 Web 开发，你会没事的。活动监视器有一个很好的资源，可以了解电子邮件客户端可以处理的内容。还可以使用http://www.emailonacid.com/进行测试 - 无需发送大量测试。
