前端工程師看過來!一定要知道的RWD和AWD優缺點表格在這裡!

前端工程師看過來!! 一定要知道的RWD和AWD優缺點一次整理給你們!!
前端工程師看過來!! 一定要知道的RWD和AWD優缺點一次整理給你們!!

前端工程師一定要收的AWD和RWD的優缺點必較表格!!

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。

 

RWD 與 AWD 的差異,簡單的來說,就是前者只有一套 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語法格式入門課!! 前端工程師非學不可!!

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

前端工程師的專屬小課:CSS套入HTML中的四種方法

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *