AWD和RWD哪個比較好？3招教你挑選適合的網頁設計！
AWD及RWD是現今相當常見的網頁設計，兩者存在一樣的目的，都是為了讓網頁可以因應不同的設備或裝置，例如：筆電、桌機、平板和手機等，在不同的螢幕尺寸和解析度下，都能顯示最佳畫面。然而，AWD與RWD在技術使用上仍存有差異，今天就來為大家比較兩者的優缺點，以及教你如何選擇何時使用AWD或RWD，幫助你挑選出適合的網頁設計方式。
快速導覽
AWD自適應網頁設計是什麼？
AWD自適應網頁設計英文全名為 Adaptive Web Design（簡稱AWD）。AWD是RWD響應式網頁技術出來之前，針對網站跨平台裝置所提出的解決方案。由於手機畫面是直式且畫面較小，過去針對電腦的使用經驗（橫式版面且畫面較大），無法適應手機的瀏覽模式，因此開發出獨立的手機版網站，讓使用者在使用手機時，仍得以正常瀏覽網頁。
要判斷是否為AWD網頁，可檢視網址是否以“m”開頭，例如：臉書（https://m.facebook.com/）、momo購物網（https://m.momoshop.com.tw/），代表該網站有提供額外的AWD網頁設計。
圖：momo購物網的AWD自適應網頁(手機版網頁)（https://m.momoshop.com.tw/）在手機和電腦裝置上所呈現的差異
AWD與RWD網頁有何差異？優缺點一次搞懂！
跟AWD概念容易混洧的另一個較新的網頁技術是RWD。AWD與RWD都已有相當純熟的技術，然而相較之下，較近期出現的RWD網頁跨平台技術，除了補足AWD的部份缺點外，在開發架構和開發進程上也不盡相同。
AWD與RWD功能差異比較表
|
AWD |
RWD | |
|---|---|---|
|
中英文全名 |
自適應網頁設計 （Adaptive Web Design） |
響應式網頁設計 （Responsive Web Design） |
|
出現年代 |
較早期 |
較近期，於2010年由美國網頁設計師所提出 |
|
網址 |
www及m兩個網址 |
只用www網址 |
|
開發順序 |
手機 > 平板 > 電腦 |
電腦 > 平板 > 手機 |
|
網頁檔案目錄 |
分為行動版（手機、平板）和電腦版兩個不同的檔案目錄，html和css也是分開處理。 |
單一目錄（包含html及css）。 |
|
適用對象 |
架構龐大、工程複雜的系統型網站平台。 |
企業網站、形象網站、品牌網站。 |
|
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方式進行製作，可以讓公司網站達到較佳的使用者體驗。
延伸閱讀：AWD和RWD哪個比較好？3招教你挑選適合的網頁設計！
Q2. AWD和RWD哪一個是現在主流的跨平台網站設計解決方案？
RWD是針對AWD進行改善的跨平台網頁技術。RWD在網站開發、SEO表現、後續維護、視覺呈現都能得到較佳的表現，因此各大網頁設計公司幾乎都是以RWD做為主要的跨平台網站設計解決方案。
Q3. 採用AWD對SEO會有影響嗎？
AWD採用雙網站的網頁架構，在「內容重複性問題」及「網頁重新導向」都會產生對SEO較為不利的結果，如要採用AWD在SEO方面需要有相對的配套措施。因此，為了有利於SEO排名，近年來許多網站已逐漸改用RWD的方式進行網站建置。
凱士網頁設計是位於台中的網頁設計公司，擁有各種產業的網站設計經驗，能協助企業提升網路品牌形象，建立良好的使用體驗。你可透過網站參考我們曾設計過的網站案例，例如：形象網站、企業網站、客製化網頁、RWD網頁設計等，來確認你的需求並透過線上表單與我們聯繫，我們將有專人與你聯絡！
＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司
|
網站設計服務諮詢 為什麼推薦台中網頁設計公司凱士數位？位於台中的凱士相對有機會接觸到各種不同的產業面向，擁有各種產業的網站設計經驗，幫助企業提升網路品牌形象，建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求，歡迎聯絡我們。
您可以直接填寫諮詢表單；撥打諮詢電話 04-22210688；或加入凱士LINE由專人與您聯繫。 |
|
Eric Wang 凱士網頁設計公司 專案顧問 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。
|
好的形象網站設計，可以幫助公司提升品牌形象與企業價值，透過清楚的網站架構與視覺設計，造就良好的使用體驗與企業形象。
需要網站設計服務嗎？
凱士為您設計製作優質網站
形象網站、公司網站、企業網站、
及各類型客製化網站系統平台
