ENsearch btn

2021-11-29
Eric Wang

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網頁設計。

 

(延伸閱讀:想了解什麼是RWD,可參考此篇文章說明-3分鐘搞懂手機版網站-圖解說明什麼是RWD響應式網頁設計!

 

 

momo 1

 

 

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

 

 

 

 

 

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

AWD與RWD都已有相當純熟的技術,然而相較之下,較近期出現的RWD網頁跨平台技術,除了補足AWD的部份缺點外,在開發架構和開發進程上也不盡相同。

 

 

AWD與RWD差異比較表

 

 

AWD

RWD

中英文全名

自適應網頁設計

(Adaptive Web Design)

響應式網頁設計

(Responsive Web Design)

出現年代

較早期

較近期,於2010年由美國網頁設計師所提出

網址

wwwm兩個網址

只用www網址

開發順序

手機 > 平板 > 電腦

電腦 > 平板 > 手機

網頁檔案目錄

分為行動版(手機、平板)和電腦版兩個不同的檔案目錄,html和css也是分開處理。

單一目錄(包含html及css)。

適用對象

架構龐大、工程複雜的系統型網站平台。

企業網站、形象網站、品牌網站。

SEO

網頁載入速度較佳。

能減少重複內容問題、減少重新導向。

優點

可個別針對電腦或行動裝置的使用體驗進行設計。

可在同一個網址進行網頁切換。

缺點

須同時開發和維護兩個網站,其建置及後續維護成本較高。

在網頁設計階段,須同時考量多種裝置尺寸在同一網頁上的變化和呈現,設計挑戰度較高。

 

 

AWD與RWD差異比較範例

 

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

 

momo 1

 

 

 

 

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

 

r apple

 

 

 

 

 

 

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的方式進行網站建置。

 

 

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

 

 

 

* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司

 

 

網站設計服務諮詢

為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。

 

您可以直接填寫諮詢表單,或撥打諮詢電話 04-22210688

 

 

 

cadiis

Eric Wang

凱士網頁設計公司 專案經理 Eric,擁有設計、理工、管理等跨領域背景,樂於和不同領域的專業工作者進行分享與討論。在專案工作外,同時也兼任大學行銷系業界講師及企業內訓課程講師,長期致力於「網頁設計白話文運動」。

 

 

 

好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用體驗與企業形象。

 

需要網站設計服務嗎?

凱士為您設計製作優質網站

形象網站、公司網站、企業網站、
及各類型客製化網站系統平台

 

立即填表諮詢

想進一步了解網頁設計服務?