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

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

RWD 和 AWD 的差異與優缺點

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 的優點與缺點

優點

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

缺點

  • 開發容易、維護耗時
    全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。
  • 行動裝置網頁載入恐會更慢
    因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。

AWD 的優點與缺點

優點

  • 網頁維護更分明,不怕樣式被吃到
    雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。
  • 有利於 UI/UX
    若對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。
  • 行動裝置網頁載入更快
    可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。

缺點

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

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

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

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

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

原文出處:https://www.tedu.tw/blog/difference-between-rwd-and-awd.html

延伸閱讀:

不用一分鐘,糖尿病就在人工智慧面前現出原形!

致力於元宇宙發展的META,讓各大品牌都紛紛跟進啦!

Python超越Java,蟬聯冠軍寶座至今

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

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

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

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

 

 

arrow
arrow
    創作者介紹
    創作者 Uder.chain 的頭像
    Uder.chain

    娶了UI設計師的Python工程師-北歐生活

    Uder.chain 發表在 痞客邦 留言(0) 人氣()