EDM营销邮件规范-制作-设计-[转]

  1.   table 布局写法:这是最外层的table

    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    </table> 
    
  2.      利用td实现空白书写,而不是margin,代码为上边距和左边距的写法

     <tr>
        <td height="34" valign="top"></td>
     </tr>
    
    <tr>
        <td width="20px"> </td>
    </tr> 
     
    

二、代码

  因为只要你遵循table写法,完全可以避开前人走过的深坑,快速在相应时间内完成工作。

需要同时设计一张与该flash或流媒体格式文件内容风格相同、同样尺寸的静态图片 (.jpg或者.gif),并且设置为flash或流媒体格式文件所在的表格的背景图片,并提示用户:该部分设计为flash(或流媒体)格式,请点击邮件上端链接,观看在线版本。

 

17、普通标签需要有开始和结束,不能只有结束符,如</style>等

  如果让你立刻写EDM,你在网上搜的话,得到的信息相对较少,但是又很懵的话,建议你看看这篇文章,让你30分钟之内入门并开始写, 需要源码再私我吧~

Outlook不支持背景图片,不支持浮动float和定位position。

 <td>
      <p style="margin-top:0;margin-bottom:0;height:12px;display:block;color:#e63453;font-size:12px;width:25px;border-top:2px solid #e63453 !important;margin-left: 31px; padding-left: 48px;">&nbsp;</p>
  </td>

7).带有故事情节的flash设计应以下载屏幕开始,以吸引阅读者等待下载;

<table class="remove-left" style="font-size: 0;line-height: 0;border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="1">
  <tbody>
     <tr>
        <td style="font-size: 0;line-height: 0;border-collapse: collapse;" height="3" width="0">
           <p style="padding-left:15px;mso-table-lspace:0;mso-table-rspace:0;"></p>
        </td>
    </tr>
  </tbody>
 </table>

1)一般邮件不支持任何脚本语言:多数邮件客户端软件和webmail中默认不支持任何脚本语言;

    如果你去百度的话,结果如下,让你加入私有属性

6、在切图时,需要为文字区域留出一定的边距(5px左右,视行数和字数的多少调整),由于outlook中默认行间距和字间距大于普通网页,预留边距可以防止出现不必要的换行和图片缝隙。

CSS只可以使用内联样式表,如:style=“margin:0“

4).能够使用系统文字应尽量避免使用图片文字以减少文件大小;

    放在a便签里,并设置style

一、图片

 

5、不要在邮件中使用高度过小的图片,outlook2007不能很好的显示高度为1像素的图片,会出现拼合缝隙

<tr>
    <td>
        <p style="margin-top: 0; margin-bottom:0;text-decoration:none;font-size:12px;color:#ffffff;font-family:'Microsoft YaHei';opacity:0.8">
            联系邮箱:<a href="" style="text-decoration:none;color:#ffffff">lasia961@163.com</a>
        </p>
    </td>
</tr>

7、尽量用utf-8的编码可以避免某些(注意,是某些)邮箱出现乱码情况。

    5.   安卓中出现,5位数字以上被一些手机邮箱或者浏览器识别电话,并带有蓝色之类的,点击到拨打界面,如何解决 

2、换行用<br>结尾,而非<br />, 在 HTML4.01 下是没有加斜杠这一规则,只有发展到了XHTML才出现用斜杠终止空元素。

    方法二:直接在td中加左边距,与第一种是一样的,第一种优点是整齐,当边距一致时可复用,把边距与内容分开.

11、设定每张图片的宽和高,以保证页面排版设计的正常。

  可是看到这些,对于新手小白来说仍旧不友好,什么是table布局??到底哪些能用哪些不能用?即使你去问别人,别人告诉你也是多测试多测试。可是既要兼容PC也要兼容移动,移动端既要兼容安卓也要兼容ios,之后也得注意不同端口打开的适配,比如,适配微信打开和用手机自带浏览器打开或者主流邮箱打开比如:网易邮箱大师、腾讯邮箱等等。

