edm邮件制作职业分分快三计划

作者:分分快三计划

 

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

背景图片代码写法如下:<table background="background.gif" cellspacing="0" cellpadding="0">,但请注意,outlook 对背景图片不识别。如果需要书写背景图片的样式,则需要先写背景图,然后在style里申明背景图的重复样式。正确写法如<td background=”1.jpg” style=”background-repeat:no-repeat”></td>。

 

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

链接地址的长度不能超过255个字符,会导致无法追踪或链接错误。

 

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

1.

    7.       以上部分是我遇到在网上也搜不到解决方式的问题。踩过太多坑,保守一点没坏处。因为你不一定知道到底是什么原因导致手机屏幕显示的差异,不同邮箱打开的差异。

3、邮件的大小:

5.

<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>

一、图片

6.

<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>

1).EDM正文的html文件大小(不包含图片或者flash)控制在10k以内;

页面宽度请设定在600到800px(像素)以内,长度1024px以内。

    4.           IOS中,电话被safari自动识别为电话变为默认的蓝色并且可以点击打电话,与设计稿色调不一致怎么办

二、代码

4.

  • html4中,br/ 表示换行,br表示必须换行。
  • 而wbr,意思是在浏览器窗口或父级窗口宽度足够的情况下,不换行;在宽度不足的情况下,在加了wbr处主动换行。
  • 当正常情况下英文宽度过小,不足以在行末书写完一个词时,就将行末整个词放到下一行,实现换行,但是加入上面位置的wbr时,软换行就能收主动拆分单词,可以在支持HTML5的浏览器中测试(IE系列除了9都不支持,可以用Chrome)。
  • 这个wbr好像对字符型的语言用处挺大,但是对于想中文这种字,貌似没多大用处。

    <a href="mailto:lasia961@163.com" target="_blank">lasia961@163<wbr>an.com</a>
    

     

2).图片个数不宜过多,建议在20个以内,Gif动画文件个数控制在3个以内;

6.

    用span转一下

4、禁止使用脚本

链接数量不能超过10个,如果所有图片的链接地址一样,请将所有的小图合并成一张大图。

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

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

2.

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

转自:

如果td里包含一个table,那么定义在子table里的标签的样式只会正确显示定义在子table里的样式,在父table的样式是不能正确显示的。例如:
<td style=”font-size:12px” >
<table>
<tr><td>我的字符大小会显示默认的大小<td></tr>
</table>
</td>在table里的文字不会显示为12px
<td>
<table style=”font-size:12px” >
<tr><td>我的字符大小会显示默认的大小<td></tr>
</table>
</td>在table里的文字会显示为12px
注意:如果在table里有a标签的话,则a标签中的内容的颜色样式要定义在a标签内,定义在父td里或所在的table里都是无效的。

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

5、css尽量避免选择符的使用,定位和浮动标签也不要使用,很多信箱都不支持。(如果是设计导致需与设计沟通修改设计)

不要出现"onMouseOut" "onMouseOver",即使在<td>里设置了,发送到邮箱后也将被过滤,无法显示设定鼠标经过所显示的内容。

*    safari有私有属性可以避免,但是我们是edm 不能加入meta*

4、如没有特殊要求,图片的文件名称一律使用小写

不使用类似如下敏感及带促销类的文字:免费、优惠、特惠、特价、低价、便宜、廉价、视频、赚钱、群发、发财、致富、代开、薪水、交友、支付、商机、法宝、宝典、秘密、情报、机密、保密、绝密、神秘、秘诀等。如果邮件发送量大或发送数据容易引起投诉,则需要将公司标志性信息如电话,邮箱或者品牌口号等制作成图片,避免被ISP监控记录。

  有些小伙伴可能要说了美团的EDM是table div,网易的一些邮件是图片加链接,等等,我说明一下,本文写的是非响应式的纯table布局。首先说一下table的组成:表格

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

当设置<img align=”left”/>或<img align=”right”/>时,图片会脱离文档流,在其父元素设置了margin或padding的话,都没有效果使其下移,左移或右移。

 <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>

19、竟可能不要使用span,因为其在某些邮箱里会导致换行。

在outlook中,如果嵌套的图片太长,会导致显示不正常,可将图片裁切成几张较短的小图,再进行布局。

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

邮件代码不要超过10K,最大不能大于20K

在Photoshop中,不要把一张整图直接切成过多的小图,然后直接存储为web格式,这种模板在邮箱中显示效果不正常,同时进入垃圾箱的风险也极高!

<tr>
    <td width="" valign="top" style="padding-left:55px;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:14px;color:#333333">
        <p>更多讲师</p>
        <p>持续更新中......</p>
     </td>
</tr>

6、设计建议:

尽量避免全部是图片,注意平衡图片和文字的比例。

    敲黑板,下面!
    看到了没先用span转一下,在 span后面加入一些字母,将字母颜色设置为底色,即背景色

