RWD與AWD傻傻分不清?懶人包讓你一秒就懂!

你知道RWD和AWD差別在哪裡嗎?今天就帶你來認識它們有哪邊不同吧!

 

AWD-vs-RWD-1.png

 

目錄

1. RWD 和 AWD 的差異與優缺點

2. RWD、AWD 的異同之處

2-1. 共同之處

2-2. 不同之處

2-2-1. RWD

2-2-2. AWD

3. RWD 的優點與缺點

3-1. 優點

3-2. 缺點

4. AWD 的優點與缺點

4-1. 優點

4-2. 缺點

5. 該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

 

AWD 跟 RWD 的目的其實都算是一致的,主要都是希望能夠針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

 

在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及該如何規劃及選擇。

 

RWD 和 AWD 的差異與優缺點

AWD-vs-RWD-2.png

 

在網頁上,RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫;而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是因為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法,讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上,都能清楚的呈現,讓使用者能夠更舒服的瀏覽網頁。

 

RWD 與 AWD 的差異,簡單的來說,前者是無論行動裝置或是桌機,都使用同一套 CSS;而後者是針對各種裝置撰寫對應的 CSS,可以有多套 CSS,例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。

 

RWD 與 AWD 的差異,簡單的來說,就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下:

 

RWD 會把所有裝置的樣式都寫在同一套 CSS 中,因此無論行動裝置或是桌機,都是使用同一套 CSS 。當使用者打開了網頁,就能即時透過網頁的寬度,決定要套用到 CSS 中的哪一個樣式。

 

AWD 是針對各種裝置撰寫對應的 CSS,因此就會針對不同的裝置,而有多套的 CSS 樣式碼:例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式,來判斷使用者是使用哪種裝置開啟網頁,再自動匯入相應的 CSS 檔案:如程式判斷出某使用者是使用桌機瀏覽網頁的話,就會自動匯入桌機的 CSS 樣式檔案;如果是使用手機開網頁,就匯入手機的 CSS 樣式檔。

 

RWD、AWD 的異同之處

RWD 與 AWD 只是方式不同罷了,沒有所謂的哪個比較好,優缺點比較如下:

共同之處

RWD 與 AWD 都會判斷裝置,並且依照裝置顯示出對應的樣式。

 

不同之處

RWD

無論行動裝置或是桌機,都使用同一套 CSS
當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。

 

AWD

針對各種裝置撰寫對應的 CSS,因此會有多套 CSS,一般來說會有兩套 CSS:桌機專屬的一套 CSS,手機專屬的一套 CSS。
當使用者打開了網頁,程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。

 

RWD 的優點與缺點

優點

1. 節省網站製作成本
因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容比較單純的網站、新創公司或是個人工作室使用。

 

2. SEO 更方便
因為同一個網頁、URL 也只有一個,所以更方便 SEO

 

缺點

1. 開發容易、維護耗時
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。如果遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。

 

2. 行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。

 

AWD 的優點與缺點

優點

1. 網頁維護更分明,不怕樣式被吃到
雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。而且也不會因為更改一個 CSS,而影響到不該改變的區塊,或style也改變的後顧之憂。

 

2. 有利於 UI/UX
假設對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。

 

3. 行動裝置網頁載入更快
可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。

 

缺點

1. 維護較容易,但開發成本高
一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。

 

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

當下 RWD 正夯,只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。

 

即便如此,也並非所有的網頁都適用 RWD。若是對網頁設計畫面要求較嚴謹的狀況下,AWD 網頁在後續的維護上讓前端工程師、UI 設計師較能找到對應的 CSS 檔來修改,沒有如 RWD 般所有的樣式都塞在同一套 CSS 「牽一髮動全身」 的隱憂。

 

決策者必須先檢視網站的規模、內容、專案的需求以及現有的人力,再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,本篇文章「網頁一定得選擇 RWD 嗎?AWD 要怎麼做才能無痛SEO?」有進一步的分析與講解。

 

 

 

 

 

推薦閱讀:
元宇宙也有翻譯蒟蒻了!Meta推全球語言都可翻譯的人工智慧


Google提出Android隱私沙盒,標榜保護用戶資料安全


所有的新創業者都需要SEO 的7 個理由!


SEO是什麼?跟AdWords差在哪?如何自學?


UI設計的圓角為何人人愛?卡通愛用連賈伯斯也瘋狂!(上)


臉書改名Meta爆爭議!2022最佳職場排名還下滑!


Spotify成功的秘密竟是人工智慧分析技術?!

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()