编写HTML电子邮件时的最佳做法和注意事项

我开发网站已经十多年了,但很快发现,我开发的网络的许多习惯对于电子邮件客户端开发是没有用的。这给我带来了巨大的挫折,所以我想我会问一个问题,希望表达最好的做法和必要的考虑,对于像我这样的人,他们可能会发现自己设计的Gmail,展望等不时。

示例:< style> …< / style> vs inline CSS。

总之:什么从网络世界转移到电子邮件世界,什么不是。

这似乎是一个很好的地方列出一些资源,任何人试图学习HTML电子邮件。这是(可能)您将在网络上找到的最全面的HTML电子邮件资源列表。快乐学习。

入门指南:

> Campaign Monitor
> Mailchimp
> Sitepoint
> Reach Customers Online
> Tuts+

CSS支持&一般指南:

> Campaign Monitor | CSS Support Guide
> HTML Email Boilerplate
> Litmus | Email Clients FAQ’s
> Campaign Monitor | Will it work?
> Mailchimp | Email Marketing Field Guide

您应该总是在html电子邮件中内联您的CSS。这里是CSS Inlining Tools的列表

响应指南:

> Campaign Monitor | Responsive Support Guide
> Style Campaign | Responsive Support Guide
> Litmus | Responsive How-To Infographic
> 70014

模板&构架:

> 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

响应替代示例:

> 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

此外,上面的Ted Goas响应链接有一个很好的流行的例子。

疑难解答一般指南:

> 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

您需要使用VML获取背景图片在Outlook中工作(in the body tag除外)。这里有一些VML链接:

> Campaign Monitor | Bulletproof Backgrounds
> Campaign Monitor | Bulletproof Buttons

http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:编写HTML电子邮件时的最佳做法和注意事项