RWD與AWD 有何差別?該如何選擇

現在網頁的時代對於畫面的要求已經無法再停留像以前只有桌機版的網站畫面了,多裝置的時代已經成為絕對現象,所有有打算製作網站的需求端除了桌機版的設計,RWD/AWD 也成為標配。

RWD (響應式網頁設計)是什麼?

RWD英文全名為Responsive Web Design,可以自動適應顯示於各種不同裝置,根據不一样的螢幕大小設計友善的閱讀介面,包含桌機、手機、平板…等等,各個尺寸的使用者都能友善閱讀到想看的網站,也不失去太大的視覺與手指體驗的感受。RWD 不論是桌機上或是各種裝置上看到的內容都會是完全一樣,如資訊較多,小的裝置通常就會被收錄在比較深處的目錄裡面,但總體來說內容是完全呈現並未因為螢幕小就被做刪減。

AWD (自適應式網頁設計)是什麼?

AWD英文全名为Adaptive Web Design,AWD跟RWD存在目的一致,希望在桌機、平板、手機都能顯示友善畫面,RWD是随著視窗大小縮小、放大,如果是AWD則不會随著視窗「即時」放大縮小,AWD是藉由程式來做判斷,判斷當下這台裝置他是落在哪一個裝置畫面上,就提供這個樣式的畫面給這個裝置,來讓小尺寸的裝置體驗更快的速度,例如在桌機上看到的大圖示,在小的裝置上可能 AWD 就會選擇省略然後會以不同的CSS達成一樣的效果

RWD比較好還是AWD比較好?

至於RWD比较好還是AWD比较好,就看企業不同的需求而定,RWD在桌機、手機内容是完全一樣,無論行動裝置或是桌機,都使用同一套 CSS,當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些,RWD能節省網站製作成本,因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容較單純的網站、新創公司或是個人工作室使用。在SEO上也更方便因為同一個網頁、URL 也只有一個,所以更方便 SEO。但缺點就是RWD開發容易在維護上卻相當耗時:全部的樣式碼都在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境,行動裝置網頁載入恐會更慢。

AWD會針對手機内容做優化,减少不必要的大圖,提高手機版的速度, 在網頁維護更分明,不怕樣式被吃到,雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊的擔憂,且有利於 UI/UX,若對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。但AWD的缺點是維護較容易,但開發成本高:一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。

結論:根據我們的經驗,如果您的網站内容較簡單可以選RWD,例如: 企業形象網站。如果是很仰賴手機板、網站内容也很豐富,例如: 購物網站,那麼建議用AWD,無論是將来的修改速度、弹性、操作友善,都會比RWD好。

分享在 facebook
Facebook分享
分享在 google
Google分享
分享在 print
列印內容

你可能也會喜歡...