想要改善 Blogger 行動版的網頁載入效能，最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章，那麼的確採取這個方案即可。如果你準備經營個人品牌、形象網站，那麼「官方行動版範本」顯然是不夠的，因為無法打造自己的版面效果，營造更好的視覺形象。
使用 RWD 範本也可以自訂行動裝置呈現的版面效果，然而缺點就是範本內容過於龐大，圖片尺寸跟網頁版一樣，導致行動裝置載入網頁的使用者體驗很差。
如果你是想加強行動版體驗、準備經營個人品牌的站長，那麼接下來的內容，可以知道客製行動版範本能做到哪些改善。
(圖片出處: pixabay.com)
一、版面效果
官方行動版的畫面很簡潔，但是讀者絕對感受不出跟網頁版是同一個網站，我們來舉個簡單的例子，這是「CC0 免費圖庫搜尋引擎」的網頁版畫面：
這是使用官方行動版的畫面，模擬 iPhone6 橫躺的效果：
上圖這樣的行動版，說實在還滿醜的，等於把自己的專業形象搞砸了。行動裝置使用率越來越高的情況下，為了維持風格的一致性，有必要對行動版下點功夫。
以下是調整過的行動版畫面，模擬 iPhone4 橫躺的效果：
以上兩圖調整了標頭圖案、頁尾的設計，讓網頁版與行動版的畫面一致，這也是形象網站的基本要求。
二、改善行動版效能
拜 Google 大神之賜，網路上免費的外掛可以很容易地取得，站長們也習慣在部落格嘗試各種外掛。如果是網頁版的話，或許桌上型電腦的配備執行起來比較沒問題，然而行動版就不一定了。
行動裝置由於體積小、且越做越薄，在這麼狹小、不亦散熱的空間中，要讓手機能跟桌機有一樣的執行效能實在太困難了。所以對於行動版範本，我們必須做出大量的取捨，沒必要的外掛最好通通不執行，網頁載入速度才能提升，如此才能有好的使用者體驗。
如果不清楚該如何取捨外掛的去留，那麼客製行動版的案子中可與 WFU 進行討論。
三、處理圖片尺寸
圖片是影響行動裝置載入速度的最大原因，因為載入速度取決於傳輸速度，而傳輸檔案之中，最大的都會是圖檔。
如果是旅遊、美食、攝影這一類的網站，那麼用手機開啟網站就要有心理準備了，在這麼小的螢幕、卻要開啟跟網頁版一模一樣的圖片尺寸，速度絕對比網頁版慢上好幾倍。
經由客製行動版範本，這個大問題將可以獲得解決，無論你的圖床放在 PICASA 或是 FLICKR，都可以經由處理後，將行動版的圖片改以小尺寸呈現，不再需要載入原尺寸。
四、行動版製作範例
以下行動版頁面請用手機檢視效果：
- 高雄美食 | 姐妹淘甜美食光：行動版首頁 | 網頁版首頁對照
- 阿包醫生．診療育兒故事：行動版文章頁面 | 網頁版文章頁面對照
- 熊本一家の生活紀實：行動版首頁 | 網頁版首頁對照
- 蓋亞影像工作室：行動版首頁 | 網頁版首頁對照
- Livia 寫意輕旅行：行動版文章頁面 | 網頁版文章頁面對照
- 小鐵星座：行動版文章頁面 | 網頁版文章頁面對照
- 會員系統：行動版頁面 | 網頁版頁面對照
這篇文章提供更多的設計範例，共有九個網站，供製作行動版的版型參考：
五、聯絡表單
過去 WFU 曾協助處理的架站案例，可參考「諮詢服務與提案合作」→「3. 網站作品集與讀者推薦」，同時該篇也有多位讀者發表從 WFU BLOG 獲得協助的感謝推薦心得。
經由以上介紹，有需要進行客製 Blogger 行動版範本的讀者，可參考「BLOGGER 行動版客製化作業流程」，用下面的表單與我聯繫：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。