1. 部落格
  2. Email 行銷

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


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

將電子報像 app 一樣對待

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

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

簡單來說,就是

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

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

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

androidnative-responsive
androidgmailapp-nonresponsive

Android Gmail App ( 不支援 media queries )

了解限制

mailapp_restriction

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

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

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

改良方向

防禦型設計

fish123_defensive_1

1. 圖文並用

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

fish123_defensive_2

好魚網電子報(不下載圖片)

7net_non_defensive_1

7net 電子報(下載圖片)

7net_non_defensive_2

7net 電子報(不下載圖片)

alt-text

開信者會喜歡哪一個?

2. 替代文字(ALT text)

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

字型、按鈕要大

too_small

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

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

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

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

easier_too_read_1

將設計和內容簡化

人平均每天使用手機 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達到跨平台曝光?