程式課程選達內 -
美國上市IT教育集團

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

前端工程師一定得選擇RWD嗎?AWD要怎麼做才能無痛SEO?

  • 時間:2019-04-26
  • 發布:達內教育台灣
  • 來源:前端工程師養成班 / SEO教學 / 網頁設計課程

AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:

(目錄)
  1. RWD 和 AWD 的差異與優缺點
  2. 我該選擇 RWD 還是AWD?
  3. AWD要怎麼做才能對 SEO 無痛?
  4. 了解整體網站的規劃流程-PM與前端溝通更順利

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

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

RWD vs 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 的差異與優缺點

上一篇:RWD 和 AWD 的差異與優缺點
下一篇:AWD要怎麼做才能對SEO無痛?
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省