2014年4月7日

Blogger 應該選擇自適應範本(RWD), 還是行動版範本?

A+

(Pic from: my-blogshop-tool.blogspot.com)
在行動裝置瀏覽量不斷攀升的趨勢下,如何服務行動裝置的讀者,是 Blogger 站長們開始要考慮的課題。

Blogger 本身已經提供了行動版範本,不過似乎自適應範本(Responsive Web Design)功能更為強大,那麼到底應該如何抉擇呢?請見以下逐項分析。



一、自適應範本的優缺點


1. 優點
  • 自適應範本能根據訪客的螢幕尺寸,自動調整區塊排列方式、或區塊大小
  • 網路上能找到大量的免費自適應範本下載
  • 不必另外寫行動版程式碼,因此方便維護

2014.4.12 補充:+Lee Bruce 於「Blogger中文社群討論串」提供這個免費的 50 個 Blogger 自適應範本下載:


2. 缺點
  • 範本檔案較大,在手機裝置上載入的時間較久,網頁執行效率不如行動版流暢
  • 非官方範本,跟 Blogger 官方功能可能有衝突
  • 網路上的 hack 教學不一定能套用
  • 任何修改都得自己來,不一定找得到教學,需要一定程度的程式撰寫能力。

這個「Blogger中文社群討論串」對於手機載入速度有不錯的實例佐證。

2014.4.12 補充:+Mark X 於這個「Blogger中文社群討論串」的留言,提供了自行測試手機板網頁載入速度的線上服務。可利用該線上服務,測試 Blogger 網頁版與手機板的載入速度:
  • 網頁版網址:http://你的網址.blogspot.com/
  • 手機板網址:http://你的網址.blogspot.com/?m=1

3. 建議

看起來這是 Blogger 最容易維護的方案,不過 WFU 會對大部分使用者建議 "不要使用",除非你屬於下列族群:
  • 下載了自適應範本後,不會新增、刪除、修改原範本任何功能
  • 屬於 Blogger 修改老手,會自行寫 code、修改版面

只要不屬於以上狀況,那麼下載來的範本,八成看不懂裡面的程式碼;想要修改該範本,不一定能找到教學;最重要的是,許多網路上的實用 hack 教學,在這些非官方範本不一定能適用。

如此一來,將來對該範本的任何修改,都可能是一種痛苦。原本選擇 Blogger 平台的使用者,多半著眼於其自由度,但使用了非官方範本、又不會修改時,只能被該範本給綁住,對大分使用者而言,算是失去了原本的初衷。



二、Blogger 行動版範本的優缺點


1. 優點
  • 官方有不少現成範本可以套用
  • 手機上的載入速度快、網頁執行效率高
  • 想自訂版面、功能的話,可使用行動版「自訂」範本

2. 缺點
  • 使用官方的行動版範本,無法修改任何自訂功能、工具,完全是「唯讀」的狀態。
  • 使用行動版「自訂」範本的話,所有的功能都得自己寫,一個部落格需要維護兩套範本

3. 建議

如果不在意行動版的功能、版面效果,那麼使用官方行動版範本是非常輕鬆的一個選項,完全不需要額外的維護。

然而想要自訂行動版範本的話,這其實有些門檻,因為:
  • 範本裡混合網頁版與行動版程式碼,維護上不太容易
  • 行動版所有的功能都要自己寫
  • 行動版版面配置得自己調整 CSS
  • 除了要會寫網頁程式碼,還需要精通 Blogger 語法

所以 WFU 的結論是,想要自己修改行動版範本,除了這是非常大的一個工程,還需要更多的耐心與基礎知識。因為網頁版要修改,可能很多資源可以 google 到;但行動版的資料在網路上不一定能搜尋到,到頭來能否實現自己要的功能,可能會取決於寫程式的能力。



三、混合自適應範本與行動範本


總和以上兩項的分析,我們抓出各自的優點、排除缺點後,儼然可以找出一個最佳解:混合自適應範本與行動範本──
  • 在網頁版、平板裝置的部分,可以使用「自適應範本」
  • 在手機的部分,可以使用「官方行動版範本」

如此一來,這是維護時間及成本最低的選擇。然而,雖然這是最佳解,但也不見得適用於每個人。那麼,最終究竟該如何下決定呢?



四、你適合哪一種選項?


以下針對不同的族群,做出對應的建議:

1. 只想專心寫文章,不會去修改範本
  • 自適應範本 + 官方行動版範本

如果確定不會去新增、修改任何範本內容的話,只專注在寫文的族群,那麼以上為建議使用的範本組合,只需要挑個滿意的自適應範本即可。


2. 有修改能力、也有時間拆解自適應範本
  • 自適應範本
  • 自適應範本 + 自訂行動版範本

如果是網頁高手,能夠自己寫程式,也有時間瞭解下載來的自適應範本程式碼,那麼可以針對自己的需求,來使用上述兩種方案之一。


3. 想專心寫文章,也有一點點修改能力
  • 網頁版官方範本 + 官方行動版範本
  • 網頁版官方範本 + 自訂行動版範本

剩下的族群,應該就是本站的讀者群了,除了寫文章之外,也喜歡對自己的部落格不時裝扮一下,偶爾上網搜尋小工具或 hack,來修改網頁版範本的內容。

除了修改網頁版的範本,如果還想進一步自訂行動版範本的話,那麼請靜待下一篇修改行動版範本的重點整理,同時也建議先複習一下「Blogger 範本__(一)各種註解方式及區塊的修改」系列的文章,作為進入下個階段的準備。


Blogger 行動版相關心得:

6 則留言:

  1. 用官方的手機版本看網誌,是真的滿清爽的。

    回覆刪除
  2. <52715844285024402>(以上內容請勿刪除,從括號之後開始留言)是啊,說不定你可以把手機板的網址存到書籤,看起來清爽、速度又快 :)

    回覆刪除
  3. 現在用平板上網的人越來越多,考量到這類族群,我是覺得就算用了行動版範本,桌面版也至少需要替直向螢幕作點最佳化,
    否則轉直向字太小,橫向又需要放大螢幕,相當討厭。

    官方在桌面版的預設viewport,是把寬度設成1100,很難想像一般7-10吋有裝置有大於這解析度的,即使是視網膜那種PPI超過300的,實際寬度通常也都在979px以下。

    建議WFU日後可以寫一篇專門處理這類裝置的寫法,我想應該是蠻有用的

    回覆刪除
  4. <1236693889404728297>(以上內容請勿刪除,從括號之後開始留言)關於自適應版面的語法,目前還沒有研究啊~等到這個站的讀者行動裝置比例飆高時,我也不得不研究了..XD

    之前 Blogger 社群有成員分享了幾篇改自適應版面的語法心得,也許可以去找找看~

    回覆刪除
  5. <3828475418414660689>(以上內容請勿刪除,從括號之後開始留言)印象中現在可以找到的資源已經算不少了,具體怎麼寫雖因人而異,但整體思路都提示的蠻清楚的。

    而Blogger的範本內容可以區分成skintemplate-skin二塊CSS,後面那項主要是控制版面與分欄的寬度。
    若要使用回應式設計的話,其他修改的重點大抵上就是以這裡為主,再依情況另外調整一下留白、邊距和字級就差不多了。現在瀏覽器的開發者工具大都內建了回應式設計的工具,可以一鍵改解析度,要除錯也不算太難啦

    回覆刪除
  6. <5530224885520812804>(以上內容請勿刪除,從括號之後開始留言)算是不小的工程,還是得等有空才能研究這一塊了~

    回覆刪除

張貼留言注意事項:

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