# 實戰教學：如何讓手機使用者不再秒殺你的電子報（下）

> 


平均來說，大約有 40% 的電子郵件是透過手機和平板電腦開啟的。不幸的是，這些可以順利在電腦上開啟的電子報，卻在不知不覺中帶給在手機上瀏覽的訂戶負面體驗。





之前的文章跟大家分享過，設計不良的電子報會帶給手機使用者負面的閱讀體驗，和兩個常見的解決方案：





1. 手機瀏覽最佳化 (Mobile Optimize)
2. 響應式設計 (Responsive Design)





手機瀏覽最佳化的實作方式在上一篇文章中已經討論過，因此本篇文章將繼續討論響應式設計的實作方式。






什麼是響應式設計?





一種 HTML的技術做法，可使頁面在多種瀏覽裝置（電腦、行動電話或其他行動產品裝置）營幕大小上閱讀和瀏覽，並讓使用者避免無意義的縮放、平移和捲動。





使用時機





當訂閱者使用手機/平板的原生電子郵件app開信時





重點與注意事項





 * 較手機瀏覽最佳化複雜
 * 預設透過 yahoo 或 Gmail 等相關電子郵件 app 接收訊息
 * 針對使用手機的訂閱者，需要花時間確認內容的優先順序
 * 可以隱藏大部份的圖片及影

**分類：** 電子報優化  
**作者：** Andy.Chou  
**發布日期：** 2014-11-19T23:34:09.000+08:00


平均來說，大約有 40% 的電子郵件是透過手機和平板電腦開啟的。不幸的是，這些可以順利在電腦上開啟的電子報，卻在不知不覺中帶給在手機上瀏覽的訂戶負面體驗。

之前的文章跟大家分享過，設計不良的電子報會帶給手機使用者負面的閱讀體驗，和兩個常見的解決方案：

1\. 手機瀏覽最佳化 (Mobile Optimize)  
2\. 響應式設計 (Responsive Design)

[手機瀏覽最佳化](https://blog.newsleopard.com/%E5%A6%82%E4%BD%95%E8%AE%93%E6%89%8B%E6%A9%9F%E4%BD%BF%E7%94%A8%E8%80%85%E4%B8%8D%E5%86%8D%E7%A7%92%E6%AE%BA%E4%BD%A0%E7%9A%84%E9%9B%BB%E5%AD%90%E5%A0%B1%EF%BC%88%E4%B8%8A%EF%BC%89/?ref=cms.newsleopard.com)的實作方式在上一篇文章中已經討論過，因此本篇文章將繼續討論響應式設計的實作方式。

## **什麼是響應式設計?**

一種 HTML的技術做法，可使頁面在多種瀏覽裝置（電腦、行動電話或其他行動產品裝置）營幕大小上閱讀和瀏覽，並讓使用者避免無意義的縮放、平移和捲動。

**使用時機**

當訂閱者使用手機/平板的原生電子郵件app開信時

**重點與注意事項**

-   較手機瀏覽最佳化複雜
-   預設透過 yahoo 或 Gmail 等相關電子郵件 app 接收訊息
-   針對使用手機的訂閱者，需要花時間確認內容的優先順序
-   可以隱藏大部份的圖片及影像，但無法加入新的

## **響應式設計**的 3 個技巧

## 1.包裝

許多人都有這樣的經驗：用手機開電子報，閱讀時卻發現手指必須不停的滑動…最後完全不記得看過了什麼，或是早已分心到別處。

透過包裝版型元素，你的電子報在手機營幕裡會顯得更流暢。考慮使用能同時在一般電腦和智慧型手機的網狀單元格 (grid structure)。例如，iPhone 的螢幕寬 320 pixels，因此如果你把電腦版的寬設定成 640 pixels ，它就可以放入2欄寬的網狀單元格 (320 pixels\*2) ，無需做額外的調整。以一欄或兩欄寬做標準以提升可讀性。

[![包裝](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112512/wrap_it.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112512/wrap_it.jpg?ref=cms.newsleopard.com)

## 2.替換

並非所有的圖片都可以在手機上正確顯示，因此用手機開信時，有時候會發現某張圖片看起來不太自然。例如：一張桌面圖在電腦上看起來很自然，並不代表它可以直接被應用在手機上，然而你可以將手機顯示的圖片換成一張特製的寬 320 pixels 圖片。如果圖片不夠清楚，你可以將圖片” 尖銳化”。例如：原始圖片的大小是寬 320 pixels，你可以 resize 為寬640 pixels 的圖片，然後在手機版型中使用 320 pixels 顯示，這樣問題就解決了。

[![替換](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112513/swap_it.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112513/swap_it.jpg?ref=cms.newsleopard.com)

## 3.隱藏

面對以下兩種情況，即使你的內容和訂戶有關，仍可能讓他們失去耐性：

1.  載入網頁似乎需要一個世紀。
2.  圖片上被打了個 X ，載入失敗

你可以用下面的方式來提升使用者體驗並避免讓他們感到沮喪。  
當你有很多圖片想給使用者看時，你的電子報可能會因此佔用太多時間來載入一些和他們無關(或不感興趣)的圖片，同時拉長電子報的長度。  
透過響應式設計，你可以隱藏不必要的圖片，讓使用者收到更相關、密集的資訊(畢竟，手機使用者是容易分心的)。你可以加入「觀看圖片」的按鈕，讓訂戶有權決定是否觀看。

[![隱藏](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112514/hide_it-300x263.jpg)](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2014/11/22112514/hide_it.jpg?ref=cms.newsleopard.com)

## 設計選項

這裡提供幾個可以和響應式設計併用的電子報設計選項

### 字型

你可以對系統字型進行以下設定：

-   設定字體的大小、顏色、字體、粗斜體、底線、變形
-   設定行間距
-   改變文字區塊的邊界
-   將整個文字方塊隱藏
-   將文字方塊內特定的字隱藏
-   調整文字方塊的位置
-   換行

### 圖片

相較於背景圖片，一般圖片有更多的操作空間。大部分的情況下，會建議使用一般圖片。如果使用一般圖片，你可以：

-   可以透過縮放調整圖片大小
-   透過隱藏的色片切割圖片
-   可以被隱藏
-   調整位置時較為容易

如果使用背景圖片，你可以：

-   可以透過設定 img src 更換圖片
-   可切割圖片
-   可以被隱藏

* * *

延伸閱讀：[如何讓手機使用者不再秒殺你的電子報（上）](https://blog.newsleopard.com/%E5%A6%82%E4%BD%95%E8%AE%93%E6%89%8B%E6%A9%9F%E4%BD%BF%E7%94%A8%E8%80%85%E4%B8%8D%E5%86%8D%E7%A7%92%E6%AE%BA%E4%BD%A0%E7%9A%84%E9%9B%BB%E5%AD%90%E5%A0%B1%EF%BC%88%E4%B8%8A%EF%BC%89/?ref=cms.newsleopard.com)