15、由于Gmail的兼容性问题,假如td里有文字,如要定义该文字样式,必须在td里写style来定义字体,另td内样式最好也加上这个style=”word-break:break-all;”,其作用在于不会让表格撑开,会自动换行

 

22、不要对图片使用line-height行高,避免拼装图片出现空白间隙。

  之前有人告诉我你能兼容 outlook的话,兼容其他大部分不成问题了。如果我们想弄清楚怎么才能支持这么多不同端口打开的话,不是本文的主要讲述点。

3) EDM内含flash或流媒体格式文件的邮件,包括flash或流媒体格式文件在内应控制在50k-250k以内,否则必须经过修改(除特殊情况外);

    3.       邮箱被自动识别颜色变为浏览器给的默认颜色怎么办?

转自:http://www.okcode.net/index.php/archives/188

    参考国外的模板写法如下:

10、给每张图片都指定Alt属性值,这样即使图片不被显示也会让邮件阅读者大致了解图片的内容。

  好了,下面开始讲什么是table布局呢?

3、邮件的大小:

 

3).建议图片可运用于前景实现,背景图片如:outlook客户端不支持;或背景色代替。

      8.           邮箱跳转的mailtoy与<wbr>,认识了一个新标签,过来分享下。

1).对于页面中的图片,建议将超过15k的图片分割成小图片,以保证下载图片过程的顺畅;

  

1、采用HTML4.01,一定要声明邮件头,否则部分css不能正常工作(已写在模板中)

    6.    在chrome看没问题的,在outlook看有些元素被跟预期的不一样怎么办?

2).EDM 内含图片的大小应控制在30k-120k以内;

<tr>
    <td align="center" valign="top">
         <p style="text-decoration:line-through;font-size: 12px; line-height: 14px; color: #666566; font-family:'Microsoft YaHei',Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 0; margin: 0;">
            ¥00000
         </p>
     </td>
 </tr>

6、设计建议:

  •  设计之初遵循:图上无文本,文本后无底纹的规则

  • 使用table而非div

  • 所有图片使用 img标签,如:<img style="display:block" src=""/>
  • 可以适当使用占位符space.gif
  • 多用<br/>换行而非<p>
  • 整体最佳宽度为:550-600px
  • 不使用javascript
  • 正式发送给用户前,多次测试
  • 负边距部分邮箱会被屏蔽,不能用

16、由于边框背景部分宽度固定,写在模板中的逗号(特别是右上角标题)一律使用英文状态下的”,” 不要使用中文的”,”(已写在模板中)

<tr>
        <td>
            <p style="margin-top: 0;  margin-bottom: 0;font-size:12px;color:#ffffff!important;font-family:'Microsoft YaHei';opacity:0.8">
              咨询电话:00crfebetf0-00crfebetf0-00crfebetf00abc
             </p>
        </td>
   </tr>

8、邮件title最好是 html文本 . 即文字不要嵌入到图片里

  现在我们知道什么是table布局了,那么该如何不用div实现css中的一些效果?css世界中张鑫旭对于table布局中有说,table比css2出现的还要早,这就是为什么一些css的布局在table中不适用。所以我们可以使用P标签来实现块元素div 的效果。来,让我们模拟整个EDM书写过程。

9、不要使用div来排版,比如分栏,请注意是排版,div标签还是可以使用。Html布局最好使用table布局,居中排版,table在edm中表现比div更好

 

5).网页上使用的中文系统文字的最小字号应保证在12像素,并且使用系统默认的宋体或黑体,避免使用其它的中文字体;

基础知识参考链接http://www.w3school.com.cn/tags/tag_table.asp

5、包含Flash或流媒体格式文件的邮件设计要求;

  如果问你table布局,你肯定会嗤之以鼻?什么table布局?不是早已经淘汰了吗?但是如果让你写EDM邮件模板,table布局相对来说是最好的选择。

2)邮件中不能使用分帧页面和I-frame。

    这个时候,打开审查元素,如果元素被加上了外边距 则在这个元素的样式中加上

4、禁止使用脚本

本文由金沙官网线上发布于Web前端,转载请注明出处:EDM营销邮件规范-制作-设计-[转]

您可能还会对下面的文章感兴趣: