CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

你真的需要手機版網站?還是好的 RWD 網頁設計

有沒有電腦登入 Line 或是 FB Messenger 時,打開朋友傳過來的連結,卻發現解析度很低,還只用到一點點螢幕顯示區塊,看起來就跟在手機上瀏覽時一樣的經驗呢?

若是能仔細看一下連結,非常有可能在 https:// 後面,都會看到「 m. 」的網址形式。代表點擊進去,將會是瀏覽「手機版」的網站,而非 RWD 響應式網頁設計的網站。

左邊是 FB 行動版,右邊則是購物網站行動版

手機版網頁|上個世代的過渡產物

手機版網頁是在 RWD 設計尚未普及時的趨勢主流,在 iPhone 4 左右的年代(嘿嘿,用手機型號當做一個年代忠實的反映出手機不管在大小、速度、性能上,給人類的改變有多大),當時還有流行過一波「人人都做 App 」的時代,但隨著 Html 5 與 css 的完整性慢慢提升、各大瀏覽器已禁用速度緩慢的 flash ,漸漸地,響應式網站設計以:「內容為水」( Content is Water )的核心概念崛起,在現在早已成為網頁設計的標準配備。

現在仍有許多「大型網站」仍使用「手機版網頁」的設置,不過都會有些特別的前提,像是蘋果日報(資訊量大且許多人使用手機瀏覽)、臉書 Facebook (但許多人手機裡都有 Facebook 的 App )、大型購物平台網站(近來也慢慢整合 App 、會員機制,希望的就是消費者黏著度更高,像是東森購物、蝦皮等等)。

手機版網頁可說是彈性切版問世之前的折衷選擇,憑伺服器自動判斷顯示螢幕的解析度( breakpoint ),使得進到網頁的使用者自動切換成手機版瀏覽,的確是當時因應手機螢幕發展還存著許多變數,螢幕解析度紊亂的折衷選擇。

相信許多企業也在當時可能找過 App 開發商,或者設計過手機版網頁,但隨著 2011 年後, RWD 被廣為人知,Google 於 2015 年正式宣布行動裝置的年代到來(Mobilegeddon),更讓一波波網站改版實現。

內容為水的概念,就說明內容依照載具變化,是形容 RWD 最好的比喻(來源

手機版網頁與 RWD 網頁優劣比較

好的手機版網頁,會做的與電腦版有相同的品牌識別,並且針對手機操作的 UI 優化。但是不好的手機版網頁設計,往往讓使用者彷彿進到一個新的網頁,動線和使用情境與原本的電腦版網頁差距甚大,甚至會有找不到資料、需求無法被滿足的情況,這就不是企業所樂見的。

不可避免的,建立了第二個網站,就需要人力來維運(沒錯,手機版網頁維護通常視作另一個網站)。確認文章是否有更新、產品上架時是否兩邊一致、有無錯誤連結的頁面等等,都會是維護另一個手機版網站的繁雜工序。這些步驟當然可藉由程式來簡化,但還是比不上在網頁設計之初,即採用 RWD 的設計來的簡單、直覺。

另一個手機版網頁的重大缺點,即是不利於 SEO 和網域的名聲累積。對於搜尋引擎來說,手機版網頁與電腦版會視作兩個不同的網頁,當使用者搜尋某一關鍵字時,Google 會針對可能的瀏覽時間、與頁面互動的情況來判斷排名,有可能完全搜尋不出其一的網站內容,最差的情況還有可能變成「重複內容」,導致網站成為 Google 的黑名單。(此情況是可以避免的,後續將有文章提及。)

什麼網站可能需要「手機版」的設計

♞ 網站資訊量極大,像是新聞、資訊匯集站。舉裡來說,像是各大新聞網、大型入口網站。但採用這樣的作法,也要大到不是很在意 SEO 和已經壟斷某種程度的流量了。

♞ 商品繁多之購物型網站。若你是屬於像是 momo 購物、樂天這樣的購物平台網站,因期分層、商品種類繁多,有時候需要針對手機的使用者經驗重新規劃,手機版或是 App 都會是解決之道,還可以搭配各種會員的玩法來增加回購等電商指標。(若商品品項不多的中小型電商,WordPress 內建許多模版,都可以達到很好的 RWD 效果了!)

♞ 不管電腦版啦!有些網站因為性質,可能是短期活動,可能是瀏覽者僅有 10% 以下使用電腦瀏覽。那麼就乾脆做一個手機專屬的網站,此時也不用特別稱作「手機版」,而是:「我的網頁就是長這樣!」吐槽一下,其實 RWD 也可以做到以手機為優先考量,畢竟現在手機解析度這麼多元,你能確保你的網站真的適用於 everyone 嗎?

RWD 身為標準配備,你怎麼能夠不認識他

響應式網頁設計,英文全名是 Responsive Web Design,維基百科上的定義為:『 RWD 是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。』

以 WordPress 模版建置來說,現在幾乎所有模版都包含了 RWD 的設置,只是隨著每一次切版,調整欄位,在某些解析度的呈現上,慢慢失去預設完美的樣式。對於沒有工程背景的客戶來說,無論找有經驗的網頁設計公司,或是對於網頁技術了解的 freelancer ,都能在模版的基礎下順利修改,以達到 RWD 版型的宗旨:「 Mobile First 」 ,來呈現品牌在網路的最大門面!

網站能否在手機上正確顯示,已成為主流

(圖為 CTK Pro 作品)

延伸閱讀

Aron Lai

數位行銷工具應用者。從企劃、文案、社群、網路行銷工具無所不包。 希望大腦可以和網路資料庫連結,緩解資訊焦慮症狀。

Follow: