[教學] 用 Outlook 做 EDM 的微制霸攻略

提供寫好的 HTML 樣版，幫助設計師從萬惡 Outlook 中脫身而出。

Seal-被半導體業耽誤的產品設計師

6 min readSep 16, 2021

身為設計師，你為你的產品做過EDM嗎？

各種設計感十足的EDM，來自於Dribbble, Zepline, Invision

EDM 是產品團隊用來傳遞公司品牌與價值的一環，市面上也有許多解決方案與服務協助快速製作EDM：他們提供後台，而設計師只需將設計好的文案與圖片排版，按下發布。噹啦～精美的EDM就送到客戶手中了！

不過我並不是那幸運的一群 (哭)…因為我用Outlook做 EDM…

有哪些痛點？

身為in-house設計師，企業端的信件系統多屬於桌面型應用並建置於公司內網，並且使用微軟(Microsoft) Office系列。在製作EDM的難處會有:

雖然 Outlook 支援html，但建議以Table, tr, td去排版定位，才不會跑版。
CSS目前只能採用CSS2 or CSS3的寫法，一些CSS樣式無法被實現，如mark, shadow、border-radius 。且CSS須以inline的寫法寫入。
現在已不時興出現底線的連結，但在Outlook你無論用什麼方式隱藏，他都還是會出現那條底線。
若你有很精緻的細節想要呈現，建議可以整張EDM設計好後，以切圖的方式塞進Table中，但後續若要修改維護上會比較麻煩，不像直接更改html內容那樣簡單。

所以要在 Outlook 製作精美的 EDM 得經過不斷的 Try and Wrong, 而所幸我們先嘗試過了，並將成果分享給有同樣困擾的你！

事前準備

你需要有HTML, CSS有基礎知識，了解html, CSS各自屬性的寫法。

步驟一

請先登入個人Codepen，並另開視窗開啟這個連結，將html, CSS拷貝，貼至個人Codepen對應的區塊中(Template中部分圖片與文案來自Dribbble, 僅作為Template案例分享之用，請勿用於商業用途)。

我們在設計時已針對不同的內容類型給予相對應的資訊結構。在檔案內已經有設定多個Module，你可以依據自己的需求做排列組合。

但在 Header 與 Footer 有固定模式。如Header(Class name: introduction)可以自行選擇要放產品 Logo 或是產品名稱, Footer 的部分則設計有 Contact Window 與 Sponsor 等補充資訊。Content就由你自由組合囉！

Module 名稱對照列表

1.主視覺圖片：class=”cover”
2.圖片描述：class=”caption”
3.段落: class=”paragraph”
4.具有bullet的段落：class=”bullet” ，
5.bullet具有連結：class=”bullet bullet — compact”。
6.按鈕CTA: class=”CTA”。
7.分隔線：class=”divider”
8.偽分隔線：class=”divider divider — transparent”，為何說是偽分隔線呢？因為他其實是分隔線的變形，只是透過寫法讓線不見，但可以做為適當空白之使用。

步驟二

Codepen 可以很方便地讓設計師所見即所得，因此在編輯時我會使用Codepen 直接確認產出是我要的效果與資訊。但前面有提到 Outlook 只能使用 Inline CSS，這時就需要 Postdrop 來幫忙將原先分離的 html 與 CSS 整合在一起。

同樣請註冊 Postdrop，重複前面的步驟，將Codepen上的 Html 與 CSS貼進Postdrop 相對應的區域裡。

你可以看見雖然 Postdrop 原本也是秉持 html 與 CSS 分開管理，但請點右上方的 Download/Export，會出現彈窗，這時 postdrop 已經將CSS 以inline的方式整進 html中，這正是我們要的結果。

這時請點下方的 Download，將該 html下載下來。

補充說明：

看到這兒你應該想問，既然Codepen 與 Postdrop 都有 html / CSS 分開編輯的介面，那為何不直接以 Postdrop 編輯再直接下載該檔案就好?
原因在於 Postdrop 若是免費版只能使用五個專案，且若要分享給其他設計師參考程式碼也不如 Codepen 方便，所以會採用分段採用不同 Tool 的方式。