想要改善 Blogger 行動版的網頁載入效能,最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章,那麼的確採取這個方案即可。
如果你準備經營個人品牌、形象網站,那麼「官方行動版範本」顯然是不夠的,因為無法打造自己的版面效果,營造更好的視覺形象。
使用 RWD 範本也可以自訂行動裝置呈現的版面效果,然而缺點就是範本內容過於龐大,圖片尺寸跟網頁版一樣,導致行動裝置載入網頁的使用者體驗很差。
如果你是想加強行動版體驗、準備經營個人品牌的站長,那麼接下來的內容,可以知道客製行動版範本能做到哪些改善。
(圖片出處: pixabay.com)
官方行動版的畫面很簡潔,但是讀者絕對感受不出跟網頁版是同一個網站,我們來舉個簡單的例子,這是「CC0 免費圖庫搜尋引擎」的網頁版畫面:
這是使用官方行動版的畫面,模擬 iPhone6 橫躺的效果:
上圖這樣的行動版,說實在還滿醜的,等於把自己的專業形象搞砸了。行動裝置使用率越來越高的情況下,為了維持風格的一致性,有必要對行動版下點功夫。
以下是調整過的行動版畫面,模擬 iPhone4 橫躺的效果:
以上兩圖調整了標頭圖案、頁尾的設計,讓網頁版與行動版的畫面一致,這也是形象網站的基本要求。
拜 Google 大神之賜,網路上免費的外掛可以很容易地取得,站長們也習慣在部落格嘗試各種外掛。如果是網頁版的話,或許桌上型電腦的配備執行起來比較沒問題,然而行動版就不一定了。
行動裝置由於體積小、且越做越薄,在這麼狹小、不亦散熱的空間中,要讓手機能跟桌機有一樣的執行效能實在太困難了。所以對於行動版範本,我們必須做出大量的取捨,沒必要的外掛最好通通不執行,網頁載入速度才能提升,如此才能有好的使用者體驗。
如果不清楚該如何取捨外掛的去留,那麼客製行動版的案子中可與 WFU 進行討論。
圖片是影響行動裝置載入速度的最大原因,因為載入速度取決於傳輸速度,而傳輸檔案之中,最大的都會是圖檔。
如果是旅遊、美食、攝影這一類的網站,那麼用手機開啟網站就要有心理準備了,在這麼小的螢幕、卻要開啟跟網頁版一模一樣的圖片尺寸,速度絕對比網頁版慢上好幾倍。
經由客製行動版範本,這個大問題將可以獲得解決,無論你的圖床放在 PICASA或是 FLICKR,都可以經由處理後,將行動版的圖片改以小尺寸呈現,不再需要載入原尺寸。
過去 WFU 曾協助處理的架站案例,可參考「諮詢服務與提案合作」→「4. 合作網站」,同時該篇也有多位讀者發表從 WFU BLOG 獲得協助的感謝推薦心得。
經由以上介紹,有需要進行客製 Blogger 行動版範本的讀者,參考報價請前往「會員加值文章」的頁面,另外請用下面的表單與我聯繫:
如果你準備經營個人品牌、形象網站,那麼「官方行動版範本」顯然是不夠的,因為無法打造自己的版面效果,營造更好的視覺形象。
使用 RWD 範本也可以自訂行動裝置呈現的版面效果,然而缺點就是範本內容過於龐大,圖片尺寸跟網頁版一樣,導致行動裝置載入網頁的使用者體驗很差。
如果你是想加強行動版體驗、準備經營個人品牌的站長,那麼接下來的內容,可以知道客製行動版範本能做到哪些改善。
(圖片出處: pixabay.com)
一、版面效果
官方行動版的畫面很簡潔,但是讀者絕對感受不出跟網頁版是同一個網站,我們來舉個簡單的例子,這是「CC0 免費圖庫搜尋引擎」的網頁版畫面:
這是使用官方行動版的畫面,模擬 iPhone6 橫躺的效果:
上圖這樣的行動版,說實在還滿醜的,等於把自己的專業形象搞砸了。行動裝置使用率越來越高的情況下,為了維持風格的一致性,有必要對行動版下點功夫。
以下是調整過的行動版畫面,模擬 iPhone4 橫躺的效果:
以上兩圖調整了標頭圖案、頁尾的設計,讓網頁版與行動版的畫面一致,這也是形象網站的基本要求。
二、改善行動版效能
拜 Google 大神之賜,網路上免費的外掛可以很容易地取得,站長們也習慣在部落格嘗試各種外掛。如果是網頁版的話,或許桌上型電腦的配備執行起來比較沒問題,然而行動版就不一定了。
行動裝置由於體積小、且越做越薄,在這麼狹小、不亦散熱的空間中,要讓手機能跟桌機有一樣的執行效能實在太困難了。所以對於行動版範本,我們必須做出大量的取捨,沒必要的外掛最好通通不執行,網頁載入速度才能提升,如此才能有好的使用者體驗。
如果不清楚該如何取捨外掛的去留,那麼客製行動版的案子中可與 WFU 進行討論。
三、處理圖片尺寸
圖片是影響行動裝置載入速度的最大原因,因為載入速度取決於傳輸速度,而傳輸檔案之中,最大的都會是圖檔。
如果是旅遊、美食、攝影這一類的網站,那麼用手機開啟網站就要有心理準備了,在這麼小的螢幕、卻要開啟跟網頁版一模一樣的圖片尺寸,速度絕對比網頁版慢上好幾倍。
經由客製行動版範本,這個大問題將可以獲得解決,無論你的圖床放在 PICASA或是 FLICKR,都可以經由處理後,將行動版的圖片改以小尺寸呈現,不再需要載入原尺寸。
四、聯絡表單
過去 WFU 曾協助處理的架站案例,可參考「諮詢服務與提案合作」→「4. 合作網站」,同時該篇也有多位讀者發表從 WFU BLOG 獲得協助的感謝推薦心得。
經由以上介紹,有需要進行客製 Blogger 行動版範本的讀者,參考報價請前往「會員加值文章」的頁面,另外請用下面的表單與我聯繫: