我开发网站已有十多年了，但很快发现我的许多网络开发习惯在为电子邮件客户端开发时毫无用处。这让我非常沮丧，所以我想问一个问题：
对于像我这样不时为 Gmail、Outlook 等进行设计的人来说，最佳实践和必要的考虑因素是什么？
Example: <style>...</style>与内联 CSS 相比。
简而言之：什么从网络世界转移到电子邮件世界，什么不转移？
对于任何想要学习 HTML 电子邮件的人来说，这似乎是一个列出一些资源的好地方。这（可能）是您在网络上能找到的最全面的 HTML 电子邮件资源列表。快乐学习。
入门指南：
- 活动监控 http://www.campaignmonitor.com/resources/will-it-work/guidelines/
- 邮件黑猩猩 http://kb.mailchimp.com/article/how-to-code-html-emails/
- 站点点 http://www.sitepoint.com/code-html-email-newsletters/
- 在线接触客户 http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/
- Tuts+ http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908
- 关于酸的电子邮件 https://www.emailonacid.com/blog/article/tutorial-getting-started/html-basics-for-beginners/
CSS 支持和一般指南：
- 活动监控| CSS 支持指南 http://www.campaignmonitor.com/css/
- HTML 电子邮件样板 http://htmlemailboilerplate.com/
- 石蕊|电子邮件客户常见问题解答 https://litmus.com/help/email-clients/
- 活动监控|它会起作用吗？ http://www.campaignmonitor.com/resources/will-it-work/
- 邮件黑猩猩 |电子邮件营销现场指南 http://mailchimp.com/resources/guides/email-marketing-field-guide/
- 关于酸的电子邮件 | CSS 基础知识：HTML 风格化初学者指南 https://www.emailonacid.com/blog/article/tutorial-getting-started/css-basics/
您应该始终将 CSS 内联到 html-email 中。这是一个列表CSS 内联工具 https://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057
响应式指南：
- 活动监控|响应式支持指南 http://www.campaignmonitor.com/guides/mobile/
- 风格宣传活动 |响应式支持指南 http://stylecampaign.com/blog/2012/10/responsive-email-support/
- 石蕊|响应式操作方法信息图 https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
- 石蕊|响应式和移动资源大列表 https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources
模板和框架：
- 特德·高斯 | Cerberus 响应式电子邮件模式 http://tedgoas.github.io/Cerberus/
- 关于酸的电子邮件 |响应式模板 http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i
- 布莱恩·格雷夫斯 |响应式电子邮件模式 http://briangraves.github.io/ResponsiveEmailPatterns/
- 蚂蚁 |响应式布局 http://internations.github.io/antwort/
- 祖布 |墨水响应模板 http://zurb.com/ink/templates.php
- 活动监控|免费电子邮件模板 http://www.campaignmonitor.com/templates/all/
- 邮件黑猩猩 |电子邮件蓝图 https://github.com/mailchimp/Email-Blueprints
响应式替代示例：
- 啧啧+ |无需媒体查询的响应式电子邮件 http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
- 堆栈溢出 |流体示例 https://stackoverflow.com/questions/20483059/responsive-order-confirmation-emails-for-mobile-devices/20497625#20497625
- 关于酸的电子邮件 |怪物的流体布局 https://litmus.com/blog/monsters-fluid-layout-stands-out-among-job-search-emails
- 风格宣传活动 |流畅的移动电子邮件设计 http://stylecampaign.com/blog/2010/09/fluid-mobile-email-design-part-4/
- 堆栈溢出 |浮动内容 https://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304
上面的 Ted Goas Responsive 链接也有一个很好的流畅示例。
故障排除和一般指南：
- 关于酸的电子邮件 |雅虎媒体查询错误解决方法 http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries
- 堆栈溢出 | HTML 电子邮件中的列跨度和行跨度 https://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122
- 邮件黑猩猩 | Outlook 条件 CSS http://templates.mailchimp.com/development/css/outlook-conditional-css
- 石蕊|禁止蓝色超链接 https://litmus.com/blog/update-banning-blue-links-on-ios-devices
- 堆栈溢出 | HTML 电子邮件中的网络字体 https://stackoverflow.com/a/21485767/1435513
你需要使用VML http://msdn.microsoft.com/en-us/library/hh846327%28v=vs.85%29.aspx使背景图像在 Outlook 中正常工作（除了在正文标签中 https://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook/13259519#13259519）。以下是一些 VML 链接：
- 活动监控|防弹背景 http://backgrounds.cm/
- 活动监控|防弹按钮 http://buttons.cm/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
