EDM電子郵件營銷已經(jīng)成為網(wǎng)絡(luò)營銷不可以缺少的重要的手段，發(fā)展到現(xiàn)在電子郵件仍然是電子商務(wù)的最佳推廣途徑之一。事實上，最近的一項調(diào)查表明，投資電子郵件營銷每1美元有40美元以上的回報。
垃圾郵件不斷泛濫的今天，你的EDM很可能被受眾視為無用資訊而刪除，甚至被列入黑名單。如何吸引消費者的目光，勾起他們的興趣點變的尤為重要！拋開其他因素，我們首要的任務(wù)是學(xué)會如何建立符合主流電子郵件客戶端（如Out Look、Foxmail、Gmail、Hotmail、Webmail）的標準的EDM。
那么，讓我們開始吧！
1. 使用表格布局
網(wǎng)頁設(shè)計師很清晰，現(xiàn)在網(wǎng)站的最合理、最科學(xué)的布局是用DIV+CSS標準實現(xiàn)，而在EDM電子郵件直投上卻不能用這套標準，因為像Gmail和Outlook 2007這樣的主流客戶端并不支持一些通用的CSS屬性（如float、margin、padding等），這是利用<table>嵌套就是一個快捷的解決方案。
a) 為<table>每一個單元格定義寬度width，而不在<table>上。當(dāng)你同時為<table>, <td> 定義width 和padding時，不同的客戶端會渲染不同的效果，當(dāng)我們只為<td>定義width時，<table>為也為自動計算其寬度。
<table border="0" cellspacing="0" cellpadding="10"> <tbody> <tr> <td width="80"></td> <td width="280"></td> </tr> </tbody></table>
注意，不要偷懶，要把全部的單元格<td>都頂上width，不要奢望在定義一個<td>后其他的會計算width
b) 摒棄float屬性來定義左右顯示的版本，<table>嵌套同樣很輕松的為你做到
c) 給EDM整體加入一個背景顏色，很多的郵件客戶端都忽略<body>定義的背景顏色，這時候你需要在最外層嵌套一個100% width的<table>，通過這個<td>的背景屬性來實現(xiàn)
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td bgcolor="”#000000”">正文代碼</td> </tr> </tbody></table>
當(dāng)然你也可以添加一個圖片作為背景，但是記住不是所有的客戶端都支持背景圖片的定義。
d) 避免在<td>…</td>標簽之前留下不必要的空白空間，因為一些郵件客戶端（Hotmail，Yahoo等）會在這些空白出自動附加padding屬性，版式顯示不必要的間隙。
2. 文字CSS使用標準
我們非常慶幸就文字的而言，許多的電子郵件客戶端基本都本很好的支持文字屬性。
點擊下載完整的“
關(guān)于EDM電子郵件CSS屬性支持對照表”
a) 謹記一個原則，把CSS寫在最近的一個標簽上，而不是<head>或者<body>，也許你會覺得重復(fù)性的工作非常的繁瑣，那么你可以通過“
Premailer”來為你做自動轉(zhuǎn)換。
b) 避免CSS簡寫形式，如：
p { font:bold 1em/1.2em georgia,times,serif;}
應(yīng)該寫成：
p { font-weight: bold; font-size: 1em; line-height: 1.2em; font-family: georgia,times,serif;}
Color屬性的16進制格式也不能縮寫，如：
color: #ff6600 就不能縮寫成 color: #f60
c) 段落間距屬性
測試證明<p>標簽在郵件中是被支持，那么最簡便的方法就是利用<p>標簽來定義段落間的距離，如<p style=”margin: 0 0 20px 0” >；而如果你的電子郵件設(shè)計對尺寸的把握非常精細的話，那么我建議你用<table>的單元格<td>，直接定義間距，如：
<td width="200" style="font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">段落文字</td>
d) 超鏈接
超鏈接的文字的默認顏色一般顯示為藍色及下劃線，要徹底修改重新定義<a>標簽的文字樣式，你需要一下操作：
1. 在<a>定義CSS，如：
<a style="color:#ff00ff">this is a link</a>
2. 在<a>內(nèi)嵌套一個額外的<span>標簽，并且定義其CSS，如：
<a style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
3. 圖片使用標準
圖片的HTML電子郵件設(shè)計的使用已經(jīng)是不可或缺了，而很多郵件客戶端的默認是不被顯示的，考慮到這一點，這里是使用HTML電子郵件中的圖像時，要記住要領(lǐng)：
a) 避免分隔符圖片
如果你使用Photoshop對電子郵件設(shè)計進行切片的時候，往往會產(chǎn)生一些不必要的”spacer.gif”分隔符圖片，這個是會被大多數(shù)的郵件客戶端視為是垃圾郵件，而拉到SPAM
b) 為每一個圖片定義本身確切的尺寸，如：
<img width="100px" height="100px" scr="http://www.mooteam.com/smaple.gif">
這個動作是避免一些郵件客戶端在看到圖片的情況下也正常的看到文字顯示的版式，而不要因為沒有定義圖片尺寸而把顯示打亂
c) 避免使用PNG格式的圖片
d) 為背景圖片添加背景顏色，可以避免在看不到圖片的情況下，盡可能地保持你原本設(shè)計的色塊
e) 別忘了為所有的圖片加上alt屬性，這能在看不到圖片的情況下，保證你的信息也能通過的alt=”描述內(nèi)容”來被受眾閱讀
f) 修復(fù)Hotmail的錯誤顯示
令人費解的在Hotmail客戶端上看到的圖片上下都會出現(xiàn)一定的間隙，針對這個問題我們可以通過以下的技巧的修復(fù)：
img {display:block;}
g) 不要用試圖用float屬性來的定義圖片于與文字的排版方式，請用<table>
4. Video使用標準
在EDM電子郵件中插入視頻，是癡人說夢話？有了HTML5也許你會感到震驚！經(jīng)過測試驗證HTML5的<video>標簽已經(jīng)可以在蘋果系列的郵件客戶端上插播視頻了，你可以試試以下的例子：
<video width="640" height="360" poster="fallback.jpg" controls="controls"> <source src="http://mysite.com/videoname.mp4" type="video/mp4" /> <a ><img src="fallback.jpg" width="640" height="360" /></a></video>
注：對于不支持的<video>標簽的客戶端，我們可以加入一張gif圖片，并賦予連接，讓大多數(shù)用戶能夠通過點擊用瀏覽器觀看視頻，如以上代碼所示：
<a ><img src="fallback.jpg" width="640" height="360" /></a>
5. 手機郵箱注意事項
隨著移動設(shè)備已經(jīng)移動互聯(lián)網(wǎng)的不斷普及，使用移動終端來收發(fā)郵件的用戶必然會不斷的增多，那么設(shè)計EDM電子郵件直投的時候，我們就不得不加入考慮移動終端特有的因素。
a) 為了讓手機終端顯示完全，EDM電子郵件直投設(shè)計時寬度應(yīng)該小于600pix，而且這個寬度也同樣適用的與PC上的不同客戶端的閱讀
b) 很多移動終端（iPhone、Andriod等）的郵件客戶端會自動的調(diào)整的字體大小，我們應(yīng)該根據(jù)具體需要，考慮是否將其關(guān)閉，代碼如下：
-webkit-text-size-adjust: none;
6. 必要的測試過程
當(dāng)所有HTML的編寫完成后，我們必須對它進行嚴謹?shù)臏y試，即便你覺得你編寫的HTML已經(jīng)是符合標準。要知道所有的郵件客戶端都在更新完善，我們不能保證我們的編寫的HTML就是用與現(xiàn)在版本，所以對不同的郵件客戶端進行測試是非常有必要的。
主流的郵件客戶端：
Outlook
Foxmail
iOS設(shè)備
Hotmail
Yahoo! Mail
Gmail
Android
AOL
Thunderbird
http://mooteam.com/archives/edm-design-電子郵件直投-營 轉(zhuǎn)載請注明： 文章來自
MooTeam
