Catch Box 行動模式

這次改版是因為我最近的網頁技術課程結束,而進入找工作的階段,做為告別學生時期的階段轉換紀念,再加上網頁技術提升後,原有模版不敷使用,所以本站模版進行大更新 !

大家如果先前逛過這個Blog,最近又回來參觀的話,應該會發現本站從十月十一號之後,外觀上做了大更新,但最近因為在辦理找工作的一些手續,加上體力很差 (被拖走…) ,所以先前都沒有發布更新相關的公告文,現在才補上來,這次外觀改變頗大,增加了不少機制,所以希望大家能習慣 !

本文將介紹模版更新的原因及細節,但除此之外也改了關於本站的相關頁面及一些隱藏機制,至於其他改變,將於下一篇公告文一起介紹,接下來將介紹模版更新的相關原因

更換模版的理由 – 行動模版網頁設計

 

Google 行動版檢視器

Google Developers Mobile themes

測試器連結:Google Developers 行動裝置適用性測試

因為智慧型手機越來越流行,因此Google搜尋引擎就將網頁是否符合行動友善納入考量,如果網站相容於行動裝置,Google會 提高此網站的SEO分數,分數提高之後,網站在搜尋引擎的排行將往前挪,網友會更容易搜尋到這個網站

原本的模版並不符合這個標準,不符合行動友善的原因也會寫在上面,如果你的網站是採用WordPressJoomla!等CMS架設的網站,Google Developers也提供相關建議,建議站長怎麼修改才能符合Google對行動頁面的標準

 

原模版及更新模版原因

原版模板 Summ

↑ 這是原模版

這是原模版,而這個模版是預設的樣子,變更模版的原因有兩個,一個是舊模版被我改得亂七八糟,再來是網頁設計的新需求,早期的模版(也就是原模版)因為大家的螢幕尺寸都有限,所以固定成1024*768就好,可是近年來隨者電腦螢幕尺寸越來越大(目前主流是1920*1080 Full HD,將來會朝4K發展),再加上智慧型手機已成主流,因此行動版網頁也越來越被重視,再加上我偶而也會用行動裝置瀏覽這個Blog,所以也考慮設置行動模版

但是採用套件方式安裝行動模版卻發現因為效果不佳(樣式跑掉之類的),再加上我受夠了某些行動版網站的錯誤示範(參見下方的錯誤示範章節),所以我廢除了原本使用行動版套件的方案、亦不安裝行動模版,也為新的模版訂出以下要求

 

不良的手機模板網頁錯誤示範

因為看多了網路上某些網站(尤其是新聞網站)切換行動模版的方法實在不太好,讓我來實際DEMO一下

1. 當網友透過行動瀏覽器轉貼網址時,可能會誤複製成行動版網址

不良的手機模板 1

部分採用行動版模版與桌面版分離的機制時,不是樣版切換,而是區分成子網域,分割成桌面版網址與行動版網址不同的情況,網友透過手機瀏覽器的分享按鈕時,可能誤貼行動版網址,如果桌面版的網友點進去就會直接進入第二步

2. 點進去,行動版網址並未對桌面瀏覽器做處理,以至於跑版及使用者閱讀時的各種不方便

不良的手機模板 2

這種情況就是行動/桌面版模版偵測器只做一半的情況,如果以手機點選桌面版連結,畫面就可能會切換成這個行動版網頁,但反之如果行動版瀏覽器瀏覽這個新聞頁面又直接分享,使用電腦瀏覽器的網友點進來時,就會直接進入行動版網址,而跳不回桌面版,而部分行動版樣版有”切換電腦版頁面”的按鈕設計,但是部分網站一按下這按鈕,就會直接進入首頁而必須重新尋找此文章的桌面版,造成使用者瀏覽起來不方便

第二個問題是,照片解析度的問題,手機版的圖片一般來說不需要太大,所以會再壓縮一次圖片行程縮圖以節省流量,但是以電腦瀏覽此頁面時,因為直接瀏覽行動版,照片比桌面版更小,無法瀏覽桌面版尺寸的照片,網友事後必須再切換一次網頁才能看到尺寸更大的圖檔,造成不方便 !

為了這些問題,我嘗試了Wordpress模板套件,及各種手機樣板,試了好幾次放棄掉,而最近針對模板進行了新要求,又找了幾個模板,從去年八月測試到現在,總算找到新模板好上線了 ! 以下是我對新模板的要求,請看下個章節

 

新模板要求

我的行動模版需求

  1. 行動模版不改變網址結構
  2. 行動模版必須有自動偵測使用者螢幕尺寸的需求
  3. 桌面模版與行動模版共用同一個模版,方便修改
  4. 新模版的配色及功能與本站類似,我不須大幅修改即可上線 (3、4是因為我的模版採用部分自訂式語法,請參見此公告)
  5. 刪除所有以Flash運作的網頁元件 (Google對於行動頁面的要求之一,基於安全考量及手機性能考量而取消Flash相容性)

注意:請避免此錯誤示範( X ),部分新聞網站會將使用者導向行動版模版連結,但是缺乏模螢幕判斷機制,一旦使用者以PC瀏覽文章且未切回傳統模版,將造成跑版,而且也缺乏傳統模版連結(或按鈕太小),可參考Plurk的 這篇噗文

經過再三的挑選及思考,加上裝了行動模版的各種套件,外掛式模版常常跑版,而Wordpress官方團隊開發的Jetpack會讓我的網站噴記憶體錯誤的訊息出來,實在是受夠了 ! 所以最後廢除了行動模版方案,改用目前新式的 響應式網頁設計 Responsive web design (英文縮寫:RWD), 網頁模版較佳 !

 

新舊模版介紹

 

Summ (原本的模版)

原版模板 Summ

模版連結:Summ – Free WordPress Theme

 

Catch Box (新模版)

預設瀏覽樣式

新版模版 Catch Box 桌面模式

行動瀏覽樣式

Catch Box 行動模式

 模版連結:Catch Box – Free WordPress Theme

現在新模版經過測試後,在尚未公告之下啟用(其實也違反SOP了,原本應該公告後才能啟用),如今新模版已運作超過兩個月,雖然尚未套用自訂模版的語法,不過這個新模版看起來沒有太大的問題,所以這個模版已經通過測試了,即日起本文章正式啟用囉 !

 

模板特色 自訂選項

Catch Box  Custom page

 

這一頁是自訂頁面,雖然頁面有提示說即將取消此頁面,將來將改由外觀→自訂頁面為主,但看得出這裏有許多選項,能設定外觀的顏色、圖片對齊等設定,把頁面拉到最底部還有Custom CSS Styles欄位可以設定,就不需要另外弄個子模板下去修改

Catch Box  Custom CSS Styles

而Wordpress的自訂頁面中,也加入了部分該模板提供的設定選項,一樣有Custom CSS Styles欄位,使用者也可以透過這個區域設定自己想修改的CSS樣式,對我來說比較方便些,也算是這個模板的特色之一

以上新模版的自我介紹就此結束 ! 不過我還改了其他地方並未公布到,下一篇文章將對其他變更作介紹,各位晚安 ! 我們下篇文章見囉 !

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料