前端工程師和網頁設計師看過來!-我要選RWD還是AWD?
要選RWD或AWD再也不會是前端工程師的難題了!只要看完這篇保證讓你兩個都用得恰到好處!
AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。
在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。
(目錄) |
該選擇 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，這時就需要花更多時間來修復，反而浪費更多成本。繼續看本系列文章下篇:
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前一篇:
1.RWD 和 AWD 的差異與優缺點
延伸閱讀：
前端工程師絕不能搞錯的CSS中:逗號.空格的差別!
關於前端工程師,盒子模型的觀念超重要(上)邊界
關於前端工程師,盒子模型的觀念超重要(下)邊框和留白
超過四成企業導入AI人工智慧,還不跟進嗎?
挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!
SEO優化百百款,這篇要一一舉例,相信會更快速理解!
達內教育開幕 培養台灣IT人才進入全球企業
