AWD與RWD網站設計方式比較：怎麼選才適合你的網站需求？

    Eric Wang

 

裝置尺寸百百種，網站該如何做到跨平台瀏覽體驗一致？你可能聽過「響應式設計（RWD）」，但你知道其實在 RWD 盛行之前，自適應設計（AWD）才是行動網站的主流解法嗎？我們從AWD的起源出發，帶你了解它與 RWD 在設計邏輯、維護成本、SEO 表現與應用場景上的差異，幫助你選擇更符合網站定位的設計架構。

 

延伸閱讀：RWD是什麼？RWD響應式網頁概念一篇解析

 

 

AWD自適應網頁設計是什麼？

AWD 是什麼？AWD英文全名為 Adaptive Web Design，中文我們稱作「自適應網頁設計」。

自適應設計（AWD）曾經是網頁跨裝置設計的主要解法，在智慧型手機剛普及的時代，當時各種裝置螢幕尺寸規格不一，為了解決「桌機與手機瀏覽畫面失衡」的問題，這時AWD出現了！

 

AWD的運作概念為何？

主要是針對不同裝置，提供多套預設的畫面版型，並根據使用者的瀏覽器寬度自動載入適合的畫面，讓使用者在使用手機時，仍得以正常瀏覽網頁。這種「為不同裝置量身打造」的方式，能提供較高的畫面控制度，也讓某些高互動或高視覺要求的網站選擇使用AWD架構，但隨著CSS技術進步與行動裝置的普及，開發與維護更具彈性的RWD逐漸成為主流，即便如此，AWD 仍具備其獨特優勢，特別適合對「特定裝置優化」有需求的企業網站或平台系統。

 

如何判斷網站是否使用AWD？

列舉以下幾點判斷方式：

• 用電腦與手機開啟同一個網址，是否呈現完全不同的 HTML 結構與內容？若是，可能為 AWD。
• 檢查原始碼或使用Chrome開發者工具（DevTools）觀察排版變化，若是透過 CSS Media Queries 控制畫面寬度響應，則多為 RWD。
• 網站是否會跳轉至 m. 子網域？（如下圖）過去判斷網站是否為 AWD（自適應設計）的方式，常見的做法是觀察網址是否為手機版獨立子網域，例如：https://m.momoshop.com.tw/。

 

 

 

圖：momo購物網的AWD自適應網頁(手機版網頁)（https://m.momoshop.com.tw/）在手機和電腦裝置上所呈現的差異 

 

 

AWD與RWD網頁有何差異？優缺點一次搞懂！

雖然 AWD 和 RWD 都是為了解決「網站在不同裝置上有良好體驗」的問題，但它們的實作邏輯與後續維護方式卻截然不同，請參考以下表格來比較兩者的差異：

 

AWD與RWD功能差異比較表

	AWD	RWD
中英文全名	自適應網頁設計 Adaptive Web Design(AWD)	響應式網頁設計 Responsive Web Design(RWD)
出現年代	早期	近期（於2010年由美國網頁設計師所提出）
技術概念	「用多套網頁對應不同裝置」 針對不同裝置設定多組版型（如手機版、平板版、桌機版），系統根據裝置資訊載入對應版本。	「一套網頁多裝置適應」 以單一網站架構為基礎，畫面自動隨螢幕尺寸調整。
開發與維護成本	需設計、維護多組畫面與排版邏輯，開發與後續更新成本相對較高。	共用同一套程式與內容架構，維護效率較高，成本較可控。
適用對象	對特定裝置需高度優化的網站，如架構龐大的系統型網站平台、互動式平台、App WebView	企業形象網站、品牌官網、電商平台等常見商業應用。
SEO效果	會產生多個裝置專用頁面，容易導致內容重複、SEO 分散。	所有裝置共用相同頁面與網址，有利於Google爬蟲索引。
優點	不同裝置可使用完全獨立的畫面設計，精細程度較高。 各裝置只載入所需的內容，載入效率高。	跨裝置使用者體驗一致，且維護效率高。 SEO管理更簡潔且友善。
缺點	每個裝置版本需分開設計與開發，開發與維護成本高。 對SEO操作較不友善 多版本內容需個別管理，易產生資訊不同步問題。	設計挑戰度與學習曲線較高。 無法完全兼容舊網站。

 

延伸閱讀：手機版網站與RWD網頁差在哪？舉例說明手機版的常見問題

 

 

AWD與RWD差異比較畫面範例

 臉書採用AWD自適應網頁(分成手機版網頁和電腦版網頁)，其中手機版網頁（ https://m.facebook.com/）在手機和電腦裝置的版面不會自動切換

 

 

 

 

 

Apple官網採用RWD響應式網頁技術（https://www.apple.com/tw/）在手機和電腦裝置上自動切換版面呈現

 

 

 

 

 

 

 

AWD與RWD網頁如何選擇？3訣竅必看！

