什麼是 RWD、什麼是 AWD?
什麼是 RWD、什麼是 AWD?

什麼是RWD響應式網站?什麼是AWD自適應網站?

你是不是也越來越常用手機瀏覽不同的網站呢?RWD響應式網站設計就是將一個網站設計成各裝置平台都可以使用,不論在電腦、平板、手機上都可以瀏覽使用。AWD自適應網站設計則是以手機裝置為優先,分別設計手機、平板、電腦,三種尺寸的網站。

目錄

根據 Google 2017年的統計,將近60%的人們使用手機瀏覽網站,而且比例越來越高。這時候如果沒有重視網站在手機上的呈現效果,可能會流失相當多的潛在客戶。目前手機上的網站分為兩大趨勢:響應式網站(Responsive Website Design,簡稱RWD)及自適應網站(Adaptive Web Design,簡稱AWD)。

響應式網站設計(RWD)

此概念於2010年5月由美國網頁設計師Ethan Marcotte所提出,響應式網頁設計逐漸變得更加重要,是因為行動裝置流量現在占網際網路流量的一半以上。因此,Google 宣布行動裝置時代Mobilegeddon的到來(2015年4月21日),如果搜尋行為是來自行動裝置,將會提高對行動裝置友善的網站排名。

RWD網站會依螢幕大小縮放,至多會有5~6種尺寸大小的分別,這是目前最常見的網頁設計方式,也是趨勢。這種設計可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。 對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。

RWD
RWD

優勢:不論在任何裝置上都有一致的介面體驗,解決了網站佈局上的管理,有著單一的網址能增加 SEO 的效果
劣勢:縮小的過程,更要考量結構上的變動。當網站內容層級和資訊量很多的時候,呈現的東西就有限。

對響應式網站來說,是將電腦版網頁設計經由縮放時變成平板、手機不同裝置大小的網站,思考途徑是由大到小

自適應網站設計(AWD)

針對電腦、平板、手機來分別做三種尺寸的網站,最強調行動優先(Mobile-First),在響應式網站還沒盛行的時候,主要以此種類型為主。

AWD網頁會針對裝置大小,設計不同的網頁內容,因此手機版的內容勢必比網頁版更簡潔,在手機網頁載入時也較快,其優點是方便使用者操作,但缺點是內容豐富度可能會差較多。

截圖 2022 10 02 下午7.20.08
以Facebook網站為例
IMG FCD9BACD84C9 1
手機網址為https://m.facebook.com

優勢:專門為手機而設計,充分優化了功能。
劣勢:開發成本高,維護要花2倍功夫,無法完全符合到各種螢幕大小,所以在一定範圍內還是要有一點響應式的設計。而因為有三種尺寸的網站,在網址上就會需要做特別的管理,比較常見的是在手機上有多一個 m.xxxx.com 開頭的網域,看起來就會有好多個網站。

常見的AWD網頁像是:Facebook博客來MOMO購物網…等大型社群或購物網站,皆是採用自適應的方式,讓使用者更為順暢地進行消費。

而以自適應來說,由於是從小、中、大,分別來思考,依每種大小來思考什麼是最精簡的核心內容了,讓這個核心內容透過不同的方式呈現。

自適應網頁設計強調服務行動上網的用戶,基礎的顯示必須要正確呈現,但進階的功能就會受到限制,所以行動用戶所看到的不僅是排版上的差異,連內容都有受到限制。

延伸閱讀:

Share 分享 :

分享在 facebook
分享在 twitter
分享在 telegram
分享在 email
Related Post

最新文章

網站設計 留白設計

乾淨的網站介面:15 個網站設計留白技巧

網站設計的多樣化我們時刻可以感受到,在瀏覽不同網站的時候,哪種網頁設計可以讓使用者覺得舒適、願意繼續瀏覽?乾淨簡約的風格越來越流行,讓我們一起來看看網站設計留白技巧吧!

Selected Post

精選文章

黑帽SEO

什麼是黑帽SEO?要避免的9種危險手法

以前許多行銷人員大量使用黑帽SEO策略對網站進行排名;然而,時代變了,大家逐漸瞭解到使用白帽SEO才能真正幫助網站長久發展。在本文中,將深入探討如果您不想違反演算法或網站管理員指南,應該避免使用哪些SEO手法。

定期維護網站

定期維護網站的重要性

你的網站是不是做好就放在那裡,好幾年沒有去更新、維護它呢?許多人可能不知道定期維護網站的重要性,讓這篇文章為你說明。

WordPress 維護

16個 WordPress 維護的技巧

網站架好了要如何進行 WordPress 維護?你需要定期維護網站核心功能、安裝的外掛、主題和其他方面。WordPress 是一個很棒的內容管理平台,但做好網站維護是讓你的網站在市場上走得更久的關鍵。