EDM 设计与开发规范

梅斯前端文档

一、设计规范

1. 移动设备屏幕占比
   
   

2. 邮箱工具屏幕占比

3. 设计图注意点
- 通常是1－3列式布局，推荐1-2列式
- 尽量不去使用 PC 和 Mobile 的差异化界面设计
- 移动端控制在 480px 、 PC端控制在 700px

二、开发规范

1. html采用表格布局，禁止使用 div 或者 HTML5 布局类型标签（如：section 、article）

2. 样式全部使用内连样式

3. 字体属性需要写到相关叶子节点上

4. 关于@media标签，现阶段测试通过复制HTML到邮件里面进行发送的，163邮箱将把 @ 符号转为 _,这样的结果会导致针对移动端的响应式失效

5. 不要使用背景图片或gif动态图

6. 尽量不要用float、position来写邮件效果，outlook下不支持

7. 邮件中的按钮尽量不要用图片，可写个一行一列的表格，里面放个a标签。因为按钮在邮件中比较重要，用图片的话，可能发到客户邮箱未被允许加载图片

8. 在一些低版本客户邮件端会遇到元素之间莫名其妙的几像素间距，怎么调都调不好，这时候可以试一下把html源码压缩一下（在 Foxmail 中，通过编辑 HTML 发送的邮件,如果未压缩则会出现   占位符填充，导致页面中有大量的间距）

9. 一定要给p标签和h系列标签指定一个margin和padding（我一般默认全部设置margin:0;padding:0;），不然不同的邮箱收到的邮件，间距不一致。font-size、font-weight也要指定，不然显示也不一致。

10. img标签要给alt属性，再图片未加载的情况，这个提示的文字就会显示比较重要。

11. table标签上如果不需要边框和间距请加上 border="0" cellpadding="0" cellspacing="0"