Design News

網頁設計新知

RWD與AWD的比較

Jul 20, 2021
網站如果沒有RWD會發生什麼事?簡單來說,網站流量會暴跌,因為RWD跟AWD就是行動版網站,Google在2020年9月宣布「正式執行」以行動版網站來索引和排名網站,所以沒有行動版網站都會因此降低排名,並且無法被搜索到。
如果沒有RWD該如何處理?以目前來說RWD以及AWD都不是很較新的技術,可以趁現在來將您的網站改版是最好的辦法!

RWD(響應式網頁設計)是什麼?

RWD(響應式網頁設計)可以自動適當顯示於各種不同裝置,包含桌機、手機、平板...根據不一樣的銀幕大小設計友善的閱讀介面,網站可以被各種族群閱讀。常用閱讀解析度: 電腦版寬度:1024px以上 ,平板裝置寬度720px ~ 1024px之間 ,手機裝置寬度:320px ~ 720px之間,當不同寬度時,RWD(響應式網站)就會顯示不一樣的排列方式,請看影片您就了解RWD的變化方式,如果是AWD是不會這樣變化的,所以移動視窗是沒辦法檢測AWD的。

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

AWD跟RWD存在目的一致,希望在桌機、平板、手機都能顯示友善畫面,RWD(響應式網頁設計)是隨著視窗大小縮小、放大,可以看上面的影片,如果是AWD則不會隨著視窗「即時」放大放小,AWD會有屬於自己的判斷裝置大小的程式,然後會以不同的CSS達成一樣的效果,至於RWD比較好還是AWD比較好,繼續看下去。

RWD與AWD有什麼不一樣?

桌機、手機內容元素不完全一致

RWD(響應式網頁設計)在桌機、手機內容是完全一樣,AWD會針手機內容做優化,減少不必要的大圖,提高手機版的速度,響應式網站(RWD)如果內容很多,手機跑起來會慢一點,因為都是同一套CSS,桌機用的圖、文、效果會完整呈現在手機上,手機效能、頻寬沒有桌機好的時候,當然會比較吃力。AWD的桌機、手機畫面是不同套CSS是分開維護,後端也有部分是分開維護。
 

兩種都會判斷裝置

RWD(響應式網站)會根據裝置的畫面寬度去判斷要跑多寬的網站。AWD是判斷裝置是哪一種,是桌機就跑桌機的CSS,是手機就跑手機的CSS,檔案結構相同下,從網址來看兩者都是一樣的網址,RWD跟AWD都沒有像以前分成不同網址,不同網址流量會分散難免會影響SEO,AWD跟RWD都是一樣的網址,不影響SEO。

資料來源:da-vinci