# 電子報設計優化，客戶才賞臉

> 


我們常聽到有人認為台灣民眾的電子郵件使用率不如歐美國家。然而實際調查結果的數據顯示卻並非如此，研究指出，使用行動裝置（如：智慧型手機、平板電腦）上網的台灣客戶中，有高達 68％ 的人會使用行動裝置來收發電子郵件。





所以，若忽略客戶電子報的使用目的與習慣而任意發送，也可能使客戶無法真正了解其電子報本身的內容與價值。然而，我們又該如何讓使用行動裝置上網的客戶，在打開你的電子報時能擁有良好的閱覽體驗，就是我們接下來的文章裡討論的內容。針對客戶的上網習慣，如何讓電子報版型設計適應行動裝置的發展趨勢？






一、造成收件者取消訂閱電子報的原因





「等待圖片載入的時間太長、需要不停的往下捲動才能閱讀完一個句子或段落，或者需要先放大畫面才能點擊行動介面上的連結……」，你是否曾對這樣的場景覺得熟悉？





對於習慣透過手機瀏覽電子報的訂閱會員，可能造成流失的原因：





 1. 等待內容載入的時間過久
 2. 手機瀏覽體驗不佳





Litmus 調查報告指出，有 51％ 的客戶取消訂閱品牌電子報的原因，是因為其電子報或網站無法在智慧型手機上順暢的顯示運作。另

**分類：** 電子報優化  
**作者：** Bao  
**發布日期：** 2022-11-08T20:00:00.000+08:00


我們常聽到有人認為台灣民眾的電子郵件使用率不如歐美國家。然而實際調查結果的數據顯示卻並非如此，研究指出，使用行動裝置（如：智慧型手機、平板電腦）上網的台灣客戶中，有高達 68％ 的人會使用行動裝置來收發電子郵件。

所以，若忽略客戶電子報的使用目的與習慣而任意發送，也可能使客戶無法真正了解其電子報本身的內容與價值。然而，我們又該如何讓使用行動裝置上網的客戶，在打開你的電子報時能擁有良好的閱覽體驗，就是我們接下來的文章裡討論的內容。針對客戶的上網習慣，如何讓電子報版型設計適應行動裝置的發展趨勢？

## 一、**造成收件者取消訂閱電子報的原因**

「等待圖片載入的時間太長、需要不停的往下捲動才能閱讀完一個句子或段落，或者需要先放大畫面才能點擊行動介面上的連結……」，你是否曾對這樣的場景覺得熟悉？

**對於習慣透過手機瀏覽電子報的訂閱會員，可能造成流失的原因：**

1.  ****等待**內容載入的時間過久**
2.  **手機瀏覽體驗不佳**

