EDM模板编写踩坑指南(非响应式,纯table有源码)

时间:2024-01-15 09:33:08

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    放在a便签里,并设置style

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

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

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

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

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

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

<tr>
<td>
<p style="margin-top: 0; margin-bottom: 0;font-size:12px;color:#ffffff!important;font-family:'Microsoft YaHei';opacity:0.8">
咨询电话:<span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span><span>-</span><span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span>-<span>0</span><span>0</span><span style="display:none">crfebetf</span><span>0</span><span>0</span><span style="color:#2e3133">abc</span>
</p>
</td>
</tr>

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

    用span转一下

<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;">
¥<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>
</p>
</td>
</tr>

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

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

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

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

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

  

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

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