AWD和RWD兩種網頁設計跨裝置平台技術有什麼不同?

Eric Wang
2021-10-28

AWD v.s RWD
跨平台網頁技術

當我們談到跨平台網頁設計時,首先就會先接觸到兩個看起來很像的專有名詞,一個是RWD(響應式網頁設計),一個是AWD(自適應網頁設計),這兩個到底有什麼不同呢?

 

讓我們先來看看什麼是AWD自適應網頁設計。

 

 

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

AWD自應適網頁設計,英文為Adaptive Web Design,又稱AWD網站。屬於早期的跨平台網頁設計解決方案,個別針對電腦、行動裝置(平板、手機)個別建置網站。當初眾多平台網站工程師為了在電腦版網站以外提供較佳的手機瀏覽,在原先的電腦版網站之外,另外建立了獨立的手機版網站。例如臉書目前仍在使用的:m.facebook.com,就是典型AWD網站。由於是為了手機及行動裝置所建置的,因此也強調Mobile-First 行動優先。

 

 

 

 

 

 

AWD有什麼缺點?

由於AWD是採用兩個獨立的網址(www.網域及m.網域)做為網站跨平台裝置的設計方式,因此在切換不同裝置使用時,還是會有一些先天上無法解決的問題。

 

 

 

 

 

 


AWD在跨裝置顯示的問題

當你用手機在LINE傳m網頁給朋友,而朋友是用電腦在LINE中打開網頁時,就會看到像這樣的畫面。

這個m網頁的畫面其實只能在手機裝置中才能正常顯示。

 

在電腦中瀏覽m.facebook.com時的畫面呈現結果

 

bar momo

在電腦中瀏覽m.momoshop.com.tw時的畫面呈現結果

 

bar momo

 

 

 

 

AWD在SEO優化上的問題

由於SEO的經營價值都在網址上,而AWD採用兩個網址的結果,會造成網站流量分散,沒辦法集中在單一官網上。

 

AWD在網站維護上的問題

由於AWD是兩個獨立的網站,因此在日後網站的程式修改或更新,也是要個別維護。

 

 

 

AWD的替代方案:RWD響應式網頁設計

AWD上述這些問題,對於FACEBOOK或MOMO購物這類的平台網站並不構成問題,但對大部份的企業網站、形象網站來說,採用AWD方式進行網站開發建置,不僅會造成客戶端使用上的困擾,也會造成後續維護上的問題。因此後來就產生了RWD響應式網頁設計,成為AWD在企業形象網站上的最佳實作方式。

 

 

 

 

 

RWD響應式網頁和AWD自適應網頁,有什麼差別?

RWD網頁是採用單一網頁,讓不同的裝置可以在同一個網址上看到相同的內容,例:www.apple.com。RWD透過CSS技術對裝置寬度做出判斷,讓客戶端可以在電腦、行動裝置(手機、平板)上自動調整版面配置,並得到最佳顯示效果。因此不用擔心你的網站在手機看網頁和在電腦看網頁時,兩個互相切換時會顯示上的問題。

 

 

 

 bar momo