重金屬AI工程師的Coding分享

該選擇 RWD 還是 AWD ? 先看看自己的需求吧！
當下 RWD 正夯，但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示：

	RWD	AWD
人力需求	較少，因為只有一套 CSS	較多 (因為需要多套 CSS)， 需要網頁人才與尚需前端工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式
維護成本	較少，因為只有一套 CSS	較多，因為有多套 CSS 以及程式
適用內容	網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。	網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。
適用排版	較簡潔的畫面與排版	較多元化、複雜的畫面與排版
SEO 支援	SEO 優化、維護較容易	同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS
可支援的裝置	各裝置都適用	各裝置都適用

以上分析建議仔細看過。 以下再作補充說明：
評估現有的資源人力
只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省，適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX，但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式，且若想要做 SEO 的話，也是需要前端工程師把多套 CSS 串在同一個 URL 的。
對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！
若有足夠的預算，且希望使用者無論使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下，就選擇 AWD 吧！往後在網頁維護上，前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改，且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行，但是若 CSS 樣式寫得不夠嚴謹的話，則恐怕不同的裝置會寫到同一種 style，這時就需要花更多時間來修復，反而浪費更多成本。
AWD 要怎麼做才能對 SEO 無痛?
很多人都說 AWD 對 SEO 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程，索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址，所以流量自然會分流，對 SEO 當然有負面影響！
觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ，會發現行動版的網址前面多會有個 「m.」 的開頭，就是這樣的情況。
但我們先回到原點，弄懂 AWD 的基本原理，其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下，判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟，才可以集中流量在同一個網址中，對 SEO 或品牌辨識度都比較好，就不會有前面提到 「分流」 的問題，也不會影響到 SEO。
所以不要再說 AWD 對 SEO 不利了！不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」 的作法。你所需要的，是要把行動版與桌機板使用同一個 URL。
 
 原文出處:該選擇 RWD 還是 AWD ? 先看看自己的需求吧！
相關文章:
元宇宙也有翻譯蒟蒻了！Meta推全球語言都可翻譯的人工智慧
Google提出Android隱私沙盒，標榜保護用戶資料安全
所有的新創業者都需要SEO 的7 個理由！
SEO是什麼？跟AdWords差在哪?如何自學？

Google提主題取代群組,解救FLoC爭議(上)
糖友救星!加拿大人工智慧新創免扎針血糖
12萬字名著,人工智慧用200字就說完(上)

RWD和AWD的差異與優缺點,一次報你知!


AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。
在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。
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 與 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？」有近一步的分析與講解。
 
原文出處:RWD 和 AWD 的差異與優缺點
 
相關文章:
元宇宙也有翻譯蒟蒻了！Meta推全球語言都可翻譯的人工智慧
Google提出Android隱私沙盒，標榜保護用戶資料安全

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

SEO是什麼？跟AdWords差在哪?如何自學？
人工智慧與軍事武器結合時,人類是否會失控?
糖友救星!加拿大人工智慧新創免扎針血糖

谷歌人工智慧編舞,任何音樂都能生成對應舞蹈(1)