EDM是營(yíng)銷過程中比較重要的一種方式,而且在很多軟件系統(tǒng)中,也經(jīng)常會(huì)與用戶進(jìn)行電子郵件(Email)的溝通過程。本文檔定義了電子郵件(Email)編碼規(guī)范,便于前端開發(fā)工程師為郵件編寫HTML模板的時(shí)候使用。
因?yàn)殡娮余]件的展現(xiàn)方式與一般Web頁(yè)面不同,Web頁(yè)面一般使用的是瀏覽器來進(jìn)行渲染,而電子郵件多使用的是郵件客戶端,如:Outlook、Foxmail、手機(jī)客戶端APP等。所以,電子郵件要適配這些終端的渲染方式,因此標(biāo)準(zhǔn)就與我們之前編寫的《Web前端開發(fā)規(guī)范手冊(cè)》有所不同。
1 、使用<table>進(jìn)行布局
因?yàn)楹芏嚯娮余]件客戶端對(duì)CSS的支持都不是很好,而且對(duì)<p>和<div>標(biāo)簽支持比較差。如:在Outlook 2007/2013下,就不支持<p>和<div>使用padding和width。所以任何排版布局,都必須采用<table>的方式。
注意:td盡量定義合適的寬度。
2、不能使用CSS浮動(dòng)
css樣式不能使用嵌入和外聯(lián)方式,一定要使用內(nèi)聯(lián)方式。不論是float屬性還是清除浮動(dòng)的clear都不能使用。因?yàn)樵贠utlook 2007/2013下,不支持clear、float、left、right、top、bottom等標(biāo)簽。所以像:float:left、clear:both都不能使用。
3、不能使用css shorthand(屬性簡(jiǎn)寫)
我們常常會(huì)在CSS的編碼中如此書寫:<p style=”font: bold 12px”>內(nèi)容</p>,但是在為電子郵件編寫模板的時(shí)候,不能使用屬性簡(jiǎn)寫。要拆分成:<td style=”font-size: 12px; font-weight: bold;”>內(nèi)容</td>這樣的寫法。
在一些電子郵件客戶端,對(duì)塊級(jí)元素的支持不好,如:p、div、h1~h6等都不建議使用,否則將可能對(duì)排版效果有著嚴(yán)重的影響。
圖片是郵件模板排版的重要組成部分,很多郵件中的模板都會(huì)被郵件系統(tǒng)過濾,因此在排版之前就要考慮到如果圖片無法顯示,也可以讓用戶能夠正?吹洁]件排版和正常的布局。不能因?yàn)閳D片的缺失,造成整體排版的變形。因此與幾個(gè)重要的元素必須體現(xiàn):
- 必須設(shè)置width和height
- 增加必要的alt
- 不能使用.png格式圖片,而是使用gif和jpg格式圖片
- 設(shè)置border=”0”
- 設(shè)置display: block
- 在Outlook 2007/2013下不支持背景圖片,即:background-image
- 圖片鏈接必須是絕對(duì)路徑,不能是相對(duì)路徑
6、不能使用JavaScript
電子郵件客戶端對(duì)flash、JavaScript支持都不好,甚至動(dòng)態(tài)的gif也是不安全的。所以不建議在郵件模板中使用這些內(nèi)容。
還有一些無法歸類的問題,這里也列出來:
- 不要使用XHTML,請(qǐng)使用HTML
- Doctype不是必須的
- 不能使用負(fù)邊距,如:margin-left: -20px
- 換行多用<br>,盡量不用<p>
- 最佳寬度為550~600px
- 不要使用postion