# 別再怪開信率低了，你的電子報mobile first了嗎？ > 大部分網站的手機流量已經超過 PC 已是既定事實，mobile-first 的概念早已經是現在進行式 （報告這裡看）。如果你已經完成手機版網頁或 app 的布局，那手機版電子報可能是你的下一個目標。 將電子報像 app 一樣對待 以前在桌上型電腦上，電子報設計常常受限於各種先天上的限制，而現在手機上的不同平台、email app 更是讓情況更加嚴峻。一封內容相同的電子報在 Android 原生的 mail app 和 Gmail app 上可能又呈現不同的面貌。 過去在許多品牌都習慣把所有的電子報內容濃縮在一張圖片裡，並進行切版。這在過去是可行的，因為大部分使用者在 PC 上可以很快速的進行縮放。然而，對於手機使用者來說，這是非常困擾的。 簡單來說，就是 1. 看不到 – 圖片內的文字、太小使用者難以了解內容 2. 點不到 – 連結不明顯，使用者難以快速做出動作。即使想做出動作，也容易發生點不到按鈕的情況 3. 找不到 – 預設不顯示圖片的情況下，白茫茫的螢幕 根據 Litmus 調查顯示，71% 的手機使用者 **分類：** Email 行銷 **作者：** Andy.Chou **發布日期：** 2015-05-21T20:35:21.000+08:00 大部分網站的手機流量已經超過 PC 已是既定事實，mobile-first 的概念早已經是現在進行式 （報告這裡看）。如果你已經完成手機版網頁或 app 的布局，那手機版電子報可能是你的下一個目標。 ## **將電子報像 app 一樣對待** 以前在桌上型電腦上，電子報設計常常受限於各種先天上的限制，而現在手機上的不同平台、email app 更是讓情況更加嚴峻。一封內容相同的電子報在 Android 原生的 mail app 和 Gmail app 上可能又呈現不同的面貌。 過去在許多品牌都習慣把所有的電子報內容濃縮在一張圖片裡，並進行切版。這在過去是可行的，因為大部分使用者在 PC 上可以很快速的進行縮放。然而，對於手機使用者來說，這是非常困擾的。 簡單來說，就是 1. 看不到 – 圖片內的文字、太小使用者難以了解內容 2. 點不到 – 連結不明顯，使用者難以快速做出動作。即使想做出動作，也容易發生點不到按鈕的情況 3. 找不到 – 預設不顯示圖片的情況下，白茫茫的螢幕 > 根據 [Litmus](https://litmus.com/?ref=cms.newsleopard.com) 調查顯示，71% 的手機使用者會把不好看的電子報直接刪除，甚至有 16% 的人可能會取消訂閱。 然而，在開始優化之前，我們必須了解電子報在這些裝置上是如何被呈現的。從下面的圖片中可以看到，在不同的 email app 中，圖片顯示的狀況會有所差異。 ![androidnative-responsive](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112612/androidnative-responsive.jpg) ![androidgmailapp-nonresponsive](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112611/androidgmailapp-nonresponsive.jpg) _Android Gmail App ( 不支援 media queries )_ ## **了解限制** [![mailapp\_restriction](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112612/mailapp_restriction.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112612/mailapp_restriction.jpg?ref=cms.newsleopard.com) 在為電子報進行優化時，我們必須知道並非所有的行動裝置 email app 都對 HTML 和 CSS 有相同的支援度。從下面的資料可以了解到常見 email app 的支援狀況與限制，進而決定優化的優先順序。 從上表中可以看出，目前只有 iOS 和 Android 的原生 email app 支援 media queries。因此，純粹依賴 responsive web design 設計的電子報在某些平台上可能會失效。(註)。 此外，大部分的 email app 都具備阻擋圖片的功能、畫面小、使用時間破碎等限制，讓許多品牌在設計電子報時常面臨困境，該怎麼做，才能讓自己的電子報在手機上有更好的表現？ ## **改良方向** ### 防禦型設計 [![fish123\_defensive\_1](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112613/fish123_defensive_1.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112613/fish123_defensive_1.jpg?ref=cms.newsleopard.com) ## 1\. 圖文並用 當許多 Android 和 iOS 的 email apps 有阻擋圖片的功能時，你必須將這個狀況考慮進去，並針對這個情況進行最佳化。你必須確保不論圖片是否顯示，訂閱者都能閱讀並吸收你的電子報的大部分訊息。 這裡要介紹的設計方式是 － 圖片和 HTML 文字並用的平衡設計，可以讓你的電子報在使用者不顯示圖片的情形下，內容不是一片空白，可以幫助你把相關的訊息正確的呈現出來，因此也稱做**防禦型設計**。 這樣說起來似乎有點空泛難懂，因此我們來採用防禦型設計（[好魚網](https://www.fish123.com.tw/?ref=cms.newsleopard.com)）和非防禦型設計 （[7net](http://www.7net.com.tw/?ref=cms.newsleopard.com)） 的對照組 [![fish123\_defensive\_2](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112614/fish123_defensive_2-e1432111106350.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112614/fish123_defensive_2-e1432111106350.jpg?ref=cms.newsleopard.com) _好魚網電子報（不下載圖片）_ [![7net\_non\_defensive\_1](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112616/7net_non_defensive_11-e1432112606646.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112616/7net_non_defensive_11-e1432112606646.jpg?ref=cms.newsleopard.com) _7net 電子報（下載圖片）_ [![7net\_non\_defensive\_2](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112615/7net_non_defensive_2-e1432112381353.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112615/7net_non_defensive_2-e1432112381353.jpg?ref=cms.newsleopard.com) _7net 電子報（不下載圖片）_ [![alt-text](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112618/alt-text1.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112618/alt-text1.jpg?ref=cms.newsleopard.com) 開信者會喜歡哪一個？ ## 2\. 替代文字（ALT text） 替代文字也可以在不顯示圖片的情況下，更能理解你傳達的資訊，並提升訂閱者的體驗。此外，你也可以更進一步的設計美化，來讓替代文字更顯眼。然而，並不是所有的裝置都支援替代文字，因此如果你的時間有限，可以將他的優先順序放在比較後面。 ## **字型、按鈕要大** [![too\_small](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112617/too_small-e1432113885735.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112617/too_small-e1432113885735.jpg?ref=cms.newsleopard.com) 除了設計上採用 1~2 個欄位，你還需要使用較大的字體來提升可讀性。這麼做的同時也幫助使用者省下許多麻煩，他們不需要在你的電子報內一下放大一下縮小。最好的情況是讓你的字體大到連老人都可以輕易閱讀。 字體大小的設定上，建議標題不要小於 22px，而內文不小於 14px。iOS 目前會將小於 13px 的字體自動調整為 13px，而保持 14px 以上可以避免破板的情況發生。 此外，你的按鈕必須對使用者友善，將按鈕大小控制在至少大於 44×44，並在旁邊留下一定的空白，這樣可以保證你的 CTA 可以輕易的被使用者按到。請避免在 CTA 旁放置文字或其他的連結。 先來看看第一個範例，以上是錯誤示範，讓我們看看比較好的例子。相較之下，這份電子報的字體較大，且有明顯的 CTA，是值得參考的範例。 [![easier\_too\_read\_1](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2015/05/22112618/easier_too_read_1-e1432114183759.jpg)](https://cms.newsleopard.com/content/images/wordpress/2015/05/easier_too_read_1.jpg) ## 將設計和內容簡化 人平均每天使用手機 150 次，次數雖然多，卻大部分都是零碎的時間。這些短促卻大量的互動次數代表了什麼？你的電子報最好提供高度相關的資訊，讓訂閱者可以快速的掃過並抓到重點。 除此之外，設計上使用單一欄位可以增加易讀性，兩個的欄位會讓你的電子報在手機上稍嫌擁擠，而三個以上欄位則是…最好不要，使用者會很難閱讀你的電子報，互動也有可能因此減少。 ## **持續測試** 為了能打造出能在各個 email app 中都正常顯示的電子報行銷，你必須持續的測試你的電子報內容。每個 email app 支援的功能隨時在改變，因此每次寄出前進行測試可以保證電子報呈現出應有的樣貌。 此外，也可以利用 A/B 測試來找出什麼內容適合你的受眾。 電子報的改良有許多的方向可以進行測試，例如標題、預覽文字、寄件人名稱、設計等。這是改善電子報時最有效率、且最能追蹤成效的改良方式。 ## **總結** 你的電子報有必要為使用者優化嗎？如果需要，你採取行動了嗎？ 這裡列出為手機優化的優先順序供大家參考，他們依序為： 1. 將純圖片的設計改為圖文平衡的防禦型設計 2. 檢查字型、按鈕是否夠大 3. 將設計和內容簡化 4. 加入替代文字 5. 最後，這裡要推薦一個常用的解決方案 – [antwort](https://github.com/InterNations/antwort/wiki/Version-1.0-Changes?ref=cms.newsleopard.com)。這個模版可以解決大部分行動裝置上圖片變形、跑板的問題，附上網址供大家參考。 如果你的電子報還是一張大圖，就別再怪開信率低了。因為你根本不在乎訂閱者，因此訂閱者根本不喜歡你的電子報！ 註：Media queries 是響應式設計中的一部分，採用了特定的 CSS 設計，讓網頁（這裡指電子報）內容根據裝置的營幕大小來採用不同的顯示方式。如果要在電子報中使用 CSS 的話，CSS 需要被 inline。然而，而由於 CSS 中的 media queries 無法被 inline，因此會造成許多 email app 無法讀取。 * * * 延伸閱讀：[如何透過收集email達到跨平台曝光？](https://blog.newsleopard.com/%e5%a6%82%e4%bd%95%e9%80%8f%e9%81%8e%e6%94%b6%e9%9b%86email%e9%81%94%e5%88%b0%e8%b7%a8%e5%b9%b3%e5%8f%b0%e6%9b%9d%e5%85%89%ef%bc%9f/?ref=cms.newsleopard.com)