跨平台測試與常見地雷

你辛辛苦苦做好了一封促銷信，在自己的 Apple Mail 裡看起來完美無缺。結果同事用 Outlook 打開一看——排版爆了。老闆用 Gmail 打開——按鈕顏色不見了。

這就是 EDM 最頭痛的問題：每個郵件客戶端都有自己的脾氣。

各大郵件客戶端的「吃驚差異」

Gmail（網頁版）

Outlook（2019 / 365）

Apple Mail

Yahoo Mail

十大常見地雷

1. Gmail 砍掉 <style> 標籤

症狀： 在其他客戶端漂亮的排版，在 Gmail 裡變成「裸體 HTML」 解法： 所有樣式都用 inline CSS

2. Outlook 不支援 margin

症狀： 元素之間的間距消失，全部擠在一起 解法： 用 padding（在 <td> 上）或空白的 <td> 來製造間距

3. 圖片下方莫名的空白

症狀： 圖片下方多出 3-5px 的空白 解法： 圖片加上 style="display: block;"

4. 圖片不顯示時沒有替代文字

症狀： Gmail 預設不載入圖片，收件人看到空白一片 解法： 每張圖片都要加 alt 文字，而且要有意義

5. 連結顏色被覆蓋

症狀： 你設定的白色按鈕文字，在某些客戶端變成藍色底線 解法： 在 <a> 標籤上明確設定 color 和 text-decoration

6. 表格寬度爆掉

症狀： 信件寬度超過 600px，出現橫向捲軸 解法： 用 HTML width 屬性（不是 CSS width）設定 table 和 td 寬度

7. 背景圖片不顯示

症狀： 用 background-image 做的 Hero 在 Outlook 一片空白 解法： 用背景色 + 文字取代，或確保沒有背景圖也能閱讀

8. 文字大小太小

症狀： 某些客戶端會把太小的字自動放大 解法： 內文至少 14px，不要小於 12px

9. 沒有純文字版本

症狀： 信件被歸類為垃圾信 解法： 發送時同時提供 HTML 和純文字版本（這通常是發信平台的設定）

10. 沒有取消訂閱連結

症狀： 違反反垃圾郵件法規，信件被擋 解法： Footer 一定要有取消訂閱連結

實作：修復一封有問題的 EDM

以下這封 EDM 有多處問題，你能找出來並修好嗎？

問題版本（有 5 個地雷）：

找出的問題：

1. 用 <div> + max-width + margin: auto → 應改用 <table width="600" align="center">
2. 用 display: flex → 應改用 <table> 做多欄排版
3. 用 background-image → Outlook 不顯示，應改用背景色
4. <img> 沒有 alt、width、display: block → 應補上
5. 用 <button> → 應改用 table + td + a 做按鈕
6. （額外）沒有 Footer 和取消訂閱連結

修復版本：

AI 協作：學了這個，跟 AI 怎麼配合？

你現在具備了 EDM 的「除錯眼」，這是 AI 無法取代的能力。

你的人類優勢：

• 你知道哪些寫法在特定客戶端會出問題
• 你能在發送前檢查 AI 生成的 EDM 是否踩到地雷

可以這樣跟 AI 說：

幫我檢查這封 EDM 的 HTML，找出所有在 Outlook 和 Gmail 會出問題的地方，並提供修正版。要注意：不能用 flexbox、不能用 style tag、圖片要有 alt、按鈕不能用 button 元素。

練習題