DAY28 - EDM切版

还有一种类型的切版，是EDM切版，
EDM切版是什麽呢？
指的就是信里面看到的版面，像是下面这个就是EDM的截图

如果你的EDM切版用原本的切版方式，你完成之後可能就要哭了，因为应该要重切啦ＱＱ
那要怎麽做呢？ 这边整理了几个点要注意的

1. 请一定使用TABLE切版

1. 我知道table切版可能在一般切版听起来很古老，但EDM就是要用table切版
2. 记得table排版也要reset样式

   <table role=“presentation” cellspacing=“0” cellpadding=“0” border=“0”>
       ...
   </table>
   

3. 左右的样子用td排版
4. 上下的样子用tr排版

2. 关於EDM的设计的注意事项

EDM不适合做太花俏的设计

最好的方式就是用整齐的排法，因为切版的技术支援限制，必须使用table排版
＊ 类似飞出去、重叠的这种不规则排版，如果不是图，请不要出现在EDM设计
* 不支援position系列的css，

最大宽度建议 650px

在设计时，因为EDM不是整个网页的宽度，一般会限制最大宽度，这边建议 650px - 500px，
宽度的限制，也可以参考以下这边文章
https://www.campaignmonitor.com/blog/email-marketing/2019/01/how-wide-are-html-email-designs-today/

3. 使用 Inline style

建议写style的方式是inline stye

<table style="width:100%;margin:0" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td  style="text-align:left;">
        ...
      </td>
      <td style="text-align:left;">
        ...
      </td>
    </tr>
  </table>

4. 不支援的东西一大堆

常见不支援的CSS

1. 圆角(border-radius)不行
2. backgorund-image 在 outlook无法有透明色，背景图的写法，可以参考第六点
3. 没有media query，EDM没有电脑版手机版的差别

其他不支援的

1. <iframe>不支援
2. Javascript不支援，不要想说EDM要来个什麽Fade In的效果

5. 一些可能会遇到的小问题分享

1. 若遇到版面中有额外的小空隙 : 可试着加加看 font-size: 0 ，看看小空隙是否会不见

6. Outlook大魔王

outlook通常像IE一样，会是EDM切版中，最容易遇到到问题的版本，像css hack一样，也有针对Outlook的写法，
以下以background-image为例

<div style="background-color:#eee;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="图片名称.png" color="#eee"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="图片名称.png">
        </td>
    </tr>
  </table>
</div>

记得使用 <!--[if gte mso 9]> 开头，结尾使用 <![endif]-->，就是只有outlook才会出现的结构与样式喔

所以如果特别要写outlook的css

<!--[if gte mso 9]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

• outlook 不认得<div>，不认得div 上的 padding
• 针对outlook 的间距可以试试看语法 leftside间距： mso-table-lspace:0pt; rideside间距 mso-table-rspace:0pt;

6. 其他资源分享

• The complete CSS Support Guide for Email Clients
• How Wide Are HTML Emails Today?
• Outlook Rendering Issues: 6 Tips to Create HTML Email Newsletters in Outlook
• Client-specific CSS Styles