前端工程師讓你不再糾結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 的。
AR浮空懸影 廣告出租 托播廣告 多媒體行銷 廣告公司 SEO官網開發對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！
若有足夠的預算，且希望使用者無論使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下，就選擇 AWD 吧！往後在網頁維護上，前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改，且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行，但是若 CSS 樣式寫得不夠嚴謹的話，則恐怕不同的裝置會寫到同一種 style，這時就需要花更多時間來修復，反而浪費更多成本。
繼續看本系列文章下篇:
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利
本系列文章前一篇:
1.RWD 和 AWD 的差異與優缺點
相關文章閱讀:
小圖片自動佈滿整個網頁背景怎麼做到的!?前端工程師用CSS背景重複顯示設定就搞定!
到底要學Python還是java阿!?免擔心!點進來就能決定啦
八個圖片SEO重要須知(1)-圖檔命名& alt文字優化技巧
全站熱搜
本篇文章引用自此: http://ezrayii.pixnet.net/blog/post/286771308-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E6%95%99
留言列表
