為什麼 HTML Email 很特別（很麻煩）
網頁開發有瀏覽器標準，瀏覽器之間的差異在逐漸縮小。但 Email 客戶端完全沒有統一標準——每個 Email 客戶端（Gmail、Outlook、Apple Mail、Yahoo Mail 等）用自己的方式解讀 HTML 和 CSS。
最惡名昭彰的是 Outlook（2007–2019 版本）：它使用 Microsoft Word 的引擎渲染 HTML Email，而不是一個真正的 HTML 渲染引擎。這意味著你在 Outlook 上幾乎無法使用 flexbox、grid 或現代的 CSS 技術。
Gmail 的問題：Gmail 的網頁版會移除 HTML 的 head 區段中的 style 標籤，這意味著你的外部樣式表和 head 樣式不起作用——所有樣式必須內聯（inline style）。
這就是為什麼用「正常的」網頁技術來做 Email 效果很差，需要用一套比較古老的方法。
HTML Email 的基本結構原則
用 Table 排版（是的，還是 Table）
在現代網頁開發中，用 table 做排版是非常過時的做法。但在 HTML Email 中，table 確保在怪異的 Email 客戶端中也能保持穩定的佈局。
基本結構：一個最外層的 table（100% 寬度），裡面是內容 table（固定寬度，通常 600px），確保在寬屏和窄屏都能正常顯示。
Inline Style（內聯樣式）
由於 Gmail 等客戶端移除 head 樣式，所有關鍵的 CSS 都應該寫成 inline style 放在 HTML 元素上。
手動寫 inline style 很繁瑣——這是 Email 構建工具（如 MJML）存在的主要原因之一。
固定像素寬度
Email 的最大寬度通常設定在 600px，因為這在大多數客戶端中能良好顯示，且在手機上縮放效果也還行。
內容區域的固定像素寬度確保佈局穩定，不依賴 viewport 的百分比計算。
使用 MJML 框架簡化開發
MJML（Mailchimp 開源的 Email 框架）讓你用更接近現代 HTML 的語法寫 Email 模板，然後自動轉換成跨客戶端相容的 table 佈局並 inline style。
MJML 的標籤格式：使用 mj-section（區段）、mj-column（欄）、mj-text（文字塊）、mj-image（圖片）、mj-button（按鈕）等語義化標籤，MJML 編譯器處理跨客戶端相容性的所有底層問題。
使用方式：
- 安裝 MJML CLI 或在線上 MJML 編輯器（mjml.io/try-it-live）使用
- 用 MJML 標籤寫好 Email 模板
- 編譯輸出標準 HTML（帶有 inline style 的 table 佈局）
- 把輸出的 HTML 貼到你的 Email 服務商（Mailchimp、SendGrid 等）
圖片在 Email 中的注意事項
圖片使用絕對 URL：Email 中的圖片必須用完整的 URL（https://yoursite.com/images/logo.png），不能用相對路徑。
設定 alt 文字：很多 Email 客戶端預設封鎖圖片（用戶需要手動允許），設定 alt 文字確保圖片不顯示時文字意思仍然清楚。
設定明確的 width 和 height 屬性：避免圖片載入時的版面跳動。
不要用大圖：Email 中的圖片大小盡量控制在 150KB 以下，避免 Email 被標記為垃圾郵件或載入太慢。
暗色模式的相容性
越來越多的 Email 客戶端支援暗色模式，但每個客戶端的實現方式不同：
Apple Mail 和 Outlook Mac 支援完整的 CSS 媒體查詢 prefers-color-scheme。
Gmail 的暗色模式行為不一致，有時會自動反轉顏色。
對品牌官方電子報，建議在設計時確保淺色版本和暗色版本都能接受，或者通過 meta 標籤明確宣告 color-scheme 的支援。
測試 Email 的工具
Litmus（付費，最全面）：在 90+ 個 Email 客戶端截圖預覽。
Email on Acid（付費）：類似 Litmus 的多客戶端測試服務。
Mailtrap（免費方案）：測試 Email 的沙盒環境，把 Email 發到測試信箱而不是真實收件人。
自己的測試設備：最後一步，在自己的 Gmail、Outlook（如果有）和 Apple Mail 上實際查看顯示效果。