> [Litmus](https://www.litmus.com/?ref=cms.newsleopard.com) 調查報告指出，有 51％ 的客戶取消訂閱品牌電子報的原因，是因為其電子報或網站無法在智慧型手機上順暢的顯示運作。另外，43 % 的客戶將無法在手機上順利顯示的電子報視為垃圾郵件。

![電子報介面優化](https://cms.newsleopard.com/content/images/wordpress/2017/11/51.png)

設計不佳的電子報，會對行動裝置的使用者產生負面的瀏覽體驗，圖片來源： [Soundest](https://www.soundest.com/blog/summary-state-email-report-2017-litmus/?utm_campaign=Soundest%2BNewsletter%2B4-11_58eb8b45597ed705e3ca08fb&utm_medium=email&utm_source=newsletter)

原本在電腦上可順利開啟的頁面，卻讓客戶使用行動裝置瀏覽電子報時，卻產生負面之瀏覽體驗，進而放棄閱讀或取消訂閱。針對上述種種問題，我們必須從了解目標客群的行為出發，並針對不同的裝置和瀏覽器進行優化，才能避免資源的浪費，從而[改善客戶流失的問題](https://blog.newsleopard.com/email-marketing-subscriber-170808/?ref=cms.newsleopard.com)。

對於電子報在不同的裝置和瀏覽器進行優化的方式，通常會採取以行動優化（Mobile Optimize）、響應式設計（Responsive Design）作為解決多元行動載具並行而產生的（多螢）介面顯示問題。至於這兩種方式的操作技巧，我們則簡單的分述如下。

## 二、**優化手機瀏覽電子報的體驗（Mobile Optimize）**

行動優化是以使用手機的客戶角度來看，透過 HTML 語言進行設計，方便以手機瀏覽電子報內容。而行動優化有以下三個實際操作的技巧：

### 1\. 簡單扼要

一般客戶透過手機瀏覽的時間較為零碎且容易分心。[保持符合主題與首段標題的信息內容](https://blog.newsleopard.com/email-marketing-5-subject-high-open-rate-171019/?ref=cms.newsleopard.com)、刪除不相干的文字和圖片，或以摘要說明產品重點，能更有效率的讓客戶做出行動或回應。

![電子報介面優化](https://cms.newsleopard.com/content/images/wordpress/2017/11/45640.jpg)

案例：[D-Link 友訊科技](http://www.dlinktw.com.tw/?ref=cms.newsleopard.com)

### 2\. 易於瀏覽

參考滾動頁面細節的支援手機設計資料，版型設計明確且區分不同資訊區塊，同時利用有組織性的訊息，幫助客戶迅速抓住重點。[以 CTA 按鈕導引有興趣的客戶進入](https://blog.newsleopard.com/4%E5%80%8Bcall-to-action%E6%B8%AC%E8%A9%A6%EF%BC%8C%E5%8D%94%E5%8A%A9%E4%BD%A0%E6%8F%90%E5%8D%87%E9%9B%BB%E5%AD%90%E5%A0%B1%E9%BB%9E%E6%93%8A%E7%8E%87/?ref=cms.newsleopard.com)相關網頁並進行互動。

![電子報介面優化](https://cms.newsleopard.com/content/images/wordpress/2017/11/45637.jpg)

案例：[Tutorjr](https://www.tutorjr.com/?ref=cms.newsleopard.com)

### 3\. 點擊容易

手指比滑鼠需要更大的空間完成觸控的動作，所以最好能在不混淆信件的主要前題下，使用夠大的連結和按鈕，並增加元件之間的間距。[讓客戶無需放大畫面就能輕鬆的點擊](https://blog.newsleopard.com/%E5%A6%82%E4%BD%95%E3%80%8C%E8%A8%AD%E8%A8%88%E3%80%8D%E9%9B%BB%E5%AD%90%E5%A0%B1%E6%8B%AF%E6%95%91%E8%A2%AB%E6%8B%8B%E6%A3%84%E7%9A%84%E8%B3%BC%E7%89%A9%E8%BB%8A%EF%BC%9F/?ref=cms.newsleopard.com)（或讓整個區塊都能回應客戶的點擊）。

![電子報介面優化](https://cms.newsleopard.com/content/images/wordpress/2017/11/45638.jpg)

案例：[女人迷 Womany](https://womany.net/?ref=cms.newsleopard.com)

## 三、**響應式電子報的設計重點（Responsive Design）**

響應式設計則是以 HTML 優化版型，減少多餘縮放、平移和捲動的技術做法，讓信件可在電腦、智慧型手機或其他不同大小螢幕的行動裝置上閱讀或瀏覽，以提供客戶良好的閱讀體驗。操作的技巧有以下三種技巧：

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2021/06/rwd.jpg)

三種電子報介面優化技巧

### 1\. 包裝版型元素

透過包裝版型元素可讓電子報在手機螢幕上顯示更為流暢。這時可使用能同時應用於電腦和智慧型手機的網狀單元格（ grid structure ），藉一或兩欄的欄寬做為提升電子報可讀性的標準，而無需再做其他調整。

例如：某品牌手機的螢幕寬 320 pixels，所以若把電腦版的螢幕寬度設定成 640 pixels ，就會直接顯示出 2 欄圖示的網狀單元格（320 pixels \*2）。

### 2\. 替換顯示圖片

在手機開信時發現某張圖片比例看起來不對稱（在電腦上正常顯示的圖片，手機上不一定也能正常顯示）。可將手機螢幕的顯示圖片換成一張寬 320 pixels 的特製圖片。若圖片不清楚時可嘗試將圖片編輯為“尖銳化”。

例如：圖片的大小原始寬為 320 pixels，就可以 resize 為寬 640 pixels 的圖片，再於手機版型中使用 320 pixels 顯示，就能解決問題。

### 3\. 隱藏多餘圖片

即使[電子報的內容引起客戶注意](https://blog.newsleopard.com/email-content-design-subscriber-engagement-170817/?ref=cms.newsleopard.com)，但在載入電子報頁面時卻遲遲無法完成或載入失敗（圖片上被打了一個 X ），此情況下仍會讓客戶失去耐心而放棄閱覽。這時可透過響應式設計隱藏非必要的圖片，讓客戶仍可收到重要的資訊。或著也可於文字內容下放入「觀看圖片」的按鈕，讓客戶自行決定是否觀看。

## 四、**結論**

感覺上台灣上網人口在電子郵件的使用率不如歐美國家來的高。但在實際的調查數據中反倒證實其謬誤，我們可看到電子郵件收發與行動商務之間的趨勢發展。是以，行銷人員在規劃電子報時，除了暸解使用行動裝置的客戶外，還必須掌握各種上網裝置的螢幕顯示狀態，並針對不同裝置作內容瀏覽測試，以避免客戶收到電子報時發生閱覽障礙：內容段落冗長、連結不易點擊、圖片變形、開啟過慢或失敗…等。改變上述問題可確保電子報之可讀性，讓高效電子報結合行動裝置來作為貴公司行銷窗口，以滿足目前大量行動裝置用戶的需求。

* * *

延伸閲讀：[注意！電子報設計不「手機化」，你可能已喪失 61% 潛在顧客！](https://blog.newsleopard.com/email-marketing-newsletters-mobile-design/?ref=cms.newsleopard.com)

延伸閲讀：[主旨優化的 7 個秘訣＋A/B 測試，教你提升 Email 開信率](https://blog.newsleopard.com/email-marketing-optimize-subject-line-7-method-a-b-testing-increase-email-open-rate/?ref=cms.newsleopard.com)

延伸閲讀：[EDM 也可以萌萌噠！看看 Pinkoi 怎麼做](https://blog.newsleopard.com/edm-%e4%b9%9f%e5%8f%af%e4%bb%a5%e8%90%8c%e8%90%8c%e5%99%a0%ef%bc%81%e7%9c%8b%e7%9c%8b-pinkoi-%e6%80%8e%e9%ba%bc%e5%81%9a/?ref=cms.newsleopard.com)

延伸閱讀：[戳中笑點！Dropbox 用「幽默」提高電子報點閱率！](https://blog.newsleopard.com/email-marketing-dropbox-171017/?ref=cms.newsleopard.com)

延伸閱讀：[設計電子報時該注意什麼？這四個錯誤千萬不要犯](https://blog.newsleopard.com/%E8%A8%AD%E8%A8%88%E9%9B%BB%E5%AD%90%E5%A0%B1%E6%99%82%E8%A9%B2%E6%B3%A8%E6%84%8F%E4%BB%80%E9%BA%BC%EF%BC%9F/?ref=cms.newsleopard.com)