大部分網站的手機流量已經超過 PC 已是既定事實,mobile-first 的概念早已經是現在進行式 (報告這裡看)。如果你已經完成手機版網頁或 app 的布局,那手機版電子報可能是你的下一個目標。
以前在桌上型電腦上,電子報設計常常受限於各種先天上的限制,
過去在許多品牌都習慣把所有的電子報內容濃縮在一張圖片裡,
然而,在開始優化之前,
根據 Litmus 調查顯示,71% 的手機使用者會把不好看的電子報直接刪除,甚至有 16% 的人可能會取消訂閱。
從下面的圖片中可以看到,在不同的 email app 中,圖片顯示的狀況會有所差異。
Android 4.x 原生 Email App ( 圖片來源:Litmus )
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 電子報(不下載圖片)
開信者會喜歡哪一個?
替代文字也可以在不顯示圖片的情況下,更能理解你傳達的資訊,
除了設計上採用 1~2
個欄位,你還需要使用較大的字體來提升可讀性。
字體大小的設定上,建議標題不要小於 22px,而內文不小於 14px。iOS 目前會將小於 13px 的字體自動調整為 13px,而保持 14px 以上可以避免破板的情況發生。
此外,你的按鈕必須對使用者友善,將按鈕大小控制在至少大於 44×44,並在旁邊留下一定的空白,這樣可以保證你的 CTA 可以輕易的被使用者按到。請避免在 CTA 旁放置文字或其他的連結。
先來看看第一個範例
以上是錯誤示範,讓我們看看比較好的例子
相較之下,這份電子報的字體較大,且有明顯的 CTA,是值得參考的範例。
人平均每天使用手機 150
次,次數雖然多,卻大部分都是零碎的時間。
除此之外,設計上使用單一欄位可以增加易讀性,
為了能打造出能在各個 email app 中都正常顯示的電子報行銷,你必須持續的測試你的電子報內容。
此外,也可以利用 A/B 測試來找出什麼內容適合你的受眾。
電子報的改良有許多的方向可以進行測試,例如標題、預覽文字、
你的電子報有必要為使用者優化嗎?如果需要,你採取行動了嗎?
這裡列出為手機優化的優先順序供大家參考,他們依序為:
如果你的電子報還是一張大圖,就別再怪開信率低了。
註:Media queries 是響應式設計中的一部分,採用了特定的 CSS
設計,讓網頁(這裡指電子報)
如果要在電子報中使用 CSS 的話,CSS 需要被 inline。然而,而由於 CSS 中的 media queries 無法被 inline,因此會造成許多 email app 無法讀取。
原文出處:電子豹(授權轉載)
大大學院「全台最大影音說書.知識學習平台」,致力於推廣終生學習、培養職場人士的閱讀習慣。
按讚、追蹤「大大學院」Facebook粉絲團,每天更新最新職場趨勢文章,帶你掌握關鍵資訊。
加入「大大學院|職場趨勢新觀點」,最新、最實用的職場課程都在這,學習資訊不漏接!請用手機點擊「加入Line好友」連結,或是掃描QR Code加入。