2015年6月6日

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

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

Wayne Fu 0 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 行動版客製化作業流程」,用下面的表單與我聯繫:

稱呼:(必填)
電子郵件:(必填)
您的網址或提問的相關網址:(必填)
簡單自介、如何找到本站:(必填)
請詳細描述您的需求、問題或意見,如提供的資訊不足,可能無法回覆:(必填)


0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP