【HTML】從零開始實作基礎RWD Email （一）：基礎概念
前陣子工作中接到製作Email模板的需求，才知道原來Email並不能按照一般常用的html+css的方式製作，因此花了一點時間到處爬文。在這篇文章中將紀錄一下找到的資料和整個切版的過程。
前情提要：
一般大家在切版時會怎麼呢？最基本要準備的就是：
- HTML檔案
- CSS檔案
- 放圖片的文件夾
- 在html透過<link>的方式載入css，透過相對路徑取得圖片。
（當然實際開發過程中會使用各種工具、套件…也有不同的檔案結構，這就不在討論範圍內了）
開始切Email前首先要知道，以上的做法在有些Email Client中會不支援，各家的支援度非常不一致！
以下提供兩個網站，大家可以查查看css屬性和html標籤，會驚訝地發現，很多超級常用的css或排版方式，居然就是有Email Client不支援（或僅有部分支援）。因此切版的限制非常多。也間接導致了Email模板製作和RWD的困難。
切版三大要點：
如果現在已經很明確知道只要支援某一些Email Client，那麼只要了解它的支援度，並且避免不支援的做法即可。但如果想要盡量滿足市面上所有Email Client的話，由於各家支援度實在無法一一列舉，因此這邊直接歸納切版要注意的三個要點：
一 、使用inline-style
有的Email Client不支援html頁面中的<style></style>，也不能用<link>載入的css檔案。因此全部的屬性都必須寫在inline。
不過真的覺得inline-style很難維護啊…看得眼睛都花了…如果你也有同感，可以去搜尋將<style>內的css編譯成inline-style的小工具喔！
二 、使用table排版
因為在不同Email Client中，有的css在不同html標籤上的表現會不一致，或只能在table元素上使用。所以最好是全部使用table排版，確保在各個瀏覽器上頁面是一致的。
三 、圖片使用上的建議
- 圖片不要涵蓋重要訊息：雖然有圖很美，但有的Email Client會預設不顯示圖片，需要使用者授權才會顯示。如果你的Email全是由圖片構成，看的人也沒有特別選擇顯示圖片的話，他就什麼都看不到了…因此建議重要訊息還是使用文字呈現。
2. 圖片的路徑：要使用儲存在某伺服器上的絕對路徑（https://….）。
3. 圖片尺寸：html中最好將圖片設定寬度，避免使用模板的人丟很大張的圖片上去，就會破版了…圖片在使用前也可以壓縮一下（如：TinyPNG），避免檔案太大跑很慢。
開發中可能遇到的問題：
巢狀table和inline-style
這些讓程式碼變得眼花撩亂。要修改的時候光尋找程式碼就要花很多時間了，inline-style還需要一行一行手動修改，實在是費時費力。
👉解決方法：
- 如果有大量製作的需求，建議可以使用框架加速開發（例如：MJML）。或使用小工具，將<style>編譯成inline-style。
- 事先規劃好html架構，減少回頭修改的次數。
RWD限制多
想要支援盡可能多的Email Client，就不能用@media queries、flex、grid、float…那到底該怎麼RWD呢？
👉解決方法：
後來在網絡上找到文章（ideas behind responsive email）分享詳細做法，是使用<table></table>，並加上align=“left”屬性，以及min-width，就可以實現基本的RWD了！在後面的文章中會介紹更詳細的做法。
總結：
了解以上的基本概念，就可以開始寫HTML咯！下一篇文章中會拿一個基本的Email Template，紀錄全部的撰寫過程。
由於這次接到的需求畫面內容比較少，也想順便練習一下table排版，所以這次沒有使用其他工具或框架，是用最傳統的方式做出來的。歡迎期待下一篇（會分成兩篇是因為文章太長無法發布🙇♀️）！
如果有任何建議或發現寫錯的地方，都請再告訴我，謝謝你的閱讀😀
