HTML5技术

HTML邮件制作规范 - 渴望做梦

字号+ 作者:H5之家 来源:博客园 2016-05-09 15:00 我要评论( )

以下内容有些是别人总结的,有些是自己在工作中总结的。 模板最佳尺寸:显示宽度550px-750px,模板高度控制在一屏以内。 1、 用table+css方式构建模板 Div+css布局不完全被邮件客户端支持,所以无法使用div+css布局。 2、 可以使用editplues,或者UltraEdit

以下内容有些是别人总结的,有些是自己在工作中总结的。

模板最佳尺寸:显示宽度550px-750px,模板高度控制在一屏以内。

1、 用table+css方式构建模板

  Div+css布局不完全被邮件客户端支持,所以无法使用div+css布局。

2、 可以使用editplues,或者UltraEdit等工具制作html,但务必使用可视化工具检查嵌套情况推荐Dreamweaver

3、 插入的图片要定义宽度,高度,针对(editplues,UltraEdit等工具更要注意这一点)

4、 严禁使用背景图片

  在outlook2007中,背景图片将无法显示,其他邮件客户端可正确显示背景图片。

  Gmail也不支持css里面的背景图,

5、 严禁使用map标记形式

  造成后期可视化统计困难

6、 不使用word转换的html文件作为模板

7、 不要用外部链接的css文件

<link rev="stylesheet" type="text/css" href="/css/new/common.css" media="all" /> 这样是抓取不到css的,要写在html,head里面

8、网站或者论坛客户自己有服务器的涉及上传模板文件的按照这个格式

  

  

  这样的格式系统无法抓取

  

9、模板中的图片请使用绝对路径,完整的URl

  <img src="http://www.abc/123.jpg" ></img>

  <img src="http://www.abc/456.jpg" ></img>

10、一个td里面不要放多个图片,请放在不同td里面,

  <table cellspacing="0" cellpadding="0">

    <tr>

    <td><img src="http://www.abc/123.jpg" ></img></td>

    <td><img src="http://www.abc/456.jpg" ></img></td>

    </tr>

  </table>

11、<img src="http://444/edm1_03.jpg"      />

12、不规范的换行会让图片丢失

=========================以下是我自己总结的===========================

1、 在outlook里面很多css属性不支持(比如:margin,overflow,text-overflow等)

  这是查看各种邮箱属性支持情况的网站

  https://www.campaignmonitor.com/css/

2、在outlook上不能用背景图片,不能用网络图片加载。

3、在outlook上图片设置的宽高是不管用的

4、在outlook上实现dom结构居中要用align=center

5、outlook会自动加大行距间距

6、页面元素之间有间距可能是html里面混入了$nbsp;(也就是空格字符)

7、align=center在不同的浏览器的不同的邮箱解读代码是不一样的,纠错能力也不一样,

8、 邮件里文字的居中就用text-align,dom的居中就用align=center

9、Foxmail里面要想实现超出的文本不折行,超出部分显示省略号,建议不要直接把文本放到td下面,而是在td下面创建a标签,把内容放到a标签下,然后相应样式写在a标签里。

10、Foxmail不支持https的图片路径

11、有些邮箱上页面结构显示不正确的问题如果和以上内容无关的话建议采用别的dom结构来试试。

12、outlook邮箱中,多个连续的” ”或&nbsp;符号不受宽度样式的限制,会一直往后延伸。

  目前前端没有找到解决办法。

 

PS:

在浏览器里面浏览正常的模板,不一定正常!!!,要用发送系统抓取模板新建任务,发送到邮箱用浏览或者用客户端查看,邮件客户端软件和邮箱服务商的html解析水平基本停留在table布局阶段,而且出于安全考虑也有很多禁忌,请使用table+css布局,用Dreamweaver修改模板后还要查看html代码部分,空连接,怪异的或者过多的alt,title值(建议不超过30个汉字),没有宽高的图片都会造成邮件显示错误.

建议的测试环境,操作系统xp,win7,邮件客户端outlook2007,outlookexpre,foxmail6.0以上

Ie下的qq邮箱,126邮箱,hotmail邮箱,搜狐邮箱,新浪邮箱等等

有精力的话可以再在火狐下面再用以上邮箱测试测试

很多人用outlook2007,所以要着重测试.

参考资料

1、

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • 如何在 ASP.NET Core 中发送邮件 - Savorboard

    如何在 ASP.NET Core 中发送邮件 - Savorboard

    2017-05-02 08:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

网友点评