EDM制作要點之樣式書寫
EDM的樣式書寫在網絡營銷中也有很多讓人吃驚的地方。
屬性的支持
EDM對CSS支持的匱乏是令人震驚的，普遍支持的幾乎就剩支持文字、背景顏色相關的屬性，我們可以在The Ultimate Guide to CSS看到具體支持情況
*Gmail對所有的style標簽都不支持
*稍微高級的選擇器Yahoo和Gmail普遍不支持，這個對於針對國內市場的同學還能接受國際市場的就悲劇了
*文字相關的CSS2的基本都支持，但是font-size、font-family基本各個客戶端都有默認值，保險起見，寫上自己的；text-indent只對塊元素生效，基本使用td的padding可以解決
*background支持比較好的就是color，不要為EDM添加背景圖片，多數郵箱不支持
*box相關的border的支持不錯，height和width也基本可以，padding和margin的支持並不盡如人意，一個好的建議是不使用margin，主要靠空的、有width和height的td與其padding解決間距問題
*位置、顯示相關的基本EDM很少設計，不要使用float、position屬性即可
如果想寫出在各個郵箱上看起來都不錯的郵件，能用的CSS極其有限，也許看到這裏就能明白為什麽很多EDM的代碼看起來很挫，但是這還沒完，套用美劇中常出現的“It's just the beginning”
繼承與簡寫
在寫頁面的時候利用CSS的繼承和簡寫會為我們帶來很多便利，但是到了EDM，一切都要NO！
遇到這些問題的時候，建議直接找负责電郵發送服務的email marketing solution解決。
首先是繼承，其實繼承規則依舊有效，但是多數郵箱都會有一套自己的規則，比如line-height，如果我們的元素沒有設置，它會以內聯樣式的形式自動添加，這就造成我們不能輕易依賴繼承規則，所有幾乎有問題的td都要寫
style="color:#333;font-size:12px;font-family:Arial;line-height:1.5;"
然後是簡寫問題
padding:4px;
border:solid 1px #999;
類似的代碼很常見，但是鑒於EDM的特殊性，建議大家不要這麽寫，color的代碼也要寫成六位，而不是簡寫為3位
padding-top:4px;
padding-...
border-width:1px;
border-style:style;
border-color:#999999;
元素的特殊性
*table
上面有提到colspan、rowspan屬性並不能很好的得到支持，盡量使用table嵌套解決此類問題
所有的table一定要寫的這幾個屬性cellpadding、cellspacing、border，因為不同的瀏覽器、郵箱對此的默認值不同，寫成我們希望的
table使用border的時候添加border-collapse的屬性值為collapse
使用bgcolor定義table的背景顏色
td的內容默認是水平左對齊、垂直居中對齊
td的屬性十分豐富，對其、尺寸、背景
*img
做好圖片默認不被加載的預期，Gmail非通訊錄郵箱的郵件圖片默認都不加載，所以要寫上width、height與alt屬性
僅包含圖片的td把line-height設置為0，否則會有間隙，在圖片並列的時候尤為明顯，很多人也建議設置樣式display:block，雖然一樣能實現，但是不推薦
很多時候郵箱會為圖片默認加上邊框，確認不需要的話將其border屬性設置為0
*p
少用p標簽，hotmail會先過濾掉p標簽的margin然後再加上hotmail系統默認設置的值；qqmail會給p設定壹個line-height值
DOCTYPE
如果一定要使用完整的html（其實這是有用的，尤其是對於響應式的EDM），盡量使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
電話: (852) 3959 3330
電郵: Sales@eDM-EmailMarketing.com
地址: 香港九龍長沙灣長裕街10號億京廣場二期27樓A10室
原文見： -EDM制作要點之樣式書寫 | 電郵推廣軟件 | Email Marketing Solutions | 電郵發送系統 | 電郵營銷服務 | eDM Email Marketing Software
電郵推廣軟件 | 電郵營銷系統 | Email Marketing Software |
EDM對CSS支持的匱乏是令人震驚的，普遍支持的幾乎就剩支持文字、背景顏色相關的屬性，我們可以在The Ultimate Guide to CSS看到具體支持情況
*Gmail對所有的style標簽都不支持
*稍微高級的選擇器Yahoo和Gmail普遍不支持，這個對於針對國內市場的同學還能接受國際市場的就悲劇了
*文字相關的CSS2的基本都支持，但是font-size、font-family基本各個客戶端都有默認值，保險起見，寫上自己的；text-indent只對塊元素生效，基本使用td的padding可以解決
*background支持比較好的就是color，不要為EDM添加背景圖片，多數郵箱不支持
*box相關的border的支持不錯，height和width也基本可以，padding和margin的支持並不盡如人意，一個好的建議是不使用margin，主要靠空的、有width和height的td與其padding解決間距問題
*位置、顯示相關的基本EDM很少設計，不要使用float、position屬性即可
如果想寫出在各個郵箱上看起來都不錯的郵件，能用的CSS極其有限，也許看到這裏就能明白為什麽很多EDM的代碼看起來很挫，但是這還沒完，套用美劇中常出現的“It's just the beginning”
繼承與簡寫
在寫頁面的時候利用CSS的繼承和簡寫會為我們帶來很多便利，但是到了EDM，一切都要NO！
遇到這些問題的時候，建議直接找负责電郵發送服務的email marketing solution解決。
首先是繼承，其實繼承規則依舊有效，但是多數郵箱都會有一套自己的規則，比如line-height，如果我們的元素沒有設置，它會以內聯樣式的形式自動添加，這就造成我們不能輕易依賴繼承規則，所有幾乎有問題的td都要寫
style="color:#333;font-size:12px;font-family:Arial;line-height:1.5;"
然後是簡寫問題
padding:4px;
border:solid 1px #999;
類似的代碼很常見，但是鑒於EDM的特殊性，建議大家不要這麽寫，color的代碼也要寫成六位，而不是簡寫為3位
padding-top:4px;
padding-...
border-width:1px;
border-style:style;
border-color:#999999;
元素的特殊性
*table
上面有提到colspan、rowspan屬性並不能很好的得到支持，盡量使用table嵌套解決此類問題
所有的table一定要寫的這幾個屬性cellpadding、cellspacing、border，因為不同的瀏覽器、郵箱對此的默認值不同，寫成我們希望的
table使用border的時候添加border-collapse的屬性值為collapse
使用bgcolor定義table的背景顏色
td的內容默認是水平左對齊、垂直居中對齊
td的屬性十分豐富，對其、尺寸、背景
*img
做好圖片默認不被加載的預期，Gmail非通訊錄郵箱的郵件圖片默認都不加載，所以要寫上width、height與alt屬性
僅包含圖片的td把line-height設置為0，否則會有間隙，在圖片並列的時候尤為明顯，很多人也建議設置樣式display:block，雖然一樣能實現，但是不推薦
很多時候郵箱會為圖片默認加上邊框，確認不需要的話將其border屬性設置為0
*p
少用p標簽，hotmail會先過濾掉p標簽的margin然後再加上hotmail系統默認設置的值；qqmail會給p設定壹個line-height值
DOCTYPE
如果一定要使用完整的html（其實這是有用的，尤其是對於響應式的EDM），盡量使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
電話: (852) 3959 3330
電郵: Sales@eDM-EmailMarketing.com
地址: 香港九龍長沙灣長裕街10號億京廣場二期27樓A10室
原文見： -EDM制作要點之樣式書寫 | 電郵推廣軟件 | Email Marketing Solutions | 電郵發送系統 | 電郵營銷服務 | eDM Email Marketing Software
電郵推廣軟件 | 電郵營銷系統 | Email Marketing Software |
EDM制作要點之樣式書寫
Reviewed by EDM資訊
on
5/13/2016
Rating:
Reviewed by EDM資訊
on
5/13/2016
Rating:
