EDM 設計的重點不是把信做得像網頁，而是讓同一封信在不同郵件程式、手機與深色模式下都看得懂、點得到。實務上建議以單欄為主的版型，標題、優惠條件與行動呼籲要寫成真正的文字，不要整封做成一張圖，因為傳統版 Outlook 預設會封鎖網路圖片的自動下載；按鈕要夠大、文字與背景對比要足夠，圖片加上替代文字。寄出前在主要郵件程式、手機與深色模式下各看一次測試信，確認版面、連結與追蹤參數都正確。
EDM 版型的六個基本區塊
常見的行銷信由上到下可以拆成六個區塊，先排好結構再進入視覺設計：
- 預覽文字：收件匣清單在主旨旁顯示的內文預覽，例如 Outlook 的郵件預覽可設定顯示一到三行。內文開頭放一句補充主旨的話。Google 的寄件者規範提醒，用 HTML 和 CSS 隱藏郵件內容可能使郵件被標示為垃圾郵件，不要靠隱藏文字塞預覽內容。
- 頁首：品牌標誌與名稱，讓人一眼認出寄件者。
- 主視覺與標題：一張主圖搭配文字標題，說明這封信的主題。
- 內文：短段落或條列，一段只講一件事。
- 行動呼籲：主要按鈕放在說明之後。
- 頁尾：公司名稱、聯絡方式與清楚的取消訂閱連結。
EDM範例：一封新品通知信怎麼排
以下用新品上市通知當例子，說明每個區塊放什麼、設計時注意什麼：
| 區塊 | 範例內容 | 設計重點 |
|---|---|---|
| 預覽文字 | 冬季新款保溫杯上市，訂閱者可搶先預購 | 補充主旨，不重複主旨 |
| 頁首 | 品牌標誌、品牌名稱 | 標誌加替代文字 |
| 主視覺 | 產品情境照，下方文字標題「冬季新款上市」 | 標題用文字，不寫進圖片 |
| 內文 | 三項特色條列：保溫效果、材質、容量選擇 | 短句，重點用粗體 |
| 行動呼籲 | 「查看新款並預購」按鈕 | 用 HTML 製作，連結加追蹤參數 |
| 頁尾 | 公司資訊、取消訂閱、訂閱偏好設定 | 連結清楚可見 |
這個架構可以存成範本，之後的活動信、電子報只替換內容，能減少每次重新排版的時間。
寬度與行動版：窄螢幕自動改成單欄
郵件程式對 CSS 的支援比瀏覽器有限，EDM 設計要以「不支援時也能讀」為前提：
- 固定寬度的單欄為主：寬度以電腦版閱讀窗格不需左右捲動為準，雙欄區塊在手機上改為上下排列。
- 用媒體查詢調整手機版：Gmail 支援在 head 的 style 區塊使用 CSS，媒體查詢可用 min-width、max-width 等條件，能在窄螢幕把雙欄改單欄、放大字級。
- 重要樣式要有退路：Gmail 可能忽略不支援的 CSS 屬性和選取器，官方列出支援的選取器為類別、元素與 ID，關鍵的字色、背景與按鈕樣式建議直接寫在元素上。
圖文比例：關鍵資訊一定要是文字
微軟說明，傳統版 Outlook 預設會封鎖來自網際網路的自動圖片下載，用來防範惡意程式碼與追蹤像素，收件者要手動選擇下載圖片。整封信做成一張大圖時，圖片沒載入，收件者可能只看到空白。
- 標題、優惠條件、日期與按鈕文字都用文字呈現，圖片負責展示商品與情境。
- 每張有意義的圖片都加替代文字，圖片沒載入時仍能理解內容。
- 圖片先壓縮再上傳，避免手機開信時等太久。
- 寄送時附上純文字版本。郵件規範中，多種格式並存時各部分是同一內容的不同版本，郵件程式可依環境選擇顯示。
CTA 設計：一封信一個主要動作
一封 EDM 只設定一個主要行動，例如查看新品或報名活動，其他連結改成文字連結，讀者才知道該點哪裡。按鈕的文案、顏色與位置原則和網頁相同，可參考CTA按鈕的設計方法；郵件裡還要多注意幾點：
- 按鈕用 HTML 與 CSS 製作，不要用圖片，圖片被封鎖時按鈕才不會消失。
- 點擊範圍要夠大，WCAG 的目標尺寸準則要求指標點擊目標至少二十四乘二十四 CSS 像素，或彼此保留足夠間距。
- 每個連結加上追蹤參數，才能在分析報表分辨流量來自哪一封信，做法見UTM 參數的設定方式。
深色模式：寄出前檢查顏色與標誌
微軟說明，Outlook 開啟深色模式時，閱讀窗格會變成深色背景，收件者也可以切換查看原始格式。不同郵件程式處理深色模式的方式不一，設計時要能適應兩種背景：
- CSS 的 prefers-color-scheme 媒體查詢可偵測使用者偏好淺色或深色主題，但 Gmail 官方列出的支援媒體查詢不包含它，不能只靠這個寫法。
- 透明背景的深色標誌在深色背景上可能看不見，可替標誌加淺色外框或底色。
- 文字色與背景色成對指定，避免只設定其中一個，被轉換後對比不足。
- 在深色模式下逐一檢查按鈕、分隔線與圖示。
可存取性：讓螢幕閱讀器也讀得懂
- 替代文字：裝飾用的圖片給空白替代文字，螢幕閱讀器會略過；當成連結或按鈕的圖片，替代文字要說明點了會發生什麼，而不是描述圖片。
- 對比：WCAG 要求一般文字與背景的對比至少四點五比一，大字至少三比一。
- 排版表格：用表格排版時，把 role 屬性設為 presentation，輔助技術就不會把它當成資料表格朗讀。
- 語言：在 html 元素標示語言，螢幕閱讀器才能載入正確的發音規則。
- 結構：用標題與段落分層，連結文字直接說明目的地。
寄送前的測試清單
- 寄測試信到團隊常用的郵件程式，例如 Gmail 與 Outlook，在手機與電腦上分別開啟。
- 關閉圖片顯示再看一次，確認內容仍然完整。
- 切換深色模式檢查顏色與標誌。
- 逐一點擊所有連結，確認網址、追蹤參數與取消訂閱連結都正常。
- 檢查主旨、預覽文字與寄件者名稱是否一致。
- 確認寄件網域已完成 SPF、DKIM、DMARC 驗證，Google 對大量寄件者另要求支援一鍵取消訂閱，細節見開發信的寄件網域驗證。
常見問題
EDM 設計要用什麼工具製作？
可以用寄信平台內建的範本編輯器，或由工程人員撰寫 HTML。選擇時看能否產生行動版、加入替代文字、附上純文字版本，以及團隊之後是否方便自行修改。
為什麼測試信在 Gmail 正常，在 Outlook 卻跑版？
各郵件程式轉譯 HTML 與 CSS 的方式不同，支援的屬性也不一樣。遇到跑版時，先簡化版面、改用表格排版與寫在元素上的樣式，再分別測試確認。
收件者說看不到圖片怎麼辦？
先確認是否為收件端封鎖圖片。傳統版 Outlook 可在郵件上方的資訊列選擇下載圖片，或把寄件者加入安全的寄件者清單；設計端則要確保沒有圖片時內容仍讀得懂。
一封 EDM 放多少內容比較適合？
建議一封信只談一個主題，內文寫到讀者能判斷要不要點擊即可。內容較多時放摘要與連結，把完整說明留在網站頁面，信件也比較好在手機上閱讀。
EDM 範本可以重複使用嗎？
可以。把頁首、主視覺、內文、按鈕與頁尾做成固定模組，每次只換內容，能減少跑版與測試時間；但每次寄出前仍要完整寄一次測試信。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
動手設計前，先決定這封信的單一目的與要放的區塊，再用範例架構排出版型並建立測試清單。如果你需要規劃整年的電子報主題、撰寫信件文案，或把 EDM 和網站內容串成完整的溝通路徑，京采的內容策略服務可以協助規劃主題、內容結構與追蹤方式，歡迎與我們聯絡。
