2015年6月6日

客製 Blogger 行動版範本, 改善網頁載入效能

A+
blogger-mobile-customize-template-improve-speed-客製 Blogger 行動版範本, 改善網頁載入效能想要改善 Blogger 行動版的網頁載入效能,最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章,那麼的確採取這個方案即可。

如果你準備經營個人品牌、形象網站,那麼「官方行動版範本」顯然是不夠的,因為無法打造自己的版面效果,營造更好的視覺形象。

使用 RWD 範本也可以自訂行動裝置呈現的版面效果,然而缺點就是範本內容過於龐大,圖片尺寸跟網頁版一樣,導致行動裝置載入網頁的使用者體驗很差。

如果你是想加強行動版體驗、準備經營個人品牌的站長,那麼接下來的內容,可以知道客製行動版範本能做到哪些改善。

(圖片出處: pixabay.com)


一、版面效果


官方行動版的畫面很簡潔,但是讀者絕對感受不出跟網頁版是同一個網站,我們來舉個簡單的例子,這是「CC0 免費圖庫搜尋引擎」的網頁版畫面:

cc0-wfublog-web-客製 Blogger 行動版範本, 改善網頁載入效能


這是使用官方行動版的畫面,模擬 iPhone6 橫躺的效果:

cc0-wfublog-mobile-1-客製 Blogger 行動版範本, 改善網頁載入效能


上圖這樣的行動版,說實在還滿醜的,等於把自己的專業形象搞砸了。行動裝置使用率越來越高的情況下,為了維持風格的一致性,有必要對行動版下點功夫。

以下是調整過的行動版畫面,模擬 iPhone4 橫躺的效果:

cc0-wfublog-mobile-2-客製 Blogger 行動版範本, 改善網頁載入效能

cc0-wfublog-mobile-3-客製 Blogger 行動版範本, 改善網頁載入效能

以上兩圖調整了標頭圖案、頁尾的設計,讓網頁版與行動版的畫面一致,這也是形象網站的基本要求。



二、改善行動版效能


拜 Google 大神之賜,網路上免費的外掛可以很容易地取得,站長們也習慣在部落格嘗試各種外掛。如果是網頁版的話,或許桌上型電腦的配備執行起來比較沒問題,然而行動版就不一定了。

行動裝置由於體積小、且越做越薄,在這麼狹小、不亦散熱的空間中,要讓手機能跟桌機有一樣的執行效能實在太困難了。所以對於行動版範本,我們必須做出大量的取捨,沒必要的外掛最好通通不執行,網頁載入速度才能提升,如此才能有好的使用者體驗。

如果不清楚該如何取捨外掛的去留,那麼客製行動版的案子中可與 WFU 進行討論。



三、處理圖片尺寸


圖片是影響行動裝置載入速度的最大原因,因為載入速度取決於傳輸速度,而傳輸檔案之中,最大的都會是圖檔。

如果是旅遊、美食、攝影這一類的網站,那麼用手機開啟網站就要有心理準備了,在這麼小的螢幕、卻要開啟跟網頁版一模一樣的圖片尺寸,速度絕對比網頁版慢上好幾倍。

經由客製行動版範本,這個大問題將可以獲得解決,無論你的圖床放在 PICASA 或是 FLICKR,都可以經由處理後,將行動版的圖片改以小尺寸呈現,不再需要載入原尺寸。



四、行動版製作範例


以下行動版頁面請用手機檢視效果:

這篇文章提供更多的設計範例,共有九個網站,供製作行動版的版型參考:




五、聯絡表單


過去 WFU 曾協助處理的架站案例,可參考「諮詢服務與提案合作」→「3. 網站作品集與讀者推薦」,同時該篇也有多位讀者發表從 WFU BLOG 獲得協助的感謝推薦心得。

經由以上介紹,有需要進行客製 Blogger 行動版範本的讀者,可參考「BLOGGER 行動版客製化作業流程」,用下面的表單與我聯繫:



沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。