最佳实践编写 HTML 电子邮件时的注意事项 [英] Best Practices & Considerations when writing HTML Emails
问题描述
我已经开发网站十多年了，但很快发现我为网络开发的许多习惯在为电子邮件客户端开发时毫无用处.这让我非常沮丧，所以我想我会问一个问题:
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:
对于像我这样可能不时为 Gmail、Outlook 等进行设计的其他人来说，最佳实践和必要考虑是什么?
What are best practices and necessary considerations for others like myself who may find themselves designing for gmail, outlook, etc. from time to time?
示例: 与内联 CSS.
Example: <style>...</style> vs inline CSS.
简而言之:什么从网络世界转移到电子邮件世界，什么没有?
In short: what transfers over from the web-world to the email-world, and what doesn't?
推荐答案
这似乎是一个为任何试图学习 HTML 电子邮件的人列出一些资源的好地方.这(可能)是您可以在网络上找到的最全面的 HTML 电子邮件资源列表.快乐学习.
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.
入门指南:
CSS 支持 &一般指南:
CSS Support & General Guides:
- 活动监视器 |CSS 支持指南
- HTML 电子邮件样板
- 石蕊 |电子邮件客户端常见问题解答
- 广告系列监控 |它会起作用吗?
- Mailchimp |电子邮件营销领域指南
- 关于酸的电子邮件 |CSS 基础:HTML 样式化初学者指南
您应该始终在 html-email 中内联您的 CSS.这是 CSS 内联工具
You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools
响应式指南:
模板和框架:
- Ted Goas |Cerberus 响应式电子邮件模式
- Acid 上的电子邮件 |响应式模板
- 布赖恩格雷夫斯 |响应式电子邮件模式
- 蚂蚁 |响应式布局
- Zurb |墨迹响应模板
- 活动监视器 |免费电子邮件模板
- Mailchimp |电子邮件蓝图
响应式替代示例:
上面的 Ted Goas 响应式链接也有一个很好的流畅示例.
Also the Ted Goas Responsive link above has an excellent fluid example.
故障排除和一般指南:
- Acid 上的电子邮件 |雅虎媒体查询错误解决方法
- 堆栈溢出 |HTML 电子邮件中的 Colspans 和 Rowspans
- Mailchimp |Outlook 条件 CSS
- 石蕊 |禁止蓝色超链接
- 堆栈溢出 |HTML 电子邮件中的网络字体
您需要使用 VML 获取在 Outlook 中工作的背景图像(除了 在正文标签中).以下是一些 VML 链接:
You'll need to use VML to get background images working in Outlook (Except in the body tag). Here are some VML links:
这篇关于最佳实践编写 HTML 电子邮件时的注意事项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
