【玩轉前端】如何創建完美的HTML郵件

HTML 5的標籤目前在一部分郵件終端是無法運行的,包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作為如果視頻不被支持的補救方法,你可以提供穩定的備選內容,比如gif 動畫或者一個可以點擊到瀏覽器播放視頻的圖片。

當然,你是否需要將視頻添加到你的郵件裡面,那就是另外一個議題了,如果你的答案是肯定的,你可以使用這些代碼案例。

關於移動端郵件的那些事

移動端有機胺的情況近期顯得比較雜亂了,隨著iPhone,Android的發明和Palm和RIM的改進,認為移動端電子郵件終端不重要的年代一去不復返了。

為了給移動端訂閱用戶良好的體現,我們在編碼的過程中也有幾個關鍵點需要牢記心中。

1、保持寬度小於600像素

受限於郵件客戶端的視窗,這條規則來移動視窗到來之前的年代就很重要。事實上,iphone 的視窗是320像素,Droid是480像素,Blackberry大概360像素。堅持最大600像素寬的設計,能夠讓你的郵件縮小到上面提到的設備上面依然可讀。這個尺寸在桌面端和web端的預覽效果也很好。

2、注意文本尺寸的自動調整

作為一個好的特性,基於webkit郵件客戶端(比如 iPhone, Pre 和 Android) 能夠自動調整文本的大小來提高閱讀性。如果你的測試結果表明這項特點給你帶來的好處是破外了你的設計,你可以通過下面的屬性禁用:

【玩轉前端】如何創建完美的HTML郵件

不要忘記去測試

雖然近幾年郵件客戶端對標準的支持並沒有取得長足的進步,但是某些郵件客戶端的改變卻從未停止(有好有壞),基於 web 的客戶端,如 Yahoo!、hotmail 和 Gmail 在這方面乏善可陳。我看到過無數次可行的設計方案被停止支持,沒有任何解釋。

基於這個原因,你也要對你的郵件設計保持規律的測試。我發現每個月進行一些快速的測試的小技巧,特別基於web的客戶端。好的消息是經過幾次設計和測試,你將會從這些雜亂無章中找到規律。一些潛在的陷阱將變的可以預計,一個對郵箱友好的設計模型也會在你心中成型。


本文參考“新浪UED”:創建堅如磐石的HTML郵件

【玩轉前端】如何創建完美的HTML郵件


分享到:


相關文章: