有哪些 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
其中包含以下准则:
- 将样式表放在
而不是
一些电子邮件客户端会将 CSS 从头部剥离，但如果样式块(无效)在正文中，则将其保留. - 尽可能使用内联样式
Gmail 将删除任何样式表，无论是在中还是在中，但尊重使用style=""<分配的内联样式/code> 属性 - 返回表格
由于 Outlook 2007 使用 Microsoft Word 渲染引擎，近年来电子邮件标准实际上倒退了一大步.忘记您在没有样式表的情况下了解的大部分定位知识. - 不要依赖图片
大多数客户端和大多数基于 Web 的电子邮件客户端不会显示图像，除非用户特别要求显示图像.
- 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.
- 不要在表格中使用超过两层的嵌套
这是真的.如果我这样做，可能会发生什么?是否有任何特定的客户对此感到不安? - 小心在单元格/表格中嵌套背景图像
据我了解，您可能会遇到背景图像完全重新应用于降序表格/单元格的情况，而不仅仅是闪耀".再说一遍，真的还是假的?哪些客户?
我想用更多的指导方针和战壕中的经验来充实这个列表.
I would like to flesh out this list with more guidelines and experiences from the trenches.
您能提供更多建议吗?
更新:我特别要求为 HTML 中的设计部分及其一致性提供指导.关于避免的一般准则的问题垃圾邮件过滤器和常见礼遇已经在SO上.
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 和 CSS"的角度看待它，实际上真的很难制作像样的 HTML 电子邮件.
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.
- 回到表格进行布局(或者最好不要尝试任何复杂的布局)
- 害怕背景图片(它们在 Outlook 2007 和 Gmail 中会损坏).
- 在正文中添加样式标签是因为 Hotmail 过去接受这种方式 - 不过我很确定他们现在将其删除.如果必须使用 CSS，请使用带有
style属性的内联样式. - 完全忘记
float - 请记住，您的图像可能会被阻止 - 使用背景和文本颜色对您有利 - 确保有一些可读文本且图像被禁用
- 使用链接时要非常小心，尤其要警惕链接文本中看起来像 URL 的任何内容 - 您会激怒网络钓鱼"过滤器(例如
<a href="http://domain.tld">www.someotherdomain.tld</a>坏) - 请记住，网络邮件客户端上的折叠"往往位于页面上方(在 1024x768 屏幕上，大多数界面不会显示超过一百个像素左右)- 将您的身份信息放在顶部以便收件人知道您是谁.
- 最近版本的 Outlook 有一个纵向"预览窗格，它比您预期的要窄得多 - 要非常小心固定宽度的布局，如果您必须使用它们，请尽可能缩小它们.
- 甚至不要考虑 Flash、Javascript、SVG、画布或任何类似的东西.
- 测试，很多.确保您在最近的 Outlook 中进行测试(事情已经发生了很大变化！它现在使用 Word 作为其 HTML 渲染引擎，并且已经残废:Word 2007 HTML/CSS 支持).Gmail 也很挑剔.令人惊讶的是，雅虎的网络邮件非常好，具有很好的 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屋！
