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分享
列印內容

你可能也會喜歡...

內容行銷書:打造生活美學,讓你的品牌更吸引人

在這本內容行銷書中,我們將教你如何打造生活美學,讓你的品牌更吸引人。透過獨特的台灣用語和文化元素,讓你的產品或服務脫穎而出,吸引更多目光,提升品牌價值。讓我們一起探索如何在競爭激烈的市場中脫穎而出,贏得客戶的青睞吧!

內容行銷策略 | 行銷達人的必備技巧與心得分享

想成為一位優秀的行銷達人嗎?精通行銷策略是不可或缺的技巧!在這份分享中,將探討行銷策略的重要性,以及如何運用心得與技巧來提升自身行銷實力。讓我們一同來探討這個引人入勝的主題吧!.

如何讓你的內容行銷課程像夢幻週末旅行一樣令人心動震撼?

在這個充滿夢幻與驚喜的內容行銷課程中,我們將帶領你展開一場令人心動震撼的旅程。就像是一場精彩的週末旅行,我們將與你一同探索行銷的奧秘,挖掘創意的無限可能,讓你的品牌故事如同親身體驗般深植人心。準備好了嗎?讓我們一起啟程,展開這場充滿驚奇的行銷之旅!