这几天在学习如何快速学习EDM进行电子邮件推广。
其中一篇文章我觉得写的非常好:
要点如下:
-
Edm邮件的布局以table为第一要素,嵌套table是划分网格的重要形式,这个和网页上的div差别很大。
嵌套基本上都是在td里完成。 -
能用属性的,用属性,不要用CSS模式。 几个常规的属性如下:
table: cellpadding , cellspacing , border ,align , bgcolor, valign ,
-
css 几个常见的有:
border-collapse: collapse;
border: 1px soild # ;
padding :
font-size :
line-hight:
color:
display:block. -
几个陷阱
margin 属性,邮件中屏蔽。
邮件中的table宽度基本定义在600Px,左右。
读完这篇文字, 感觉这么多年一直想做好html邮件,但是似乎绕了很大的圈子。老是拿着别人的模板学习。
思维逻辑: 直接看源代码学习,关注元素的细节。 但是不究其表。 学习往往很有冲动,就是拿到什么读完再说, 很少去考虑这个东西的本质是什么。 关键要点有哪些! 有哪些重要的学习对象。
这一篇文章里,我明显看到的一个[方法论](http://www.w3cplus.com/css/what-you-should-know-about-html-email.html):
1. 结构第一。
2.给表格加上边框进行测试。
3. 利用Litmus或Acid的账号测试你的邮件是不是一个垃圾。
4. 重要一个标准。
' <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demystifying Email Design</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head>'
两个meta :
一个用于字符端
一个用于viewport
5. h1,h2, 和 p 并不实用。 解决办法放在单元格里。
6. 图片学会压缩
这里面非常有兴趣的链接如下:
Litmus 测试工具
Email on Acid 测试工具
The Outlook Team Blog
The Litmus Team Blog
The Email Standards Project
W3C Validator
MailChimp
Campaign Monitor
Premailer,发送前检查邮件
JPEGmini 图像压缩工具
tinyPNG 图像压缩工具
Sublime Text, 我的文本编辑器
HTML Email Boilerplate
别忘了 Viewport Meta Tag
缩略图标由Pierre Borodin提供
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。原文: http://www.w3cplus.com/css/what-you-should-know-about-html-email.html © w3cplus.com
网友评论