你該了解 EDM 設計的一些眉角

如何製作 EDM 電子報? EDM 設計眉角報你知,輕鬆設計出第一份電子報

公司推出新活動方案請你設計 EDM 不知道該如何開始嗎?

寄出的 EDM 破圖跑板又找不到原因嗎?

本文不藏私的分享設計 EDM 的一些小撇步,讓你第一次設計 EDM 就上手!

首先,我們基本列出幾個項目:

  1. EDM 格式怎麼設定較舒適
  2. EDM的基本排版公式
  3. 製作 EDM 該注意的事項
  4. EDM 怎麼發送才正確

EDM 格式怎麼設定較舒適

現在的多數人的使用習慣都已轉為手機,考量閱讀的舒適性與內容能清楚的傳達,EDM 最好的寬度是不要超過 800 px;而整體長度雖然無限制,但為避免客戶視覺疲乏或找不到重點,會建議 EDM 的長度也不要過於冗長;若您的內容是屬於文章形式的分享,或是主題眾多,較難克服長度問題,則記得在排版上加點巧思,讓客戶在收到 EDM 時至少保有舒適的閱讀感受;好的閱讀感受有助於客戶閱讀完整份 EDM。


EDM 的基本排版公式

EDM 內文的形式百百種,這其實很考驗設計者自身排版美感的運用,但還是能整理出一個泛用的公式。

一般我們可以區分為:

  1. Logo
  2. 主標、副標
  3. 主題和主題內文
  4. 結尾資訊

用這個公式排列出來的樣式是最標準且泛用的,這是很典型的呈現樣式,若是在 EDM 中想加入社群媒體的曝光,那麼可以選擇跟 LOGO 置於同行,或加入於最底下的結尾資訊中。

Clodmax 匯智電子報樣式參考

Clodmax 匯智電子報樣式參考

此外,排版最好是以圖文分離的方式去製作,這裡的圖文分離意指整頁 EDM 請不要都使用圖片的形式製作,適時地加入幾行字和內文說明除了能減少列入垃圾郵件的風險,也能第一時間讓客戶等待讀圖的時間先看到文字重點,畢竟任何圖檔都是需要讀取時間的。


 製作 EDM 該注意的事項

有了前面的概念後,接下來就進入開始製作 EDM 了,設計 !

EDM 最好呈現的方式是只寫 html 和部分 CSS!!

為什麼這麼說呢?這是因為每個客戶使用的郵件服務都不同,版本也參差不一,為了要盡可能降低破圖和跑版的風險,最安全穩建的做法還是會以 html 搭配少許的 css 來製作。

考量收件端的郵件服務仍可能有不支援 css 的情況,所以在 css 的使用上還是需小心。

這裡有個小工具能分享給大家,這個網站有列出 css 和收件端的支援程度可提供參考:https://www.campaignmonitor.com/css/selectors/class/

另外,如果你想在 EDM 中寫出超炫砲動畫或是玲瑯滿目的動態程式,那麼請不要這樣做!同樣的,必須考量到客戶收信端的問題,一般如果在 EDM 中想要有動態的圖,我們會建議製成 gif 置入。

總結,製作 EDM 時可運用下列這幾項規則:

  1. 使用最單純的 html 和 css 製作
  2. 使用 <table> 表格去做包覆切版
  3. 圖片基本支援 jpg、png、gif
  4. Style 請寫在你想直接呈現的 html 樣式框架中

例如:

<table>
    <tr>
        <td style="font-family: 微軟正黑體; color: # 0A0A0A">
            我字型是微軟正黑體,顏色是黑色
        </td>
    </tr>
</table>

EDM 怎麼發送才正確

EDM 設計完後接下來就是把這封 EDM 發出,讓客戶能順利收到;或許有人會想說用平常的郵件系統來發就好了,這個不行唷!

因為 EDM 是屬於一次發送量較大的發信模式,若是使用一般的商務郵件系統來發送,最明顯會產生的問題就是讓公司的商務郵件系統 IP 被列入黑名單,導致未來公司所有人在發送信件時,很容易被其他收信方列為拒絕,這對公司未來的郵件服務使用是影響很大的;若您公司使用的郵件服務是跟郵件服務商租賃的,那麼您的大量發信行為也會直接被擋住。

正確的做法是使用專門提供給 EDM 行銷使用的電子報系統,此類系統是專門開發來提供給發送行銷 EDM 使用的服務,可以支應大量一次性的發送 EDM 電子報之外,系統內也會提供對行銷人來說很重要的數據追蹤功能,包含像是:開信率、EDM 內容熱點分析、內容點擊率等等,這樣才能針對發出去的 EDM 做分析評估、未來可以怎麼優化調整的參考,也有數據資料能回報給老闆,了解每一次行銷的成果。

EDM 如何設計得好是靠經驗和累積的美感,倘若我們能一開始掌握到設計的規範和一點技巧,就能少走一點冤枉路,有效的去優化和行銷你的 EDM,是不是更能事半功倍了呢!


歡迎轉載!請見:轉載原則

Photo by Maxim Ilyahov from Unsplash