2016年7月8日

Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理

A+
blogger-mobile-faq在「Lazy Load 圖片延遲載入 」留言 #6,+Ala Go 提出了一個觀點:「我的行動版即使使用"網頁版",載入也頗快的,就用"網頁版"頂著先」。

根據與他的一系列對話,以及其他讀者的相關提問,覺得可以將處理 Blogger 行動版時,各種可能的狀況與疑問整理一下,做成一篇 FAQ 問答,查閱起來比較方便。

(圖片出處: pixabay.com)



Q1:是否可以使用網頁版當作行動版?


這的確是部分 Blogger 站長的選項,且 WFU 也遇過要求先用網頁版官網充當行動版網站的案子,主要是預算考量,待流量上升後再製作行動版。

不過 Google 已經調整了搜尋演算法,這樣的做法會讓搜尋結果受到不好的影響。同時,拿網頁版充當行動版,還有很多不良的後果,需要審慎考慮這件事。

會關閉行動版的 Blogger 站長,通常是使用了自適應(RWD)範本,才能讓網頁在行動裝置正常顯示,且可通過 Google 的行動裝置測試。

另外需要提醒的是,也許我們自己的手機硬體效能不錯,所以覺得就算使用網頁版,在手機載入的速度也頗快。然而一方面可能是常瀏覽的網站有被快取(cache),一方面不是每個訪客的手機硬體都是最新的規格,因此很可能忽略了其他人手機開啟網頁的速度。



Q2:Google 調整演算法的影響?


可參考官方發佈的消息「Rolling out the mobile-friendly update」,這次的演算法主要針對行動搜尋,首先要確認我們的網站是否通過了 Google 的「行動裝置相容性測試」,可到這個網址進行測試:


如果沒有在 Blogger 後台關閉行動版的話,那麼絕對能通過測試沒有問題。若是關閉了行動版、又沒使用 RWD 範本,自然不會通過測試,那麼行動搜尋的結果就會很糟,進而影響行動裝置的流量。

想瞭解更多此次 Google 調整演算法的影響,可參考這篇「如何因應 Google 行動搜尋演算法更新?」。



Q3:網頁版充當行動版不良的後果?


除了影響行動搜尋的結果,首先我們來看一下「行動裝置相容性測試」失敗的 "模擬畫面":

blogger-mobile-friendly-test-fail

如上圖紅框,關閉行動版會造成的影響就是 Google 標示的這其中兩點:

  • 文字太小,不易閱讀
  • 連結之間距離太近

很顯然這些都是基於「使用者友善的閱讀體驗」考量,為了讓訪客易於操作、閱覽我們的行動版網站頁面,開啟 Blogger 行動版是 Google 鼓勵並推動的方向。



Q4:使用行動範本,內文無法正常顯示?


Ala 另外還表示:「官方行動範本/自訂,都 ... 太簡潔/無法正常顯示(內文也沒出來),令人一度很困擾」。過去 WFU 使用官方行動範本時,也常出現這樣的情形。

由於本站分享大量的工具及程式碼,自然常常在文章中穿插許多 js code。我的經驗是,某些 js 的確會讓官方行動範本處理時出錯,導致內容全部消失

但是哪些 js 會出錯、哪些不會出錯,很難給個 SOP 式的答案。如果讀者也出現類似情形的話,我也只能給予跟 Ala 一樣的答案:「在內容消失的區塊範圍,逐一清除 js 進行 debug,來找出哪個 js 是罪魁禍首」。



Q5:行動版如何 debug 有問題的 js?


喜歡修改範本的讀者,一定在範本中裝了不少 js 工具,說不定有些不用後沒移除乾淨,或有些沒安裝好,加上沒有做好「範本版本控制」的話,可能會覺得網頁怪怪的,但又不知如何 debug。

這裡順帶提供一個快速 debug 的流程:

  • 先備份範本,記錄一下範本中確定需要的 js 及位置。
  • 如果要 debug 文章區塊(包含留言區塊)的話,在後台範本 → 編輯 HTML → 將迷你組件範本回覆為預設值 → 勾選「Blog1」→ 還原所選小工具

這樣文章區塊就整個清乾淨了,接下來把之前記錄的 js 一個個裝回去,這樣會是清掉 bug 比較快速的流程。

以此類推,如果要 debug 別的區塊,那麼就勾選其他區塊的工具來還原即可。



Q6:行動版無法顯示安裝的小工具?


Google+留言框及留言提醒功能」的留言 #5 詢問「我的網站有使用Google+留言板,可是行動版網頁卻顯示不出來
請問要怎麼做調整呢?」。

實際上不光是這個工具,本站所寫的其他小工具,在行動版都不一定能顯示出來。可參考「Blogger 自訂行動版範本實作 (2)」→「六、文章區塊」→「1. 正規作法」,行動版文章區塊的內容是獨立出來的,跟範本中的網頁版分屬不同區塊。

在網頁版安裝的工具,可以出現在網頁版文章區塊;但同樣的工具如果要出現在行動版範本文章區塊,那麼自然得修改行動版範本的文章區塊才行。



Q7:行動版製作的實例參考?


除了「Blogger 自訂行動版範本實作」三篇系列文,還可參考我的「行動版懶人 RWD」心得,裡面也有其他網站的實作範例。



更多 Blogger 行動版技巧:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。