邮件的高度没有具体要求,应以邮件内容多少而定,建议最长不要超过1200像素,即 2.5屏,否则必须修改。

4.

 

4、内嵌css写法 style=”font-size:10px; font-family:Verdana; color:#ffffff”

13.

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

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

Gmail、QQ邮箱的要求有改变,图片的属性一定要定义完整,例如<img style="vertical-align: top;" src="images/1.jpg" height="142" width="195" alt=" " /> 这里的style="vertical-align: top;"一定要定义,否则图片之间会有缝隙、变形等显示异常的情况。

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

3、如没有特殊要求,html代码小写

5.

<meta name="format-detection" content="telephone=no" />

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

10.

  •   <tr>:表示表格的行
  •        <td>:表示表格的列
  •       <tbody>:表示表格的主体内容
  •   属性cellpadding:规定单元边沿与内容之间的空白
  •   属性cellspacing:规定单元格之间的空白
  •       align:表格相对周围元素的对齐方式。

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

9.

  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> 
     
    

6) 邮件的设计重点在上半部,以吸引阅读者的注意力;

链接代码应尽量简短,代码太长会增加模板大小,进而会影响邮件发送效果。

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

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

如果要使用<p>标签要考虑到<p>标签本身自带的上下行之间的行高

 

8).背景图片的td应加高宽限制,以避免部分客户端的图片显示出现异常;

整页图片控制在8张以内,每张图片最大不能超过15kb。

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

  • 使用table而非div

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

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

2.

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

18、不要简写颜色,比如#fff,要完整写成#ffffff。简写的颜色在IE怪异模式下会出些小问题。

1.

基础知识参考链接

2、邮件的高度:

链接里面最好不要使用特殊符号,避免邮箱解析错误。

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

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

请使用table表格来布局。同一个<td>里只放一张图片,如<td><img src=" photo.jpg" ></td>。所有的图片都要定义高和宽。同一段文字放在同一<td>里。

<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>

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

不要使用外链的css样式定义文字和图片(外链的css样式在邮件里将不能被读取,所以发送出去的邮件因为没有链接到样式,将会使你的邮件内容样式丢失),正确的写法:<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;" >文字</td>"<font style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;" >文字</font>。

 

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

图片地址请不要写成本地路径,例如:<img src="image/menu-5.gif" alt="" />,(这样发送出去的邮件,收件人将没办法看到您的图片)。正确的写法应该是:<img src="" alt="" />。

<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>

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

如果需要邮件居中显示,请在table里设定align="center"。

    放在a便签里,并设置style

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

格式编码:

  或许有人会问EDM是什么,Email Direct Marketing的缩写,即电子邮件营销。EDM模板就是你邮箱中的广告邮件,其实就是在邮件中写网页。但是EDM模板怎么书写。如果你在网上搜,或许你会搜到以下书写要点:(以下要点来自知乎

Tom邮箱的排版问题:在代码中尽量不要使用span标签,使用其他标签替代

不要使用<table></table>以外的body、meta和html之类的标签,部分邮箱系统会把这些过滤掉。

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

6、不得使用javascript ,例如Clk数据跟踪 ,防止浏览器过滤

4.

  

21、如果不想邮件被转发后支离破碎,邮件最好不要用多个 table 拼装,而是要嵌套起来。

3.

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

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

1.

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

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

10.

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

 

4.

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

13、因hotmail信箱的接收问题,段落之间不要用< p >标记,用< br >代替。

9.

edm邮件制作职业分分快三计划。 

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

6.

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

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

2.

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

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

专业的EDM邮件发送,是有严格的制作要求的,本指南从格式编码、文字、图片及链接四个方面给出指引,请逐条按照本指南制作您的EDM邮件模板。

    以上代码告诉你如何用p标签划线,其实就是把p标签当div一样用.然后去掉外边距。

2、关键图片必须设定 alt

在yahoo邮箱里line-height要定义时的注意事项:需在块元素里定义line-height。
如果td里有<p>标签,则line-height也必须在p里定义。
无论是td还是p,如果有超链接,则都必须在a标签里面定义line-height。如果只是在td或者p里面定义line-height的话,那yahoo邮箱将无法识别a里面的行高。

12、图片的src属性一定要用绝对地址:正确:<img src=”http: // blog.54575.com /logo.gif” width=”297″ height=”160″ alt=”好好活=有意义” /> 错误:< img src=”logo.gif” />

图片:

9). 邮件当中的所有点击应使用弹出新窗口。

邮件主题控制在18个字以内,避免使用――!……等符号,容易产生乱码。

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

2.

20、table 的高度使用td撑起来,别给 table 写高度,那样往往不准确。

11.

三、兼容性

文字内容、版面尽量简洁,突出主题,以达到更高的点击率。

