最佳实践&编写HTML电子邮件时的注意事项 [英] Best Practices & Considerations when writing HTML Emails
问题描述
我开发网站已有十多年了，但很快发现，我开发网络的许多习惯对于电子邮件客户端开发都是没有用的。这使我有很大的挫折感，所以我想我会问一个问题，希望表达最好的做法和必要的考虑，对于像我这样的人，他们可能会发现自己设计的Gmail，展望等不时。 / p>
示例： < style> ...< / style> vs CSS。
简而言之：从网络世界到电子邮件世界的转移，以及不是什么。
这似乎是一个很好的地方列出一些资源，任何人试图学习HTML电子邮件。这是（可能）您将在网络上找到的最全面的HTML电子邮件资源列表。快乐学习。
入门指南：
- 广告系列监控
- Mailchimp
- Sitepoint
- 在线客户
- Tuts +
一般指南：
- Campaign Monitor | CSS支持指南
- HTML电子邮件范围
- Litmus |电子邮件客户端常见问题
- Campaign Monitor |它会工作吗？
- Mailchimp |电子邮件营销字段指南
您应该始终在HTML电子邮件中嵌入CSS。以下是 CSS内嵌工具
回应指南：
模板&框架：
- Ted Goas | Cerberus回应式电子邮件模式
- 电子邮件Acid |响应式模板
- Brian Graves |自适应电子邮件模式
- Antwort |响应式布局
- Zurb |油墨响应模板
- Campaign Monitor |免费电子邮件模板
- Mailchimp |电子邮件蓝图
响应备用示例：
- Tuts + |没有媒体查询的回复电子邮件
- Stack Overflow |流体示例
- 电子邮件酸|怪物流体布局
- Style Campaign |流动移动电子邮件设计
- Stack Overflow |浮动内容
上面的Ted Goas Responsive链接也是一个很好的例子。
疑难解答一般指南：
- 电子邮件酸| Yahoo Media查询错误解决方法
- Stack Overflow | HTML电子邮件中的Colspans和Rowspan
- Mailchimp | Outlook条件CSS
- Litmus |禁止蓝色超链接
- Stack Overflow | HTML电子邮件中的网络字体
您需要使用 VML 以获取在Outlook中使用的背景图片（除了在body标签中）。以下是一些VML链接：
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 that would hopefully surface the best practices and necessary considerations for others like myself who may find themselves designing for gmail, outlook, etc. from time to time.
Example: <style>...</style> vs inline CSS.
In short: what transfers over from the web-world to the email-world, and what doesn't.
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:
- Campaign Monitor | CSS Support Guide
- HTML Email Boilerplate
- Litmus | Email Clients FAQ's
- Campaign Monitor | Will it work?
- Mailchimp | Email Marketing Field Guide
You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools
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
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.
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
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屋！
