html編寫(xiě)edm時(shí)注意事項(xiàng)小結(jié)(一般發(fā)郵件需要注意的地方)

格式編碼
1、頁(yè)面寬度請(qǐng)?jiān)O(shè)定在600到800px以內(nèi),長(zhǎng)度1024px以內(nèi)。
2、HTML編碼請(qǐng)使用utf-8。
3、HTML代碼在15KB以內(nèi)。(各個(gè)郵箱的收件標(biāo)準(zhǔn)不一樣,如果超出15KB您的郵件很有可能會(huì)進(jìn)入垃圾箱)
4、請(qǐng)使用table表格來(lái)布局。同一個(gè)<td>里只放一張圖片,如<td><img src="photo.jpg" /></td>。所有的圖片都要定義寬高。同一段文字放在同一<td>里。
5、如果需要郵件居中顯示,請(qǐng)?jiān)趖able里設(shè)定align="center"。
6、不可將word類文件直接轉(zhuǎn)換為HTML格式,否則會(huì)造成編碼不規(guī)范。
7、不要使用外鏈的css樣式定義文字和圖片(外鏈的css樣式在郵件里將不能被讀取,所以發(fā)送出去的郵件因?yàn)闆](méi)有鏈接到樣式,將會(huì)使你的郵件內(nèi)容樣式丟失),正確的寫(xiě)法:<td style="font-family:arial;font-size:12px;color:black">文字</td>。
8、不使用flash、Java、JavaScript、frames、iframe、activeX以及DHTML,如果頁(yè)面中的圖片一定要?jiǎng)討B(tài)的,請(qǐng)將flash文件轉(zhuǎn)換成gif動(dòng)畫(huà)使用,但在outlook2007里,gif將不能正常顯示,因?yàn)閛utlook2007限制gif動(dòng)畫(huà)。
9、不要使用<table></table>以外的body、meta和html之類的標(biāo)簽,部分郵箱系統(tǒng)會(huì)把這些過(guò)濾掉。
10、背景圖片代碼寫(xiě)法如下:<table background="background.gif" cellspacing="0" cellpadding="0"></table>,但請(qǐng)注意,outlook對(duì)背景圖片不識(shí)別。
11、不要出現(xiàn)"onmouseover"、"onmouseout",即使在<td>里設(shè)置了,發(fā)送到郵箱后也將被過(guò)濾,無(wú)法顯示設(shè)定鼠標(biāo)經(jīng)過(guò)所顯示的內(nèi)容。
12、font-family屬性不能為空,否則會(huì)被QQ屏蔽為垃圾郵件。
13、若郵件模板內(nèi)側(cè)邊或者上下有空白間距,不要用 padding,必須得用標(biāo)準(zhǔn)的 td 來(lái)設(shè)定空白間距,否則會(huì)導(dǎo)致各個(gè)郵箱解析不同。
14、在 yahoo 郵箱里定義 line-height 的注意事項(xiàng):需在塊級(jí)元素里定義 line-height。如果 td 里有 p 標(biāo)簽,則 line-height 也必須在 p 中定義。無(wú)論是 td 還是 p,如果有超鏈接,則都必須在 a 標(biāo)簽里定義 line-height。如果只是在 td 或者 p 里面定義 line-height 的話,那 yahoo 郵箱將無(wú)法識(shí)別 a 里面的行高。
15、在有背景圖的地方設(shè)置background-color以防背景圖不顯示時(shí)可以較美觀的顯示
16、少用float, margin,padding. 絕對(duì)定位不能用,清除浮動(dòng)用<table style="clear:both"></table>
文字
1、郵件主題控制在18個(gè)字以內(nèi),避免使用特殊符號(hào),容易產(chǎn)生亂碼。
2、郵件主題和內(nèi)容都不要加入帶有網(wǎng)站地址的信息,比如“xxx.com祝您新年好”。如果客戶的品牌知名度比較高,主題可加入公司的名稱,比如:“NIKE運(yùn)動(dòng)時(shí)尚”。
3、文字內(nèi)容,版面盡量簡(jiǎn)潔,突出主題,以達(dá)到更高的點(diǎn)擊率。
4、不使用類似如下敏感及帶促銷(xiāo)類的文字:免費(fèi)、優(yōu)惠、特惠、特價(jià)、低價(jià)、便宜、廉價(jià)、視頻、賺錢(qián)、群發(fā)、發(fā)財(cái)、致富、代開(kāi)、薪水、交友、支付、商機(jī)、法寶、寶典、秘密、情報(bào)、機(jī)密、保密、絕密、神秘、秘訣等。如果一定需要,請(qǐng)把敏感字做成圖片。
5、如果發(fā)送超過(guò)20萬(wàn)封,主題內(nèi)容要更換,發(fā)送超過(guò)200萬(wàn)封,要考慮重新設(shè)計(jì)。
6、文字應(yīng)盡量定義字體的樣式,每個(gè)郵箱的默認(rèn)字體樣式不同,為了達(dá)到您想要的效果,字體樣式一定要定義完整。
圖片
1、盡量使用圖片,以避免文字在各個(gè)主流郵箱中的顯示有所不同。例如QQ郵箱,如果未在代碼中設(shè)置,郵件中的文字不能自動(dòng)換行,gmail郵箱郵件內(nèi)容的字體會(huì)自動(dòng)放大,與原來(lái)設(shè)定的字符大小不一致。
2、整頁(yè)圖片控制在8張以內(nèi),每張圖片最大不能超過(guò)15KB。
3、圖片地址請(qǐng)不要寫(xiě)成本地路徑,例如:<img src="images/aa.jpg" />,(這樣發(fā)送出去的郵件,收件人將沒(méi)辦法看到您的圖片)。
4、圖片名稱不能含有ad字符,否則圖片上傳后會(huì)顯示成“被過(guò)濾廣告”。
5、如果整個(gè)郵件模板只有一張圖,一定要裁成2-3張小圖,并適當(dāng)保留一些文字。
6、Gmail、qq郵箱的要求又改變,圖片的屬性一定要定義完整,例如 <img src="images/1.jpg" style="vertical-align:top;" height="30" width="100" alt="" /> 這里的 style="vertical-align:top;" 一定要定義,否則圖片之間會(huì)有縫隙、變形等顯示異常的情況。
7、在 img 標(biāo)簽里加上 alt 屬性,這樣用戶在收到郵件的時(shí)候,即使有些郵箱將圖片隱藏掉,也可以看到 alt 里面的內(nèi)容。如:<img src="images/1.jpg" style="vertical-align:top;" height="30" width="100" alt="顯示內(nèi)容" />,讓客戶了解到郵件內(nèi)容并吸引客戶點(diǎn)擊顯示圖片。
鏈接
1、鏈接數(shù)量不能超過(guò)10個(gè),如果所有圖片的鏈接地址一樣,請(qǐng)將所有的小圖合并成一張大圖。
2、鏈接請(qǐng)寫(xiě)成絕對(duì)地址。(以確保收信人在點(diǎn)擊鏈接時(shí)能夠正常瀏覽您的內(nèi)容)。
3、鏈接地址的長(zhǎng)度不能超過(guò)255個(gè)字符,會(huì)導(dǎo)致無(wú)法追蹤或鏈接錯(cuò)誤。
4、不要使用地圖功能(map)鏈接圖片,此功能會(huì)使郵件被多數(shù)郵箱劃分為垃圾郵件。
5、為避免用戶收到的郵件圖片無(wú)法瀏覽,請(qǐng)制作一份和郵件內(nèi)容一樣的web頁(yè)面,然后在郵件頂部注明:“如果您無(wú)法查看郵件內(nèi)容,請(qǐng)點(diǎn)擊這里”,鏈接到訪友同樣內(nèi)容的web頁(yè)面。
6、文字中出現(xiàn)網(wǎng)站地址鏈接被屏蔽為垃圾郵件的風(fēng)險(xiǎn)是極高的,例如:http://xxx.com此類鏈接,建議寫(xiě)成“XXX公司”文字加鏈接,或是將網(wǎng)址做成圖片加鏈接。
7、鏈接里面最好不要使用特殊符號(hào),避免郵箱解析錯(cuò)誤。
8、鏈接代碼應(yīng)盡量簡(jiǎn)短,代碼太長(zhǎng)會(huì)增加模板大小,進(jìn)而會(huì)影響郵件發(fā)送效果。
outlook 規(guī)則
1、<col>標(biāo)簽不能被識(shí)別,如果要定義幾個(gè) td 相同的寬度,可以把具體的寬度寫(xiě)在具體的 td 里。例如<td width=""></td>。
2、內(nèi)聯(lián)元素的 padding 無(wú)法被識(shí)別,例如<a href="#" style="padding-left:40px;"></a>,a 標(biāo)簽里面的內(nèi)容并不會(huì)距離左邊40px??梢栽?td 里定義 padding。
3、內(nèi)聯(lián)元素的 vertical-align 不能被識(shí)別,例如<img src="1.jpg" style="vertical-align:bottom" />,此圖片并不會(huì)和相同行的元素底對(duì)齊,可以寫(xiě)成<td valign="bottom"><img src="1.jpg" /></td> 即可。
4、如果 td 里包含一個(gè) table,那么定義在子 table 里的標(biāo)簽的樣式只會(huì)正確顯示定義在子 table 里的樣式,在父 table 的樣式是不能正確顯示的。注意:如果在 table 里有 a 標(biāo)簽的話,則 a 標(biāo)簽中的內(nèi)容的顏色樣式要定義在 a 標(biāo)簽內(nèi),定義在父 td 里或所在的 table 里都是無(wú)效的。
5、如果 td 和 td 之間有間隔,使用<td style="border-bottom:10px solid #fff"></td>,這樣寫(xiě)的話 td 之間是不會(huì)有間隔的。使用<td style="margin-bottom: 10px"></td>也是不會(huì)有空格的。如果 td 之間有間隙,必須用<td></td><td height="10px"> </td><td></td>來(lái)隔開(kāi)。但是如果是 table,則<table style="border-top:10px solid #ffffff; border-bottom:20px solid #ffffff"></table>里面的內(nèi)容會(huì)在上下有空行。
6、p 標(biāo)簽的 width 是不認(rèn)識(shí)的,例如<p style=” width:320px” ></p>,則 p 標(biāo)簽中的內(nèi)容不會(huì)在 320px 處自動(dòng)換行。只有<td>設(shè)置了寬度,內(nèi)容才會(huì)在寬度限制處換行。
7、如果要使用<P>標(biāo)簽要考慮到<P>標(biāo)簽本身自帶的上下行之間的行高。
8、在<td>里設(shè)置 margin 是無(wú)效的,不論是 margin-left、margin-right、margin-top 或者 margin-boottom 都沒(méi)有效果。
9、當(dāng)設(shè)置<img align="left" />或<img align="right" />時(shí),圖片會(huì)脫離文檔流,在其父元素設(shè)置了 margin 或 padding 的話,都無(wú)法使其下移,左移或右移。
10、在 outlook 中,如果嵌套的圖片太長(zhǎng),會(huì)導(dǎo)致顯示不正常,可將圖片裁切成幾張較短的小圖,再進(jìn)行布局。
還有你就是在發(fā)送郵件模板時(shí),盡量在格式中 粘貼 發(fā)送 源代碼,轉(zhuǎn)發(fā)次數(shù)過(guò)多也可能丟掉樣式哦!
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書(shū)以及編程練習(xí),希望對(duì)你有用2024-11-02web開(kāi)發(fā)中的長(zhǎng)度單位小結(jié)
這篇文章主要介紹了web開(kāi)發(fā)中的長(zhǎng)度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06網(wǎng)頁(yè)前端開(kāi)發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁(yè)開(kāi)發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來(lái)做項(xiàng)目開(kāi)發(fā)使用是一件很重要的事情!!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21html,css,javascript是怎樣變成頁(yè)面的
瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁(yè)面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁(yè)中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫(xiě),用以滿足跨語(yǔ)言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-12-02告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27