別再怪開信率低了，你的電子報mobile first了嗎？

大部分網站的手機流量已經超過 PC 已是既定事實，mobile-first 的概念早已經是現在進行式 （報告這裡看）。如果你已經完成手機版網頁或 app 的布局，那手機版電子報可能是你的下一個目標。

將電子報像 app 一樣對待

以前在桌上型電腦上，電子報設計常常受限於各種先天上的限制，而現在手機上的不同平台、email app 更是讓情況更加嚴峻。一封內容相同的電子報在 Android 原生的 mail app 和 Gmail app 上可能又呈現不同的面貌。

過去在許多品牌都習慣把所有的電子報內容濃縮在一張圖片裡，並進行切版。這在過去是可行的，因為大部分使用者在 PC 上可以很快速的進行縮放。然而，對於手機使用者來說，這是非常困擾的。

簡單來說，就是

1. 看不到 – 圖片內的文字、太小使用者難以了解內容
2. 點不到 – 連結不明顯，使用者難以快速做出動作。即使想做出動作，也容易發生點不到按鈕的情況
3. 找不到 – 預設不顯示圖片的情況下，白茫茫的螢幕

根據 Litmus 調查顯示，71% 的手機使用者會把不好看的電子報直接刪除，甚至有 16% 的人可能會取消訂閱。

然而，在開始優化之前，我們必須了解電子報在這些裝置上是如何被呈現的。從下面的圖片中可以看到，在不同的 email app 中，圖片顯示的狀況會有所差異。

Android Gmail App ( 不支援 media queries )

了解限制

在為電子報進行優化時，我們必須知道並非所有的行動裝置 email app 都對 HTML 和 CSS 有相同的支援度。從下面的資料可以了解到常見 email app 的支援狀況與限制，進而決定優化的優先順序。

從上表中可以看出，目前只有 iOS 和 Android 的原生 email app 支援 media queries。因此，純粹依賴 responsive web design 設計的電子報在某些平台上可能會失效。(註)。

此外，大部分的 email app 都具備阻擋圖片的功能、畫面小、使用時間破碎等限制，讓許多品牌在設計電子報時常面臨困境，該怎麼做，才能讓自己的電子報在手機上有更好的表現？

改良方向

防禦型設計

1. 圖文並用

當許多 Android 和 iOS 的 email apps 有阻擋圖片的功能時，你必須將這個狀況考慮進去，並針對這個情況進行最佳化。你必須確保不論圖片是否顯示，訂閱者都能閱讀並吸收你的電子報的大部分訊息。
這裡要介紹的設計方式是 － 圖片和 HTML 文字並用的平衡設計，可以讓你的電子報在使用者不顯示圖片的情形下，內容不是一片空白，可以幫助你把相關的訊息正確的呈現出來，因此也稱做防禦型設計。
這樣說起來似乎有點空泛難懂，因此我們來採用防禦型設計（好魚網）和非防禦型設計 （7net） 的對照組

好魚網電子報（不下載圖片）

7net 電子報（下載圖片）

7net 電子報（不下載圖片）

開信者會喜歡哪一個？

2. 替代文字（ALT text）

替代文字也可以在不顯示圖片的情況下，更能理解你傳達的資訊，並提升訂閱者的體驗。此外，你也可以更進一步的設計美化，來讓替代文字更顯眼。然而，並不是所有的裝置都支援替代文字，因此如果你的時間有限，可以將他的優先順序放在比較後面。

字型、按鈕要大

除了設計上採用 1~2 個欄位，你還需要使用較大的字體來提升可讀性。這麼做的同時也幫助使用者省下許多麻煩，他們不需要在你的電子報內一下放大一下縮小。最好的情況是讓你的字體大到連老人都可以輕易閱讀。

字體大小的設定上，建議標題不要小於 22px，而內文不小於 14px。iOS 目前會將小於 13px 的字體自動調整為 13px，而保持 14px 以上可以避免破板的情況發生。

此外，你的按鈕必須對使用者友善，將按鈕大小控制在至少大於 44×44，並在旁邊留下一定的空白，這樣可以保證你的 CTA 可以輕易的被使用者按到。請避免在 CTA 旁放置文字或其他的連結。

先來看看第一個範例，以上是錯誤示範，讓我們看看比較好的例子。相較之下，這份電子報的字體較大，且有明顯的 CTA，是值得參考的範例。

將設計和內容簡化

人平均每天使用手機 150 次，次數雖然多，卻大部分都是零碎的時間。這些短促卻大量的互動次數代表了什麼？你的電子報最好提供高度相關的資訊，讓訂閱者可以快速的掃過並抓到重點。
除此之外，設計上使用單一欄位可以增加易讀性，兩個的欄位會讓你的電子報在手機上稍嫌擁擠，而三個以上欄位則是…最好不要，使用者會很難閱讀你的電子報，互動也有可能因此減少。

持續測試

為了能打造出能在各個 email app 中都正常顯示的電子報行銷，你必須持續的測試你的電子報內容。每個 email app 支援的功能隨時在改變，因此每次寄出前進行測試可以保證電子報呈現出應有的樣貌。
此外，也可以利用 A/B 測試來找出什麼內容適合你的受眾。
電子報的改良有許多的方向可以進行測試，例如標題、預覽文字、寄件人名稱、設計等。這是改善電子報時最有效率、且最能追蹤成效的改良方式。

總結

你的電子報有必要為使用者優化嗎？如果需要，你採取行動了嗎？
這裡列出為手機優化的優先順序供大家參考，他們依序為：

1. 將純圖片的設計改為圖文平衡的防禦型設計
2. 檢查字型、按鈕是否夠大
3. 將設計和內容簡化
4. 加入替代文字
5. 最後，這裡要推薦一個常用的解決方案 – antwort。這個模版可以解決大部分行動裝置上圖片變形、跑板的問題，附上網址供大家參考。

如果你的電子報還是一張大圖，就別再怪開信率低了。因為你根本不在乎訂閱者，因此訂閱者根本不喜歡你的電子報！

註：Media queries 是響應式設計中的一部分，採用了特定的 CSS 設計，讓網頁（這裡指電子報）內容根據裝置的營幕大小來採用不同的顯示方式。如果要在電子報中使用 CSS 的話，CSS 需要被 inline。然而，而由於 CSS 中的 media queries 無法被 inline，因此會造成許多 email app 無法讀取。

---

延伸閱讀：如何透過收集email達到跨平台曝光？