Mail 跑版解決方案

遇到的狀況

1. Windows10 Outlook
1. svg 圖片無法顯示
2. 排版幾乎失效
3. google font 字型失效
2. 手機
1. 3 columns 會跑版
2. 非滿版的 button 會超過螢幕
3. Mac dark Mode
1. Mac
2. iPhone

工具

• MJML
• 提供簡單的語法，開發出高相容性的 mail content
• 撰寫時，可 即時預覽 desktop/mobile 效果
• 撰寫後，可 export HTML、即時發送測試信件
• 由 Mailject 開發，使用 desktop app，可發送 100封/日 測試信
• 有現成 mail 樣板可套用
• 可使用 desktop app、web live editor、nodejs (miml-cli)
• 使用 nodejs 開發，提供 IDE plugin (Atom, sbulime, gulp)
• 語法查詢 (link)
• 語法特性
• 可針對某個 tag 撰寫預設 attributes
• 可宣告多個 class name，提供重複使用
• 有 Row/Col 概念的排版語法
• 有 Group 可在手機版，保持在同一行
• 有 include 概念，可以拆開共用元件
• 有 variable 概念，可以挖洞，從外部送資料進來套版
• 相容性查詢
• 針對 desktop & phone 的主流 mailer app 測試
• MJML
• 每個語法底下，有提供範例檔，可直接發信到信箱測試
• Can I email
• 可查詢各種 html & css & image 支援度
• Mailer 評分
• Image 格式支援度