在製作 Email 時，各 Email 服務商可以說是支援度都非常不統一，在排版上甚至還需要使用 Table 標籤來進行排版，甚至有些 Email 服務商甚至可能不支援 class 設定樣式，這篇文章記錄了我在製作 Email 排版時所遇到的問題，如果你在製作 Email 時有遇到困難，可以往下繼續閱讀，希望對你有所幫助!
開發 RWD Email 工具
為了解決製作 Email 時各種開法的不方便與開發體驗，筆者找到了以下工具可以提升開發速度與體驗，並可以使用主流的前端開發框架: Vue、React，可以用自己最熟悉的語言開發。
React-email 和 Vue-email 都是基於 resend.com 的服務開發，在開發完成後皆可以直接輸入 Email 直接免費寄送到信箱中測試，相當方便，且 React-email 和 Vue-email 都有支援可以使用 TailwindCSS，在開發上如果熟悉 TailwindCSS 的朋友方便度會比寫 inline style 來得方便。
MLML 雖有提供 React-email 和 Vue-email 一樣模組化標籤可以用，但是要直接使用 MJML 在 Vue、React 上還是有些不方便，例如他還是需要例如他還是需要從頭學習他的標籤支援哪些設定，且因為 MJML 作為一個標籤語言，也有自己的檔案格式 .mjml，要使用它也必須搭配 Handlebars 這種模板引擎來開發，在學習成本上相對上較高。
- React Email: https://react.email/docs/contributing
- Vue Email: https://github.com/Dave136/vue-email
- MLML: https://github.com/mjmlio/mjml
檢查元素在 Email 可用程度
由於各廠牌 Email 服務商對 HTML、CSS 支援度不一 ，像是在前端開發上最好用的 flex、grid 並不是所有服務商都有支援，所以在使用前可以針對主要使用的設定進行查詢。
各廠牌 Email 服務商的市占率
在 Stackoverflow 有統整了個 Email 服務商的市佔率，如果你知道你的客戶明確，或是只想針對市占率高的服務商做優化，可以參考 Stackoverflow 的這個統計。
https://stackoverflow.design/email/guidelines/getting-started/
特定裝置內透過 Class 設定樣式的方法
若要在不同 Email 裝置想透過 Class 來設定樣式，就必須透過以下文章的方法來進行設定才有辦法設定成功，否則只能使用 inline style 了。
https://www.howtotarget.email/
Dark Mode 設定完整指南
https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/
透過 media prefers-color-scheme 調整 outlook email dark mode
https://www.hteumeuleu.com/2021/emails-react-outlook-com-dark-mode/
如何修正 Outlook Dark Mode 問題
https://webdesign.tutsplus.com/how-to-fix-outlook-dark-mode-problems–cms-37718t
透過 CSS Blend modes 修正 gmail dark mode 問題
https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/
結論
最後，喜歡我的文章的話，不要忘記按讚追蹤我的粉絲專頁，才不會錯過接下來的文章。也可以透過贊助支持我一杯咖啡，支持我產出更多好文章。
