前端工程師除了RWD別無選擇?選對方法就可以辦到SEO無痛!
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 吧！這樣不僅利於做UI/UX外，往後在網頁維護上，前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改，且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行，但是若 CSS 樣式寫得不夠嚴謹的話，則會有不同的裝置會寫到同一種 style情況產生，這時就需要花更多時間來修復，反而浪費更多成本。繼續看本系列文章下篇:
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前一篇:
1.RWD 和 AWD 的差異與優缺點
更多閱讀:
自從有前端工程師推薦的常用顏色懶人包,網頁變得超水的!
自從會了ID選擇器,朝專業的前端工程師又更進一步!
前端工程師常用的CSS竟然有父與子標籤?繼承關係怎麼看?
達內教育開幕 培養台灣IT人才進入全球企業
信不信由你,因為Java課程讓我獲得我想要的生活!
細數八個網路行銷課程技巧給你聽:8-KISS原則效果立竿見影!
靠著HTML5教學,連書頁在網路上都能這麼逼真?
