AWD網頁是什麼？了解AWD和RWD區別，打造最佳行動版頁面

面對手機的普及化，與使用者搜尋習慣的改變，Google宣布自2020年9月起，改採用「行動版優先索引」，使網站人員被迫改變網站結構，設計符合行動版介面的網站。AWD及RWD為兩種常見的網頁設計方向，其主要差別在於內容的呈現方式與電腦版是否相同，以下我們將為你詳盡介紹AWD網頁及RWD網頁，並提供兩者優缺點比較，幫助你選擇最合適的行動版網頁設計方式。

AWD是什麼？依裝置調整網頁形式的自適應網站

AWD為Adaptive Website Design的縮寫，中文為「自適應式網站」，意思是頁面會「隨著使用者不同的裝置，將內容調整為適合該裝置的形式」，常見的AWD網頁像是：博客來、MOMO購物網…等大型購物網站，皆是採用自適應的方式，讓使用者更為順暢地進行消費。

要判斷該網站是否為AWD頁面，可以檢查網址開頭是否有”m.”，代表其網站是針對手機版所額外設計的子網域。

RWD是什麼？將內容完整呈現的響應式網站

RWD完整名稱為Responsive Website Design，中文為響應式網站，指將完整的網頁內容，呈現在不同的裝置上，不論使用者是用手機、平板或電腦，皆會看到相同的內容。響應式網站能將電腦版上的文字、圖片及站內連結正確顯示在手機版本上，保留必要的選單或按鈕，並將多餘的物件隱藏，讓使用者用行動裝置操作時，不會覺得頁面複雜又難操作。

AWD、RWD差在哪？AWD、RWD區別

AWD和RWD看似都可以符合行動裝置，主要的區別在哪呢？下方為你整理2者差異：

網頁內容

AWD網頁會針對裝置大小，設計不同的網頁內容，因此手機版的內容勢必比網頁版更簡潔，其優點是方便使用者操作，但缺點是內容豐富度可能會相較差。而RWD網頁的設計原理，是讓每個裝置所呈現的內容都是相符的，在使用者用不同裝置操作時，不會出現落差感，但如果你的網站內容較為複雜，使用RWD所設計的範圍就較有限。

需產出的CSS版本

CSS就有如網站樣式的模板，裡面涵蓋網頁中的字型、表格、連結和圖片的標準規格，如果是用AWD網頁，網頁設計人員必須設計手機、平板、電腦3種不同版本的CSS，例如手機版CSS中的字體就會較大，或為了加快載入速度，只保留重要圖片。而RWD網頁只需設計一種CSS，套用在不同的裝置上，雖然對於網頁設計人員較省時，但如果網站內容太繁複，手機版的載入速度可能會被拖慢，降低使用者的瀏覽體驗。

如何選擇網站要用AWD還是RWD？檢視2大層面

擁有良好的行動版頁面，能大幅增加消費者使用行動裝置時的互動，在決定要選擇網站要用AWD還是RWD前，建議先檢視下列2大層面：

網頁內容複雜度

如果網頁功能、頁面層級較少，建議可以選擇RWD網頁，但如果網頁本身功能眾多，尤其是有購物功能，AWD網頁能幫助使用者更順暢地瀏覽網頁，不論用何種裝置都能獲得完整的購物體驗。

公司維護預算

如上段介紹，如果要採用AWD網頁，必須要設計多套不同的CSS，且未來也必須要有人力去維護不同裝置的頁面，因此在選擇AWD還是RWD時，也務必要將公司願意花費的預算納入考量。

以下為你整理AWD、RWD兩者優缺點：

AWD、RWD哪個對SEO比較好？

Google主要是依照「網站內容」及「反向連結」來給予排名，假設反向連結數量一樣，基本上AWD和RWD只要網站內容皆相同，並沒有哪一個對於SEO比較好。但是如前言所提及，Google於2020年開始改採用「行動版優先索引」，AWD的行動版使用體驗會比RWD來得更好。總結來說，其實無論AWD或RWD，建立良好的網站架構，並提供符合使用者需求的內容，長久經營下來網站的SEO排名絕對會有所成長。

（延伸閱讀：SEO的4個常見評估指標，快速分析網站成效）

網頁設計、SEO一站式服務：戰國策集團

具有專業度的視覺設計，不僅可以給予消費者足夠的信任感，更可以提升轉換率，為品牌帶來可觀業績。戰國策集團擁有近萬家的網站製作經驗，且搭配SEO優化服務，能為你打造同時符合使用者及搜尋引擎喜好的頁面，全方位打造完美的企業門面。

現在輸入折扣碼「mkt-c7707」，年底前就享有「戰國策全系列商品服務85折」的優惠，輸入折扣碼「mkt-c7708」，年底前更享有「wordpress全系列折價1000元」優惠！

（延伸閱讀：一頁式網頁模板推薦大集合！6個質感一頁式網站案例不藏私分享）