2009-07-27 66 views
2

我正在嘗試使用DIV而不是表格來構建HTML電子郵件,而且我對CSS還很陌生。使用CSS的HTML電子郵件

我試圖實現看起來是這樣的:

******************* XXXXXXXXXXXX XXXXXXXXXXX 
* image here * XXXXXXXXXXXX XXXXXXXXXXX 
******************* XXXXXXXXXXXX XXXXXXXXXXX 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 

X =某些文本

1圖像+ 5行文字

任何想法的?

+0

每個子部分中的文本是另一個子部分中文本的延續部分嗎?如果是這樣,盒子的填充順序是什麼? (我想象一箇中心盒,一個右上盒和一個底盒)。 – 2009-07-27 19:01:13

+0

思南,他們是子部分 – Atlas 2009-07-27 19:04:08

回答

17

電子郵件是其中的一個地方,無論你有什麼樣的佈局良好實踐的想法應該被拋出窗口。許多電子郵件提供商會過濾掉您輸入的任何CSS規則,因此,如果您絕對需要在電子郵件中使用「複雜」佈局,最好的辦法是堅持使用舊式學校桌,因爲它們會使您距離您的電子郵件最近正確傳遞給所有用戶。

+3

我是CSS合規拉拉隊長/狂熱分子,我不得不同意。 – 2009-07-27 19:06:06

+2

Gmail特別只允許使用style屬性應用的CSS。 – Rafe 2009-07-27 19:19:43

1

電子郵件客戶端的CSS支持不是很標準化。人們普遍接受使用html 4屬性替代HTML電子郵件中的CSS。

4

精心設計的電子郵件是超級棘手。一般來說,你可以假定電子郵件客戶端不會拉入外部鏈接的CSS文件(或者至少不正確),並且他們會對你的HTML進行一些操作(通常只是屬性並添加一些額外的標記)。但是,這不是一個堅持所有最佳實踐的地方,當然也無處可以「學習」良好的標記或CSS設計。

一般來說,HTML電子郵件遵循網頁設計的最壞規則。這兩個大的事情要記住的:

  1. 使用HTML表格進行復雜的佈局(與列的任何東西)
  2. 使用內聯CSS樣式(甚至嵌入CSS樣式 - 這些放在文件的頭部 - - 可能不會在大多數電子郵件客戶端正確地呈現)

它也是一個好主意,把你的客戶拋棄花哨的電子郵件通訊贊成這是一個更容易獲得一個精心設計的純文本電子郵件更廣泛的平臺。引用用於電子郵件訪問的移動設備的興​​起是這樣做的主要原因,儘管對最終用戶的好處是遙遠的。

This SitePoint article總結的方法很好。

0

作爲大型廣告公司的員工,他爲大名鼎鼎的客戶做了大量的html電子郵件,我會說他們很混亂!

使用嵌套表格進行佈局。我甚至使用白色(或電子郵件背景色)1x1像素間隔圖像幾乎所有的空白和東西(因爲填充和邊距不會總是正常工作。)

就像有些人以前說過的,內聯樣式是唯一可以依賴的樣式,但即使對於這些樣式,'背景圖片'也會被忽略。

只要客戶端沒有請求任何形式的動態文本,我也會在我的大部分文本中使用圖像,以避免任何字體或大小問題。

地獄,如果可以的話,就把這些東西剪成幾個大的圖像發送出去。

1

每個人的反應都很好。 Campaign Monitor和http://www.email-standards.org是他們現在最好的資源。

但是,當我做第一個html電子郵件時,一位開發人員告訴我 - 「代碼就像它的1997年」。

相關問題