根據 Google 2017年的統計,將近60%的人們使用手機瀏覽網站,而且比例越來越高。這時候如果沒有重視網站在手機上的呈現效果,可能會流失相當多的潛在客戶。目前手機上的網站分為兩大趨勢:響應式網站(Responsive Website Design,簡稱RWD)及自適應網站(Adaptive Web Design,簡稱AWD)。
響應式網站設計(RWD)
此概念於2010年5月由美國網頁設計師Ethan Marcotte所提出,響應式網頁設計逐漸變得更加重要,是因為行動裝置流量現在占網際網路流量的一半以上。因此,Google 宣布行動裝置時代Mobilegeddon的到來(2015年4月21日),如果搜尋行為是來自行動裝置,將會提高對行動裝置友善的網站排名。
RWD網站會依螢幕大小縮放,至多會有5~6種尺寸大小的分別,這是目前最常見的網頁設計方式,也是趨勢。這種設計可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。 對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。
優勢:不論在任何裝置上都有一致的介面體驗,解決了網站佈局上的管理,有著單一的網址能增加 SEO 的效果。
劣勢:縮小的過程,更要考量結構上的變動。當網站內容層級和資訊量很多的時候,呈現的東西就有限。
對響應式網站來說,是將電腦版網頁設計經由縮放時變成平板、手機不同裝置大小的網站,思考途徑是由大到小。
自適應網站設計(AWD)
針對電腦、平板、手機來分別做三種尺寸的網站,最強調行動優先(Mobile-First),在響應式網站還沒盛行的時候,主要以此種類型為主。
AWD網頁會針對裝置大小,設計不同的網頁內容,因此手機版的內容勢必比網頁版更簡潔,在手機網頁載入時也較快,其優點是方便使用者操作,但缺點是內容豐富度可能會差較多。
優勢:專門為手機而設計,充分優化了功能。
劣勢:開發成本高,維護要花2倍功夫,無法完全符合到各種螢幕大小,所以在一定範圍內還是要有一點響應式的設計。而因為有三種尺寸的網站,在網址上就會需要做特別的管理,比較常見的是在手機上有多一個 m.xxxx.com 開頭的網域,看起來就會有好多個網站。
常見的AWD網頁像是:Facebook、博客來、MOMO購物網…等大型社群或購物網站,皆是採用自適應的方式,讓使用者更為順暢地進行消費。
而以自適應來說,由於是從小、中、大,分別來思考,依每種大小來思考什麼是最精簡的核心內容了,讓這個核心內容透過不同的方式呈現。
自適應網頁設計強調服務行動上網的用戶,基礎的顯示必須要正確呈現,但進階的功能就會受到限制,所以行動用戶所看到的不僅是排版上的差異,連內容都有受到限制。
延伸閱讀: