傳說中的RWD、AWD是什麼？用哪個好？帶您一探究竟

Net-Chinese

·

2022-05-01

·

RWD是什麼？怎麼運作的？

RWD是現行最為主流的網站設計方式，為響應式網頁設計(Responsive Web Design)的簡稱，亦稱為回應式網頁設計或適應性網頁設計。其最大的特點為可配合各種螢幕尺寸， 自行調整網站顯示內容，讓使用者不管用什麼裝置瀏覽網站都能方便順暢。舊有的網站設計方式是依照不同螢幕尺寸開啟不同網站，雖然網站內文圖片皆相同使其看起來為同一網站， 實際上是工程師做了多個網站，並依照不同螢幕寬度去調整程式、連結到不同網址(可視為多個內容相似的網站)。 RWD網站設計則是運用CSS設定分界點(螢幕寬度)，每個分界點下有不同的設定值(例如：字多大、顏色是什麼、間距多寬等)， 使其雖為一個網站，卻能在各種螢幕尺寸下展現出不同樣式。

AWD又是什麼？又是怎麼運作的？

AWD為自適式網頁設計(Adaptive Web Design)的簡稱，其也是使網站在各種裝置下顯示對應樣式的設計方式。較特殊的是，其製作方式為開發多組CSS，在不同螢幕寬 度下讀取不同支CSS檔案，這使網站各裝置的樣式設計更加彈性、有更多可能性，也相對較穩定。(AWD僅是將CSS分開，並非將所 有程式(html)分開撰寫，其仍是一個網站。)

RWD／AWD差異？該如何選擇？

兩者之間最大的差異就在CSS，RWD僅生成一組CSS，AWD則是對應螢幕尺寸分界點生成多組CSS，故AWD的開發、維護成本上相對比RWD高；但同時AWD也因著CSS分開撰寫而有較高的彈性與穩定度。 另外，網站資料的數量、大小影響網站效能，若網站龐大複雜(例如：大型購物網站)使用RWD除了較不方便呈現外亦可能出現效能不佳的問題，故AWD建議使用在資料龐大、結構複雜的長期網站； RWD其開發與維護的成本都較低，適合一般形象網站、企業網站等資料量相對較小的網站使用。

網站使用RWD或AWD很重要嗎？

超！級！重！要！

Google已聲明，RWD對SEO有著莫大的關係，因著現代人們使用手機頻率極高，故SEO排名規則中提到「行動版內容優先索引」， 此政策說明網站在行動裝置上顯示狀態是否良好成為十分重要的排名因素

下面帶您分析使用RWD與AWD製作網站設計的三大優勢：

1、自適應

頁面內容依據裝置尺寸自動調整內容樣式，使用較小尺寸的裝置瀏覽時不需要再來回放大縮小拖移，瀏覽更加方便舒適。這也讓行動裝置使用 者進入網站後願意停留較長時間，這在SEO方面是有益處的，畢竟如果使用者進入網站後若因使用不便或無法順利瀏覽，而快速離開跳回搜尋頁， 該網站可能會被認為不是一個好的搜尋結果，導致網站排名下降。

2、單一網址

若因不同尺寸對應至不同網址，將導致不同網址其內容卻相似、重複度高，SEO評分可能相對較低甚至被認定為惡意網站。使用RWD、AWD整合成單一網址後 除了SEO優化，對使用者來說使用各種裝置皆能舒適瀏覽網站，不需因應不同尺寸螢幕更換網址，使用上更加方便容易。且單一網址能使各種裝置的網站使 用分析資料集中統計，不會因著網址不同被分散導致統計困難或分析不精準。

3、維護輕鬆

因著單一網址，程式部分無須再分開寫成多個html檔案，在維護上只須修改一次即可同時調整各尺寸螢幕顯示之結果，無需維護多個內 容相同的網頁，維護所需時間可大幅縮減，同時也較不易出錯(畢竟多改容易多錯啊)。

RWD與AWD網站設計需注意什麼？

1、分界點

首先需要掌握各螢幕尺寸的大小，如此內容才會跟著裝置螢幕做不同的顯示，若沒有抓準分界點，可能會出現不符合的樣式。

2、做得出來

設計時與舊有設計方式較不同的是，需要時刻考量到該元素在各種螢幕尺寸下如何呈現、程式方面是否會有執行的困難等問題。

3、順序

頁面中各區塊的呈現也需要經過考量與設計，因為皆是讀取同一支HTML檔，故在區塊編排上亦需考量到各尺寸樣式間的差異。

除上述所提及的部分外，這樣的網站設計方式還需有諸多考量。而網路中文專案建置團隊能夠在為您設計網站的同時， 兼顧RWD/AWD網站設計，為您帶來滿意的網站外觀與實用的SEO優化！