由於使用行動裝置的消費者大幅增加，建置良好的行動版網頁，提供友善的瀏覽畫面，才能提升使用者體驗，進而增加消費者的停留時間和互動率。該選擇AWD還是RWD？以下提供3個面向，教你挑選出適合的網頁設計！

 

1.依不同網站類型

如果你的網站是企業網站、形象網站或品牌網站，一律建議採用RWD的方式進行開發，主要是因為這類型網站並非聚焦在行動裝置使用上，同時又比較重視電腦版所呈現的形象感，因此採用RWD開發方式較適合。而如果是大型購物商城、行動裝置系統平台，則可採用AWD方式進行開發，較能針對行動裝置使用者設計，提供較佳的使用體驗。

 

2.依網站目標對象

如果你的網站在電腦和手機個別有不同的使用族群，或不同的使用情境，或需要有不同的使用體驗，使用AWD的方式較能依不同的使用族群，打造出個別適合的軟體環境。而如果是普羅大眾都可以上的網站，相容性較廣的RWD，則較能符合一般大眾的需求。

 

3.依公司維護預算

由於AWD網站需要同時開發及維護2個網站，雖然都抓相同內容的資料庫，但對於前置的系統開發與後續的網站維護皆需花費較多成本。因此就長期的營運來說，AWD較適合公司內部團隊進行開發。而若是委外由網頁設計公司進行網站設計開發，則建議採用RWD的方式，日後的網站維護工作也會較為單純。

 

 

AWD與RWD網頁哪個對SEO比較好？

Google於2020年9月已全面執行「行動版內容優先索引」，顧名思義，行動版網站會成為Google優先檢索及影響排名的依據。AWD及RWD網頁設計哪一個對SEO比較好？接下來請看我們詳細的比較說明。

 

避免重複內容

由於AWD採用手機版、電腦版兩個不同網址，對Google來說，容易判定為有重複內容的網站，因此AWD網站需在手機版HTML註明「電腦版的對應網址」，Google演算法才能將電腦版和手機版網站區分開來、各別收錄。而RWD由於是同一個網址的同一份資料內容，因此較無這方面的問題。

 

減少重新導向

AWD因手機版、電腦版網址不同，在切換裝置時，工程師通常會採用「重新導向」的方式，讓兩個版本的網站相互對應、自動轉換。但在SEO中，重新導向越少越好，較少的重新導向能避免導向到錯誤的網址或是無限導向，或讓使用者等待時間過長，導致較高的跳出率。

 

網頁載入速度

近來Google在網頁載入速度加強演算法上的權重，並不斷公開表示網頁載入速度是決定自然排名、關鍵字廣告排名的要素之一。由於AWD在開發流程上是針對手機版的使用體驗進行網站開發，因此可針對手機裝置量身訂做HTML、JavaScript、CSS，讓手機版網站得到較佳的網頁載入效能。相較之下，RWD必須把眾多跨平台裝置版本的HTML、JavaScript、CSS都在同一個頁面去執行，檔案較肥大，因此經常需要採用快取技術來加快網頁載入速度。

 

 

SEO檢視項目	AWD	RWD
避免重複內容	❌	✔️
減少重新導向	❌	✔️
網頁載入速度	✔️	🔶

（符號說明：✔️效果較佳；❌效果較差；🔶持平）

 

 

AWD網頁常見QA┃和RWD不再傻傻分不清

Q1. 一般公司的網站建議採用AWD，還是RWD的方式進行製作？

由於公司網站通常較重視形象視覺，網站使用對象也多以電腦網頁進行瀏覽，因此在網站建置上，建議以RWD方式進行製作，可以讓公司網站達到較佳的使用者體驗。

 

Q2. AWD和RWD哪一個是現在主流的跨平台網站設計解決方案？

RWD是針對AWD進行改善的跨平台網頁技術。RWD在網站開發、SEO表現、後續維護、視覺呈現都能得到較佳的表現，因此各大網頁設計公司幾乎都是以RWD做為主要的跨平台網站設計解決方案。

 

Q3. 採用AWD對SEO會有影響嗎？

AWD採用雙網站的網頁架構，在「內容重複性問題」及「網頁重新導向」都會產生對SEO較為不利的結果，如要採用AWD在SEO方面需要有相對的配套措施。因此，為了有利於SEO排名，近年來許多網站已逐漸改用RWD的方式進行網站建置。

 

延伸閱讀：搞懂 SEO 有多難？新手也能快速理解的搜尋引擎優化全攻略！

 

 

凱士網頁設計是位於台中的網頁設計公司，擁有各種產業的網站設計經驗，能協助企業提升網路品牌形象，建立良好的使用體驗。你可透過網站參考我們曾設計過的網站案例，例如：形象網站、企業網站、客製化網頁、RWD網頁設計等，來確認你的需求並透過線上表單與我們聯繫，我們將有專人與你聯絡！