1、邮件里所有图片都必须设定高宽,包括小Icon

尽量不要使用地图功能(map)链接图片,此功能会使邮件被多数邮箱划分为垃圾邮件!

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

若邮件模板内侧边或者上下有空白间距,不要用padding,必须得用标准的td来设定空白间距,否则会导致各个邮箱解析不同。

EDM的设计要求:

图片名称尽量减少特殊字符命名,不能包含空格字符,后缀如.jpg不能大写,否则某些邮箱无法识别会造成图片不显示。另外,图片名称不能含有ad字符,否则图片上传后会显示成“被过滤广告”。图片的链接地址最好不要加%、¥、&等这样的特殊字符,这些字符有些邮箱无法识别(例如:QQ邮箱、gmail邮箱),将导致邮件打开时图片无法显示,图片地址最好由数字和字母组成。

1、邮件宽度:邮件的标准宽度为575像素,最宽不宜超过778像素,否则必须修改。

2.

3、小心使用背景图,背景图的地址要也设成绝对地址,不过背景图有些邮箱不支持,可以试试背景颜色代替。(不能用前景图实现的与设计沟通修改或背景色代替)

在<img>标签里面加上alt,这样用户在收到邮件的时候,即使有些邮箱将图片隐藏掉,也可以看到alt=””里面内容的显示,如:<img style="vertical-align: top;" src="images/1.jpg" height="142" width="195" alt="写上图片隐藏时您想要显示的内容 " />,让客户了解到邮件内容并吸引客户点击显示图片。

由于各个邮箱都有自己独立的规则,以下方法只能保证邮件显示效果尽可能与原稿相同:

在<td>里设置margin是无效的,不论是margin-left、margin-right、margin-top或者margin-boottom都没有效果。

14、不要使用<pre>标签,因为会有潜在撑破页面的风险,用 定义来处理缩进。

文字:

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

8.

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

不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML,如果页面中的图片一定要是动态的,请将FLASH文件转换成GIF动画使用,但在Outlook 2007里,GIF将不能正常显示,因为Outlook 2007限制GIF动画。

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

6.

EDM的制作要求:

edm邮件制作职业分分快三计划。5.

7.

7.

3.

3.

1.

邮件主题和内容都不要加入带有网站地址的信息,比如“google.com.cn公司祝您新年好”。 如果客户的品牌知名度比较高,主题上可加入一下公司的名称,比如:“NIKE运动时尚。

5.

HTML代码在15kb以内。(各个邮箱的收件标准不一样,如果超出15kb您的邮件很有可能会进入垃圾邮件箱)。

edm邮件制作职业分分快三计划。链接:

6.

文字应尽量定义字体的样式,每个邮箱的默认字体样式不同,为了达到您想要的效果,字体样式一定要定义完整。

如果td和td之间有间隔,使用<td style=”border-bottom:10px solid #ffffff”></td>,这样写的话td之间是不会有间隔的。使用<td style=” margin-bottom: 10px “ ></td>也是不会有空格的。如果td之间有间隙,必须用 <td></td><td height=””10px> </td><td></td>来隔开。但是如果是table,则<table style=”border-top:10px solid #ffffff; border-bottom:20px solid #ffffff”></table>里面的内容会在上下有空行。

内联元素的vertical-align不能被识别,例如<img src=”1.jpg” style=”vertical-align:bottom”/>,此图片并不会和相同行的元素底对齐,可以写成<td valign=”bottom”><img src=”1.jpg”/></td> 即可。

为避免用户收到的邮件图片无法浏览,请制作一份和邮件内容一样的web页面,然后在邮件顶部写一句话:“如果您无法查看邮件内容,请点击这里”, 链接到放有同样内容的web页面。(Y@mail系统目前支持此功能,您只需要在编辑模板的时候选择是否添加链接标志)。

<col>标签不能被识别,如果要定义几个td相同的宽度,可以把具体的宽度写在具体的td里。例如<td width=””></td>

8.

<p>标签的width是不认识的,例如<p style=” width:320px” ></p>,则p标签中的内容不会在320px处自动换行。只有<td>设置了宽度,内容才会在宽度限制处换行。

12.

8.

7.

链接请写成绝对地址,例如:<a href="

7.

文字中出现网站地址链接被屏蔽为垃圾邮件的风险是极高的,例如: http:www.baidu.com.cn,此类链接,建议写成“百度”文字加链接,或是将网址做成图片加链接。

4.

内联元素的padding不能被识别,例如<a href=”#” style=”padding-left:40px”></a>,a标签里面的内容并不会距离左边40px。可以在td里定义padding.

1.

如果发送超过20万封,主题内容要更换,发送超过200万封,要考虑重新设计。

3.

Html编码请使用utf-8。

outlook规则:

不可将word类文件直接转换为html格式,否则会造成编码不规范。

5.

3.

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划