(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 行動版相關心得:
用官方的手機版本看網誌,是真的滿清爽的。
回覆刪除現在用平板上網的人越來越多,考量到這類族群,我是覺得就算用了行動版範本,桌面版也至少需要替直向螢幕作點最佳化,
回覆刪除否則轉直向字太小,橫向又需要放大螢幕,相當討厭。
官方在桌面版的預設viewport,是把寬度設成1100,很難想像一般7-10吋有裝置有大於這解析度的,即使是視網膜那種PPI超過300的,實際寬度通常也都在979px以下。
建議WFU日後可以寫一篇專門處理這類裝置的寫法,我想應該是蠻有用的
<3828475418414660689>(以上內容請勿刪除,從括號之後開始留言)印象中現在可以找到的資源已經算不少了,具體怎麼寫雖因人而異,但整體思路都提示的蠻清楚的。
回覆刪除而Blogger的範本內容可以區分成skin和template-skin二塊CSS,後面那項主要是控制版面與分欄的寬度。
若要使用回應式設計的話,其他修改的重點大抵上就是以這裡為主,再依情況另外調整一下留白、邊距和字級就差不多了。現在瀏覽器的開發者工具大都內建了回應式設計的工具,可以一鍵改解析度,要除錯也不算太難啦