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

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

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

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

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

什麼是響應式設計?

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

使用時機

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

重點與注意事項

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

響應式設計的 3 個技巧

1.包裝

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

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

2.替換

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

3.隱藏

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

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

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

設計選項

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

字型

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

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

圖片

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

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

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

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

---

延伸閱讀：如何讓手機使用者不再秒殺你的電子報（上）