前端工程師讓你不再糾結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
留言列表