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: