EDM 的 CSS inline 技巧

之前幫客戶做EDM (或是客戶自己做EDM)

總是遇到一個問題

客人總是想做 html 的 EDM





因為花花綠綠的看起來很花俏

但是 CSS 很難控制 (在讀信程式裡面)

現在 web mail 的種類又很多

然後 web mail 又在不同瀏覽器裡面運作

一整個暴走的組合

最神奇的是

我們把EDM當網頁一樣寫

做成 html 寄出去以後

很多 css 效果都出不來

明明就沒寫錯啊

弄成網頁放主機上看 都正常

弄成 Email 寄出去 就爛掉

後來上網查了一下

才發現

Email 的 css 要寫成 inline 的模式

也就是你不能在 html 裡面

放一個遠端的 css 連結

讀信程式是不會鳥你的

所以你得把所有 html 的 css 敘述全部改成 inline

好 問題來了

css 全部改成 inline

做網頁設計的妹妹應該今天就會提辭職回家了

因為 css 改 inline 真的是太困難了

還好有人已經寫好工具了

你只要上網查 css inline online 之類的關鍵字

就會找到可以幫你做這件事情的線上轉換工具

這邊提供一個路老闆找到的 inline 轉換網站

http://templates.mailchimp.com/resources/inline-css/

只要把你要轉換的 html 貼上去

他就會自動幫你的 css 都變成 inline 的模式

然後再把 已經轉成 inline css 的 html 寄出去

就會看到正常的 EDM 了

不過 每個 email 程式對 html 解讀的能力都不同

建議還是用圖片的方式去寄 email

頂多使用簡單的 連結就好

不要大量的使用 css

不然不預期的現象會非常多 (你會很難對老闆解釋 XD)