前端工程師和網頁設計師看過來!-分辨RWD和AWD的優缺點


前端工程師和網頁設計師看過來!-分辨RWD和AWD的優缺點



相信很多前端工程師和網頁設計師,常常處在一個不曉得選擇RWD或AWD的窘境,今天就讓我來娓娓道來它們的差別!

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

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

讀完本系列文章後,你將會了解:


(目錄)
  1. RWD 和 AWD 的差異與優缺點
  2. 我該選擇 RWD 還是 AWD ?
  3. AWD 要怎麼做才能對 SEO 無痛?
  4. 了解整體網站的規劃流程-PM與前端溝通更順利

 

RWD 和 AWD 的差異與優缺點



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

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

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

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

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

 

RWD、AWD 的優缺點比較

RWD 與 AWD 只是方式不同罷了,沒有所謂的哪個比較好,至於它們各自的優缺點,請參考下圖的比較表:
RWD vs AWD 優缺點比較

RWD AWD
相同之處 兩種都會判斷裝置而顯示出對應的樣式。
不同之處 無論行動裝置或是桌機,都使用同一套 CSS。
當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。
針對各種裝置撰寫對應的 CSS,因此會有多套 CSS,一般來說會有兩套 CSS:桌機專屬的一套 CSS,手機專屬的一套 CSS。
當使用者打開了網頁,程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。
優點 節省網站製作成本
因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容較單純的網站、新創公司或是個人工作室使用。

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

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

行動裝置網頁載入更快
可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。
缺點 開發容易、維護耗時:
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。
行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。
維護較容易,但開發成本高:
一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。

繼續看本系列文章下篇:

2.我該選擇 RWD 還是 AWD ?

3.AWD 要怎麼做才能對 SEO 無痛?

4.了解整體網站的規劃流程-PM與前端溝通更順利


延伸閱讀:

前端工程師必學CSS背景五個常識(一)-如何讓背景重複顯示?

前端工程師必學CSS背景五個常識(二)-如何讓背景固定住?

前端工程師必學CSS背景五個常識(三)-如何設定背景位置?

人人都得學習Python課程!AI人工智慧已確定編入新課綱! 

來達內學習UI課程,輕鬆無負擔地一圓你的創業夢!

未來不用自己開車,荷蘭新創公司開始研究AI人工智慧自駕船 

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?



這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

網頁前端CSS必學兩屬性:display與visible