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

我已经开发网站超过十年了，但很快就发现我的许多网站开发习惯在为电子邮件客户端开发时是无用的。这让我非常沮丧，所以我想问一个问题:

对于像我这样经常为 gmail、 Outlook 等设计的人来说，什么是最佳实践和必要的考虑？

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

简而言之: 什么能从网络世界转移到电子邮件世界，什么不能？

54524 次浏览
小开

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.

小开

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.

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).

This is far from a comprehensive list, but should set most people on the right track.

小开

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.

Getting Started Guides:

CSS Support & General Guides:

You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools

Responsive Guides:

Templates & Frameworks:

Responsive Alternate Examples:

Also the Ted Goas Responsive link above has an excellent fluid example.

Troubleshooting & General Guides:

You'll need to use VML to get background images working in Outlook (Except in the body tag). Here are some VML links:


提交答案