前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » EDM开发注意事项

EDM开发注意事项

发布者:前端集合 // 发布时间:2013-05-17 23:47:01 // 分类:前端集合 // 访问: 3,411 次 // 热度: 0人参与

前不久开始负责公司的EDM模板前端开发.

看了下公司以前同事制作的EDM模板, 代码真是不敢恭维. 最明显的错误居然在页面上用<style>.

做了几个EDM下来, 也积累了点经验. 除了网上常见的那些注意事项, 还有下面这些. 写下来, 对自己对别人都会有用:

1. 所有图片设置border="0" style="display:block";

2. 所有链接设置text-decoration:none;

3. 所有空行, 线条最好用table元素表示;

4. 所有table把cellspacing, cellspadding设置为0;

5. 当需要限制行文字高度时, 须同时设置max-height, height, line-height. 这里max-height很重要:

6. 内容中包含email地址时, 须设置下颜色, 因为有些邮件系统会加上默认样式. 比如QQ mail会加上蓝色带下划线的链接;

2014-01-12 updated:

7. 修正一些邮件客户端的css解析问题:

/* Client-specific Styles */

/* Force Outlook to provide a "view in browser" button. */
#outlook a{padding:0;} 

/* Force Hotmail to display emails at full width */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} 

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}

8. 一些间距, 空白尽量避免用margin, padding实现, 最好使用td来实现. 因为padding等在outlook客户端上被忽略;

9. 使用br代替p来换行;

10. EDM最佳宽度550-600. 不过这个有时也不是我们能够决定的.

介绍一个EDM测试工具: https://litmus.com/, 给它发邮件后, 它能把你的EDM在所有web, 客户端, 手机端的效果截图出来, 很牛叉, 可惜是收费的.

后面如果有新的, 会再补充进来...

Tags: 前端, EDM开发, EDM开发注意事项, EDM, 邮件模板, 邮件模板制作

如何解决ie6, 7未定义宽度浮动元素无法换行的问题>>  << Ubuntu 13.04双系统硬盘安装教程
Top