CSS

電子郵件 CSS

沒有比這個更痛苦了，我保證

關於撰寫郵件的 CSS 這件事情是特別難過的，因為需要測試各個作業系統、瀏覽器、郵件應用程式，以目前來說：

  • 4 個作業系統(Windows、Mac、Android、iOS)

  • 4 個瀏覽器(Chrome、Edge、Safari、Firefox)

  • 4 個內建郵件App（Windows、Mac、Android、iOS）

  • Microsoft Outlook

基本上會花上大部分時間在 Debug ，從試誤中學習（除非你的工作就是專門設計電子郵件，那你會比一般切網頁版子的專業人員對能不能使用屬性的靈敏度高一些）。

確定目標對象

老話一句，我們的主要對象必須確定！當然理想上我們希望能越完善越好，但有時候時間或資源上不允許，必須得有優先權概念，決定一定的正常呈現的目標對象。

目標對象可以根據數據篩選出來，例如使用 GA 觀察您的使用者大部分都是什麼作業系統、瀏覽器。

開始切版

根據設計稿開始分類統整：

  • 確保由該服務發出的電子郵件有一致的風格，能共用的就共用

  • 該彈性的地方就要彈性，確定哪些地方是可以客製

HTML

從 Doctype 宣告開始就必須注意，目前推薦 XHTML 1.0 Transitional。

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    ...
</html>

<head> 裡面的 <meta> 推薦至少要放以下資訊：

<head>
    <!-- 編碼 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 相容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 
        如果要可以區分 Light & Dark Mode。 
        https://responsivehtmlemail.com/dark-mode-in-html-email/ 
    -->
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <!-- 標題 -->
    <title>HTML Email Template Project</title>
</head>

CSS

接下來，我們要決定 CSS 的引入方式，我們在基礎課程裡提到一共有三種方式：

  • inline style

  • <style></style>

  • <link>

第一種方式 inline 是一定可以的這個不需要討論，需要討論的是能不能用其他方式。到此得先緩緩我們的切版進度，確認一下一些技術面的問題目標對象的關係：

先根據技術限制，決定好如何使用之後，接著我們可以使用以下技術網頁輔助，最好事先瀏覽一遍常用屬性是否可以使用在目標對象上，否則之後要改動就會很麻煩，尤其是如果要使用 inline 方式的話。

測試

通常發出電子郵件都需要有 Server 發出，或是使用線上服務。 但我們只是想要先看畫面而已，還不想要那麼麻煩，就可以使用這個工具：Litmus

這個工具可以幫助我們設定要收的信箱、主旨、以及 HTML，甚至是可以幫我們把 CSS 寫到 inline 裏面（不過我個人不推，因為不知道會遺漏掉多少東西，無從得知），雖然每次都要驗證碼，但因為是免費的，還算可以容忍。

接著，你就可以使用目標對象開啟郵件觀看是否正常。

但是到此為止了，因為電子郵件不是你自己刻一刻版面就結束了，通常他必須結合後端程式，而後端程式又常常切分成很多模組，所以會常常得到一些結論：「我的 Prototype 明明就很正常，為什麼透過後端程式寄信，整個就大崩潰了？？」

所以切版人員還必須去看後端程式碼，修正一些 HTML 的問題。

第一步，先確認整個 HTML 結構是否正確，有分快速查看以及仔細察看兩種。

快速查看使用我們網頁上的任何一個服務即可，例如 Gmail。只要在信箱中按右鍵檢查元素，便可以得知整個 HTML 在 Gmail 裡是如何呈現的，只是多了很多雜訊（其實就跟平時我們在檢查網頁一樣）。

注意，快速查看的方式是不太準確的，因為如果你的 html 有漏了封閉標籤之類的，服務會自動補上，所以有可能會造成 HTML 結構與您的 Prototype 不一樣，造成 CSS Selector 沒有指到正確對象，導致樣式不正確。

第二部比較正確，檢查結構的方式是使用 Windows 的 Outlook ，其中有一個「動作」，可以在瀏覽器中打開 email 信件，接著按滑鼠右鍵，選擇「檢查原始碼」，複製下來到編輯器貼上整理，就可以得知在 email 裡最後產生的結構是什麼了，如下圖所示：

小技巧與 Hack

  • 以現階段來說，最好使用 <table> 來做排版，雖然對無障礙來說很不好，但目前就是沒辦法。

  • 如果要做 RWD ，但是 Outlook 又不吃某種屬性，那就可以使用條件語句來區分，為了 Outlook 特別訂製。

<!--[if (gte mso 9)|(IE)]>
特別為了 Outlook 訂製的內容
<![endif]-->

  • Reset 

<body style="margin:0;padding:0;min-width:100%;">

<tr>
  <td style="padding:0;">
    <table width="100%;" style="border-spacing:0;">
      <tr>
        <td class="two-columns" style="padding:0;">
        
 <!-- 盡可能多寫一點 reset，有時就是會有意想不到的情況  -->

  • 針對 Outlook，<td> 盡量有 valign="" ，如果搭配 table-layout 則要有寬度，<img> 要有寬度。

  • Windows 預設 Hover 連結和照片時，展示 URL 出來，以防有心人士利用 title 或 alt 騙人點進去，所以在 Windows 環境下的 app，即便是有設定 title 或 alt ，都只能看見 URL。

  • RWD

    • 可以使用 <center> ，雖然已經被 HTML5 遺棄，但因為我們不是宣告 HTML5 ，所以仍可使用。例如：<center style="table-layout:fixed;">

    • 大框架

      <table align="center" style="border-spacing:0;Margin:0;padding:0;width:100%;max-width:600px;">

小結

撰寫郵件的 HTML 和 CSS 是非常累人的，尤其是要不斷地測試才知道結果。

而且有時候你就是會碰到和資料說的不一致，例如文件寫可以用的屬性，但實際上沒辦法使用，這種時候建議先確保 render 出來的 HTML 跟你的 prototype 一樣，再繼續找原因。

作業

從您的電子郵件中，找到一則電子報廣告，從 0 實作並確保 Windows 的 Outlook 可以正常。

參考來源

PreviousDefensive CSSNext常見問題（未完成）

Last updated