RWD與AWD是什麼？ 網站主該怎麼選？ | 夏木樂網頁設計

RWD是什麼？ Responsive Web Design 縮寫，大多翻譯做「響應式網頁設計」。

網頁會根據瀏覽網站的銀幕大小，自動調整成相應的設計。

服務 服務項目 專業優勢與特色 服務簡報 解決方案 BrandDesign 品牌形象網站 多功能客製化網站 ECommerce 購物車商城 B2B2C多賣家商城 Development 硬體公司官網 線上課程網站 手機App開發 特殊規格網站開發 作品案例 設計資源 網站知識 分享空間(Medium) 知識頻道(Blog) 我要做網站 服務 服務項目 專業優勢與特色 服務簡報 解決方案 BrandDesign 品牌形象網站 多功能客製化網站 ECommerce 購物車商城 B2B2C多賣家商城 Development 硬體公司官網 線上課程網站 手機App開發 特殊規格網站開發 作品案例 設計資源 網站知識 分享空間(Medium) 知識頻道(Blog) 我要做網站 RWD與AWD是什麼？網站主該怎麼選？ 網站規劃 Li-git 2022-01-04 2020年，全台灣的行動裝置持有率來到了88.4%，大部分舊網站都在朝向「手機優先」方向發展，新網站中，小螢幕的需求也成了不可被忽視的一塊。

在決定網站呈現方式時，網頁設計該選擇RWD還是AWD呢？RWD、AWD又分別代表什麼意思呢？ RWD是什麼？ ResponsiveWebDesign縮寫，大多翻譯做「響應式網頁設計」。

網頁會根據瀏覽網站的銀幕大小，自動調整成相應的設計。

是一組CSS對應不同的裝置調整，這組CSS必須要對應到所有裝置，包括桌機、筆電、平板、手機，因此內容上任何裝置都是一致的，若圖片解析度、檔案太大，即有可能拖慢手機網頁的載入時間。

也因為需開發一組CSS，開發的今年成本與時間成本都相對較低，且維護較簡單，因此成為活動式網站或小型官網的首選。

⎮補充：CSS全名為CascadingstyleSheets，是電腦語言中負責決定字級、顏色、位置的角色，需搭配其他的程式語言一起使用，才能起到裝飾、搭配、配置的作用。

AWD是什麼？ AWD為AdaptiveWebDesign的縮寫，中文名字很多，這邊我們稱它為「自適式網頁設計」，若手機瀏覽網頁時出現「/mobile」、「.mobile」結尾的網域名稱，此網站即有可能是AWD網站，簡單來說就是有獨立的「手機版網頁」。

AWD是多組CSS針對不一樣的裝置進行設計，需要開發並維護多組CSS，成本相對RWD較高，但也因為不同裝置使用不同CSS，彈性度較高，可以依據裝置大小調整不必要的照片或檔案大小，因此在行動裝置上可以較快被讀取，適合複雜或較大型的設計。

該如何選擇？ 先衡量自身商品種類、數量、呈現方式、公司是否有人力維持以及準備可用時間。

若座大型官網，願意花幾個月甚至幾年以上開發，照片高清、結構複雜，那麼可以試試看AWD，讓網站更完整，可再以維護頻率與幅度決定是否請網頁公司協助運營或自己公司派遣人力。

如果短時間內需完成，網站僅需存在3年甚至以下的活動式網頁，或整體檔案較小的官網，就比較適合做RWD，快速、經濟實惠。

委外開發網站很貴，我應該自己招募工程師嗎？|夏木樂網頁設計 作為一間提供網頁設計與網站/App開發的代理廠商，有時會遇到正在進行數位轉型的客戶，或者大力發展網站與數位事業的傳統產業。

在提供諮詢時，經常被客戶問到這些問題:' 我們能不能把開發完成的系統接回來，自己找工程師繼續發展或維護? ... simular.co ⎮注意：我知道，看到這，您心裡應該已經有想法了，但請容許我再提醒一次，RWD與AWD沒有絕對優劣，請以從自身需求判斷。

如果您依然無法決定呈現形式，不妨試試與我們聯繫，夏木樂，品牌網頁設計專家，讓我們幫您規劃最完善的網站！ 上一篇 常見Pop-up類型與案例，行銷人員如何正確使用彈出視窗 回列表 下一篇 夏木樂創意構思六步驟—這是我們的DesignThinking 精選文章 文章分類 所有文章(37) 網站規劃(9) 網路趨勢(1) 經驗分享(12) 網站知識(13) 案例分享(2) 最新文章 網站視覺風格怎麼選？風格分類、範例一次看 Li-git|2022-05-18 #經驗分享 我的網頁有BUG，該如何與網頁設計公司溝通？ Li-git|2022-05-09 #經驗分享 【網站架構須知】網站架構是什麼？架構完整、架構不健康是什麼概念？ Li-git|2022-04-22 #網站知識 突破極限 一起開拓全新視野 尋求網頁設計建議