行動優先網頁設計與響應式網頁設計?你選哪一個?

行動優先網頁設計與響應式網頁設計?你選哪一個?

BLOG日誌內其實已經介紹過許多 RWD 網站設計的訣竅,像是表格與 RWD 的愛恨情仇,Youtube 嵌入影片 ifram 的 RWD 調整方式,都是現代網站必須的。不過!就是這個 but ,到底我們是從原始人的觀點(網路世界五到十年應該算是夠原始了吧?),真的所有的 Responsive Web Design 都符合行動優先(Mobile First)的思維嗎?

DATE 2018-11-12

行動優先網頁設計與響應式網頁設計?你選哪一個?

Nov 12, 2018

BLOG 日誌內其實已經介紹過許多 RWD 網站設計的訣竅,像是表格與 RWD 的愛恨情仇Youtube 嵌入影片 ifram 的 RWD 調整方式,都是現代網站必須的。不過!就是這個 but ,到底我們是從原始人的觀點(網路世界五到十年應該算是夠原始了吧?),真的所有的 Responsive Web Design 都符合行動優先(Mobile First)的思維嗎?

看看一些數據,為何行動裝置上的瀏覽如此重要:

圖片出自 We Are Social

行動裝置上網的佔比,早在 2016 年超過電腦2017年調查也顯示,台灣使用手機購物,也超過了用電腦購物的人(嘿,這一定是所有廠商最想看到的使用者行為吧)。上圖的 We Are Social 每季度的報告,再再告訴我們,用手機上網的使用者已經遠遠超過使用電腦的使用者了。

Responsive Web Design 的概念真的萬用?

Responsive Web Design 的概念就是將網站內容視作「水」一般,放到不同的容器(解析度),就會呈現不同的樣子。但假使我今天只是要喝口水,有人卻用澡盆幫你裝過來,將會是做何感想?

所以企業們要考量自己的網站的使用者型態,來決定網頁內容和設計。舉例來說,今天你是間 B2B 公司,使用者主要瀏覽你網站的時間集中在白天下午的上班時段,也多是用筆電、桌上型電腦來瀏覽,那麼 RWD 的設置,就可以符合網站內可能大量資料、規格的呈現,且在電腦相對大螢幕上得到最適體驗。

但今天換做一個親子內容網站,多數使用者可能使用平板、手機在晚上時段瀏覽,且使用者年齡可能多為 8-15 歲(雖然此項數據不容易在流量分析軟體看出來)。那麼以網頁為前提的網站設計,即便是做的很好的 RWD 也不見得可以讓使用這在手機這類的行動裝置上,得到最好的體驗。

另外,為了配合美觀和設計,部分文章或是其摘要,也會有建議的字數限制,可說網站規劃中,內容架構、設計、最終文案需要看做一體來執行,會達到最好的成效。

行動優先的思維不可缺少

想要在行動裝置上,得到最好的體驗,就得劃破原來的框架,在設計最初,就啟用行動優先(Mobile First)的思維,讓我們看一下這兩者差異:

這兩種設計思維是完全不一樣的,目前來說,仍是個有利弊,但以「行動優先」來設計,仍是未來設計的大趨勢(畢竟竟是往人潮多的地方走),就讓我們來看看兩者有何優劣?

響應式網頁設計 Responsive Web Design

優勢:
-資訊量龐大的網站,且呈現許多結構化資料,商品細節等
-可以具備較多動態效果、互動性設計選擇較廣泛
-SEO 架構較符合搜尋引擎喜好
-網頁設計成本相對低廉,已經具備許多預設好模版

缺點:
-對手機、平板體驗,僅能做到「次好」的
-對於多變的手機觸控操作方式、手機版廣告,需要花費心力重新布局、設計

整體來說,響應式網頁設計身為跨時代的解決方案,時值今日還是非常管用的,許多 WordPress 模版也都有一定程度的響應式設計,但隨著裝置推陳出新,新的解析度,新的手機操作方式,都為網頁設計帶來新的風潮。

以電腦版本的 RWD 設計下,還是很適合承載大量資訊,像是規格表、比較表格、影片、特殊動畫等等。在 RWD 概念下,有些電腦上才有的互動/動畫效果,也多傾向手機不顯示。

行動優先設計 Mobile First Design

優勢:
-較開發一個手機 App 便宜
-專為手機操作流程優化,完整的手機、平板體驗
-未來趨勢潮流(某些類型網站主要群眾超過 75% 使用行動裝置瀏覽)

缺點:
-不適合承載資訊量龐大的網站
-使用電腦的體驗,需要花心力完善

其實多數網頁使用 RWD 設計,在瀏覽上也絕無問題,但許多研究顯示,人們使用手機、電腦的目的和時間、時段,差距仍存在著,用行動優先的思考模式,就是試圖去做到像是:網頁類 App 體驗、更快的讀取速度(也就是為何 Google 要推行 AMP 網頁)、更大的字體、每次滑動都可以輕易看到行動呼籲(Call to Action)等等。

想要在人們通勤時、上廁所、睡前都抓住人們的眼球?從行動優先這樣的概念發起,準不會錯!

趨勢和內容決定你的網頁設計方式

過去,行動網站的 SEO 可能不被如 Google 這類的搜尋網站所喜愛,自 2016 年以降,Google 不斷提昇行動搜尋的重要性,包含 Google 搜尋在手機上的成果,到近期使用率越來越高的語音輸入、十月份正式進入台灣的 Google 語音助理,這早已不再是行動優先設計的劣勢。

圖片來源:資策會於 2018 年作的調查

雖然做到極致的 Responsive Design 應該也可以在行動裝置上也有 98% 的體驗,但就如同所有設計一般,早期階段的框架和觀點,往往決定了後續的成品。若還停留在從「電腦網頁」調整「手機版適用頁面」,勢必侷限住許多僅能在手機上完成的操作方式。

但是要如何選擇「行動優先」亦或「響應式網頁設計」呢?遵循你的使用者足跡就沒錯了!

以 80/20 法則來說,若八成的目標群眾都是用桌上型裝置瀏覽,當然可以使用 RWD 的設置,反而言之,當有八成的使用者以行動裝置瀏覽網頁,行動優先的設計就是必要的。

但當使用者差不多的時候怎麼辦呢?預測潮流就是你決定的重要指標。

從 2011 的每天 0.8 小時行動裝置使用時間,到了隔年即增長至每天 1.6 小時。 2017 已經來到了 4 個小時左右,是為超過兩倍的成長。

雖然手機使用時間大幅增加,但研究顯示,人們使用電腦的時間,其實與過去差不了多少,代表手機使用時間可能是吃掉其他休閒,像是閱讀、睡前的時間等等,當人們使用電腦時,多數還事許多有目的性的活動。

那麼,瀏覽網頁的方式,廣告擺設的內容、位置是不是就可以因此分開?我睡前滑手機的時候,肯定不想看到推廣我 CRM 系統的廣告;上班時間找新聞資訊網,也不可能點擊昨晚逛網拍看過的衣服和玩具……聰明有電商頭腦如你,想必已經知道該怎麼做了吧?

mobile first RWD web design 網頁設計 行動優先 響應式網頁設計