製作RWD email 工具:MJML,如何使用及注意事項

製作RWD email 工具:MJML,如何使用及注意事項

本篇要解決的問題

用 MJML 這套工具做出了一封 RWD 的 email 後,覺得這套工具解決了以下問題:

  • 會自動生成支援 outlook 的 hack
  • 具有 component 的功能,像天地可以拆開來,共用在每一份 EDM 中
  • 不必每一個 <p> 都自己手寫 inline style 寫個半死,寫到最後太雜太亂找不到要改的句子
  • 左邊寫 code 右邊就可以即時預覽

身為前端工程師,常常要刷二個王,一個是上古神獸 IE,一個是萬惡罪魁 Outlook。

其中 Outllook 又是聽到名字就會心裡覺得一陣痛的王,主要是平常習慣用 Mac 開發,很奇怪的是,Mac 版的 Outlook 怎麼看都正常時,Windows 版的 Outlook 卻常常跑版。

每次都是請用 Windows 的同事幫忙用 Outlook 收信才能看到底修改有沒有改對。

而為了讓 EDM 可以讓 Outlook 不要跑版,就得寫很多的 hack 寫到天荒地老。

上一篇的〈用Vue.js製作圖片版EDM生成器〉主要是處理 EDM 全用圖片時,那時寫完就想說不知道怎麼改才能改出一個純文字版的 EDM 生成器?

然後,平常有在訂的 TechBridge Weekly 就刊了這篇:透過 MJML 快速完成 RWD Email 排版

看完後深深覺得,終於得到一套 +8 精煉的對抗 Outlook 的神器了!


安裝 MJML

MJML 官網:https://mjml.io/

要用 MJML 來開發 RWD email 有四種方式:線上生成器、桌面應用程式、Node.js、API,連結個自如下。

線上生成器:https://mjml.io/try-it-live
桌面應用程式:https://mjmlio.github.io/mjml-app/
Node.js:https://www.npmjs.com/package/mjml
API:https://mjml.io/api

應用程式的部份,除了上述的桌面用,在編輯器上也有延伸模組,主流的 VS Code、Atom、Sublime Text 這三個都有,可以看官網說明:https://mjml.io/documentation/#applications-and-plugins

為了可以控管每一份製作的EDM以及有個簡單的介面使用,這篇選擇的是桌面應用程式。


開始使用

安裝完後打開應用程式,會看見很乾淨的三個按鈕:

打開 MJML 後的三個按鈕
打開 MJML 後的三個按鈕

因為是第一次用,之前都沒有存過 MJML 的檔案,這邊就點擊「New project」。

點擊後要先填上資料夾名稱,填完後按「Choose template」:

取名稱
取名稱

接著出現了要選擇「Basic」還是「Gallery」。

Basic 就是單純毫無內容的版,又分為「一頁式」跟「天地包成模組式」:

Basic
Basic

Gallery 的話就提供很多種的版型,看喜歡哪個就開哪個:

Gallery
Gallery

因為 Augustus 會拿到由設計師提供的設計稿,因此在製作上就選用 Basic 自行製作。

這邊選擇了 Basic 的 「Header & Footer」,因為每次 EDM 的天地幾乎都相同,把 Header、Footer 用成模組,之後每一封 EDM 引用進去就行。

選了以後就會出現編輯器的介面:

MJML 編輯器畫面(點擊看原圖)
MJML 編輯器畫面(點擊看原圖)

很神奇的是,他們秀的範例碼會有一個錯誤,寫 width 的部份要加上 px,不知道為什麼範例中沒加?

總之,可以看見最左邊是資料夾的架構,中間是程式碼部份,右邊則是預覽。

接下來就是編輯程式碼,在預覽上確認好 EDM 的結果後,輸出成 HTML。

在介面的右上角,有一個「Copy HTML」的按鈕,旁邊有個三角形,點了就可以選擇輸出方式:

MJML 的輸出方式
MJML 的輸出方式

就看想怎麼輸出了。


MJML 程式碼

 MJML 的工具寫 RWD email,必須要照它的規則寫,它才會編輯成 HTML。

這部份直接看一次官方說明文件:https://mjml.io/documentation/

說明文件一定一定一定要讀過一次,文件不長,1-2 個小時就可以看完,以下這邊 Augustus 就是實作過一份 EDM 後,整理出來的使用重點(還是該說是踩過的坑)。

寬度

在寬度的部份,即便在 body 的部份有設寬,可以讓大部份的閱讀器都支援最大寬,但,萬惡的 Outlook 是不理你的。

實作時,body 上寫了 width="700px",Gmail 很漂亮地讓最大寬限到 700px,Mac 版的 Outlook 也很漂亮地限最大寬到 700px,但 Windows 版的 Outlook 就一樣是 100% 寬,信開多寬內文就有多寬,完全不管什麼 700 不 700 的。

最後解決這個問題的方式,就是每個 <mj-column> 都加上 width="700px"

CSS、Style

樣式的部份,有三種方式可以寫。

寫在 <mj-attributes> 內的是全域樣式。

寫在 <mj-style inline="inline"> 的編譯後會寫進行內。

寫在 <mj-style> 的編譯後會寫在 <style> 中。

<mj-style><mj-style inline="inline"> 這二種,裡面的選擇器要加上 .selector div,並且都要寫上 !important,像這樣:

.title div {
  font-size: 30px !important;
  color: red !important;
}

因為 RWD email 有時桌、手機會有不一樣的樣式,像是字型大小就有可能會變。

因此在寫的時候,<mj-style inline="inline"> 先寫,主要處理桌機版。<mj-style> 後寫,主要處理手機版。

一般的 a 標籤

文件中寫到比較接近超連結的,是按鈕 <mj-button>,但我們不會每一個連結都做成按鈕的樣子,也會有一般文字上加超連結的時候。

如果單純寫 <a href=""> 會無法編譯,因為 MJML 認不出 a 標籤。

要寫 a,就把它寫進 <mj-text> 裡,像這樣:

<mj-text align="right">
      *若無法看見此信,可從
      <a target="_blank" style="color: #CD0505" href="xxxxxx">瀏覽器查看</a>
</mj-text>

在寫樣式的時候,可以寫:

.content-link a {
  line-height: 34px !important;
}

來處理。


整理注意事項的原始碼

最後就是把一些注意事項整理成一個檔案,打算以後要做新的 EDM 時就打開來存新檔後製作,建議要用這套的朋友可以花時間自己整理一個:

Summary
製作RWD email 工具:MJML,如何使用及注意事項
Article Name
製作RWD email 工具:MJML,如何使用及注意事項
Description
本篇大綱:本篇要解決的問題。安裝 MJML。開始使用。MJML 程式碼,寬度、CSS、Style、一般的 a 標籤。整理注意事項的原始碼。用完 MJML 這套 RWD email 工具後深深覺得,終於得到一套 +8 精煉的對抗 Outlook 的神器了!
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言