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

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 email
分享在 print

面對手機的普及化,與使用者搜尋習慣的改變,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(響應式網站)
優點
  • 可針對不同裝置設計最符合螢幕大小的網頁排版
  • 不同裝置的內容皆可以完整呈現給使用者
  • 只需要設計一套CSS,後續維護成本較低
缺點
  • 需花費大量時間及人力設計多種CSS版本,且後續維護成本也較高
  • 手機版無法完整呈現電腦版內容
  • 如果網站內容太複雜,可能會拖慢手機版的載入速度

 

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個質感一頁式網站案例不藏私分享

Click Me