2012-10-31 62 views
2

我目前發出多個桌面版本通訊與一個託管的移動版本有一個「視圖爲移動」鏈接,但我試圖探索用戶顯示移動版本權利,當用戶打開電子郵件。響應電子郵件與內部CSS

我一直使用內部樣式表

@media screen and (max-width : 320px), screen and (max-device-width: 320px) 

但根據http://www.campaignmonitor.com/css/不是所有的ESP允許或讀取內部樣式表下面的代碼的變化了解響應的設計。簡而言之,使用上述代碼是否有一種很好的方法來使用電子郵件,或者由於缺乏支持而不可行?

回答

0

我同意安迪在'電子郵件客戶端不好支持CSS'。這是一個普遍的規則,並且已經有很長的歷史了。

這就是說 - 當我們談論移動電子郵件客戶端時,沒有任何運行MS Outlook '95的電話,如果您知道我的意思!

看看那裏的電子郵件功能的智能手機設備的市場細分,你會看到支持的比例高於桌面世界。

在我們公司,我們的每週電子郵件的讀者人數超過50%在iPhone獨自。其中包括桌面版Gmail,Hotmail,Outlook等。我們看到移動應用的持續發展趨勢成爲我們關注的焦點,桌面系統正在成爲第二個小提琴。

我們並沒有耗盡和構建移動網站,但我們正在剪裁我們的電子郵件以便移動設備。例如:Everguide Weekly Guide Email

因此,關於您的CSS - 目前事實上非常難以確保正確讀取和解釋媒體查詢。我們發現Android不喜歡像iOS一樣玩球,但是通過一些很好的調整和代碼攻擊,我們已經到了那裏。

下面是我們的一個交易電子郵件模板的示例 - 它的上限爲520px寬,但在不同設備上時會縮放到設備寬度等。

需要測試和耐心才能獲得正確的結果。對於我們的下一個項目,我將從頭開始使用Campaign Monitor中的這個新指南:Campaign Monitor's guide to Responsive Email Design

我會一點一點地構建它,使用adobe shadow(最近我已經重新命名了),以及各種on-屏幕模擬器,以確保代碼真正響應每一步。

如果我是你的話,請先確定你自己的'樣板',然後保存,然後將所有未來的電子郵件設計關閉此模板。

我專門研究這一點 - 目前還沒有可靠的方法。

祝你好運!

0

與創建響應電子郵件的問題是,很多客戶只是忽略的風格標籤,所以沒有辦法建立真正響應電子郵件...

但還有一招... ;)

您可以使用移動優先方式構建電子郵件,因此基本html是移動版本。 如果你以某種方式創建媒體查詢,他們「重新創建」了原始桌面版本,那麼你有一個很好的解決方案... 因此,如果客戶端忽略媒體查詢,那麼它將顯示移動版本。

我發現了一個偉大的模板什麼,我提到的工作方式,你可以在這裏找到: http://internations.github.io/antwort/