HTML电子邮件设计有哪些指导原则？ [英] What guidelines for HTML email design are there?
问题描述
在许多客户端和基于网络的电子邮件界面中，您可以在电子邮件中为丰富的HTML格式化提供什么指导，同时保持良好的视觉稳定性？
What guidelines can you give for rich HTML formatting in emails while maintaining good visual stability across many clients and web based email interfaces?
关于一个问题的无关答案Stack Overflow建议：
An unrelated answer on a question on Stack Overflow suggested:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
其中包含以下准则：
- 将样式表放在
< body>中而不是< head>
某些电子邮件客户端将剥离CSS，但如果正文中的样式块（无效），则保留它。 - 尽可能使用内联样式
Gmail将剥离任何样式表，无论是在< head>或< body>中，但使用style =属性 - 返回表
近年来，电子邮件标准实际上已经向后退了一大步，因为Outlook 2007使用了Microsoft字渲染引擎。不了解样式表了解的大部分内容。 - 不要依赖图片
大多数客户端和大多数基于网络的电子邮件客户端除非用户明确要求他们显示，否则不会显示图像。
- Place stylesheet in
<body>instead of<head>
Some email clients will strip CSS out of the head, but leave it if the style block is (invalidly) in the body. - Use inline styles where ever possible
Gmail will strip any stylesheet, whether in the<head>or in the<body>, but honor inline styles assigned using thestyle=""attribute - Return to tables
Email standards have actually taken a giant step backwards in recent years thanks to Outlook 2007 using the Microsoft Word rendering engine. Unlearn most of what you learned about positioning without stylesheets. - Don't rely on images
Most clients and most web based email clients will not display images unless the user specifically requests them to be displayed.
我还有一些未确认的真相，不记得我在哪里阅读他们。
I also have a few "unconfirmed" truths that I don't remember where I read them.
- 不要在表格中使用两层以上的嵌套 >
这是真的。如果我这样做可能会发生什么？有没有特定的客户端/客户端窒息？ - 小心在单元格/表格中嵌套背景图片
据了解您可能会遇到背景图像完全重新应用于下降表格/单元格的情况，而不仅仅是闪耀。再次，真的吗？哪些客户？
- Don't use more than two levels of nesting in tables
Is this true. What is likely to happen if I do? Is there any particular client/clients that choke on this? - Be careful of nesting background images in cells/tables
As I understand you may encounter situations where the background image is applied in the descending table/cell completely anew, and not just "shining through". Again, true or not? Which clients?
我想通过更多的渠道指南和经验来列出这个列表。
I would like to flesh out this list with more guidelines and experiences from the trenches.
您能否提供进一步的建议？
更新：在HTML中提供设计部分的准则。有关避免的一般准则的问题垃圾邮件过滤器和常见礼貌已经在上述。
Update: I'm specifially asking for guidelines for the design part in HTML and consistency there of. Questions about general guidelines for avoiding spam filters, and common courtesy are already on SO.
推荐答案
实际上真的很难制作一个体面的HTML电子邮件，如果你从一个现代的HTML和CSS'的观点。
It's actually really hard to make a decent HTML email, if you approach it from a 'modern HTML and CSS' perspective.
为了获得最佳效果，想象它是1999.
For best results, imagine it's 1999.
- Go回到表格进行布局（或者最好不要尝试复杂的布局）
- 害怕背景图片（在Outlook 2007和Gmail中打破）。
- 这个样式标签在身体的东西是因为Hotmail曾经接受这样的方式 - 我很确定他们现在删除它。如果您必须使用CSS，则使用内置样式与
样式属性。 - 完全忘记了
float - 记住您的图片可能会被屏蔽 - 使用背景和文字颜色可以让您有所收获 - 确保有一些可读取的文字，图片被禁用
- 对链接非常小心，特别警惕任何看起来像链接文本中的URL - 你会愤怒'网络钓鱼'过滤器（例如
< a href =http：// domain .tld> www.someotherdomain.tld< / a>是不好） - 请记住，客户端往往是非常高的页面（在1024x768屏幕上，大多数界面不会显示超过一百个像素） - 将您的身份信息放在顶部，以便收件人知道您是谁。
- 最近版本的展望有一个肖像预览窗格，比您预期的要窄得多 - 对固定宽度布局非常谨慎，我你必须使用它们，使它们尽可能的窄。
- 甚至不要认为关于flash，Javascript，SVG，canvas或任何类似的东西
- 测试很多。确保您在最近的Outlook中测试（事情发生了很大变化！现在使用Word作为HTML渲染引擎，并且它被削弱： Word 2007 HTML / CSS支持）。 Gmail也很漂亮。令人惊讶的是，Yahoo的网络邮件非常好，支持CSS。
- Go back to tables for layout (or preferably - don't attempt any complex layout)
- Be afraid of background images (they break in Outlook 2007 and Gmail).
- The style-tag-in-the-body thing is because Hotmail used to accept it that way - I'm pretty sure they strip it out now though. Use inline styles with the
styleattribute if you must use CSS. - Forget entirely about
float - Remember your images will probably be blocked - use background and text colour to your advantage - make sure there is some readable text with images disabled
- Be very careful with links, be especially wary of anything that looks like a URL in the link text - you will anger 'phishing' filters (eg
<a href="http://domain.tld">www.someotherdomain.tld</a>is bad) - Remember that the "fold" on webmail clients tends to be extremely high up the page (on a 1024x768 screen, most interfaces won't show more than a hundred pixels or so) - get your identity stuff in right at the top so the recipient knows who you are.
- Recent version of outlook have a "portrait" preview pane which is significantly narrower than you may be expecting - be very wary of fixed-width layouts, if you must use them, make them as narrow as you can.
- Don't even think about flash, Javascript, SVG, canvas, or anything like that.
- Test, a lot. Make sure you test in a recent Outlook (things have changed a lot! It now uses Word as its HTML rendering engine, and it's crippled: Word 2007 HTML/CSS support). Gmail is pretty finicky also. Surprisingly Yahoo's webmail is extremely good, with nice CSS support.
祝你好运;）
更新以回答更多问题：
不要在表格中使用多于两个层次的嵌套
Don't use more than two levels of nesting in tables
我相信这是有关Lotus Notes的旧指南。嵌套表应该可以，但是真的，如果你有一个足够复杂的布局需要它们，你可能会遇到麻烦。保持您的布局简单。
I believe this is an older guideline pertaining to Lotus Notes. Nested tables should be okay, but really, if you have a layout that's complicated enough to need them, you're probably going to have trouble anyway. Keep your layout simple.
小心在单元格/表格中嵌套背景图片
Be careful of nesting background images in cells/tables
这可能与上述有关，同样适用，如果你变得复杂，那么你会有问题。 Outlook的最新版本根本不支持背景图片，所以最好建议您完全忘记它们。
This may be related to the above, and the same applies, if you're getting that complicated then you will have problems. Recent versions of Outlook don't support background images at all, so you'd be best advised to forget about them entirely.
这篇关于HTML电子邮件设计有哪些指导原则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
