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

上星期我們談到了設計不良的電子報會帶給手機使用者負面的閱讀體驗，和兩個常見的解決方案：
1. 手機瀏覽最佳化 (Mobile Optimize)
2. 響應式設計 (Responsive Design)

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

什麼是響應式設計?

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

使用時機

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

重點與注意事項

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

有關實際操作方式，以下提供三個的技巧

包裝

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

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

替換

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

隱藏

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

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

你可以用下面的方式來提升使用者體驗並避免讓他們感到沮喪。

當你有很多圖片想給使用者看時，你的電子報可能會因此佔用太多時間來載入一些和他們無關(或不感興趣)的圖片，同時拉長電子報的長度。

透過響應式設計，你可以隱藏不必要的圖片，讓使用者收到更相關、密集的資訊(畢竟，手機使用者是容易分心的)。你可以加入「觀看圖片」的按鈕，讓訂戶有權決定是否觀看。

設計選項

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

字型

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

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

圖片

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

如果使用一般圖片，你可以：

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

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

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

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

原文出處：轉載自合作媒體「電子豹」