RWD是什麼？RWD跟AWD有什麼不同？

RWD 是什麼?

RWD自動放大縮小網站尺寸

AWD 是什麼?

〈延伸閱讀：網頁設計與SEO的完美整合〉
〈延伸閱讀：網頁設計為什麼需要前端工程師？〉

RWD與AWD的差異

不刻意去辨識之下，RWD、AWD 從外觀是看不出來差異的，雖然都是同一個網址跑多個版本網站，但兩者在技術上是有差異的，RWD在HTML文本中，加入一套可以符合不同寬度排版樣式的CSS，能夠大幅降低調整時間、維護成本、開發時間短，比較不會出現重複內容，也有較多的框架開發工具；而AWD讀取不同CSS，效能略優於RWD，且能針對行動版做UX優化，以及不同裝置製作差別較大的版面設計，適合複雜的網頁使用。

〈延伸閱讀：網頁設計的使用者體驗(UX)如何執行？ 〉
 

RWD與AWD比較表

了解自身網站類型

內容很多才需要用AWD，因為RWD內容只能在桌機、平板、手機之間做重新排列，內容是不能少的，所以像是像MOMO、PCHOME...這類內容超多的網站，就必須要手機版減少內容，不然畫面會很長，所以這類大型購物網站都是用AWD，或是用兩個不同網址的網站，企業網站、小型購物網站就比較適合RWD，像是 Shopline、Cyberbiz 都是RWD製作的，內容非常多的網站才建議使用AWD。
〈延伸閱讀：套版網站看起來都很像，到底差在哪?〉

考量維護成本

響應式網頁設計(RWD)上線後的維護是比較容易的，AWD維護上較繁瑣，AWD必須在後台維護各版本的網站，製作成本AWD也比RWD貴，因為做的人比較少，開發時間也比較長，性價比來看還是RWD比較划算，AWD在設計與維護上成本都比較高，也是大部分的網頁設計公司都採用RWD的最大原因。

〈延伸閱讀：網站建置費用? 網頁設計報價為何這麼亂?〉

需要更深入使用者體驗(UX)

AWD可以對手機版做更深入的使用者體驗(UX)，針對手機使用者做內容調整與優化，讓使用流程更友善，但近年來的RWD設計已經趨向簡單乾淨，並以手機流程為主要設計，而且大部分的網站都不會像momo、pchome那樣複雜，所以AWD使用機會並不是很高，就算是大型購物平台也慢慢把手機版網站轉向到APP，使用者體驗也以APP為主，AWD對手機版進行優化的這個優勢已經沒有這麼明顯。
〈延伸閱讀: UX/UI不一樣，UI/UX設計是什麼？〉

RWD、AWD 哪一種對SEO比較好？

哪一種對SEO比較好？答案是：「兩者差距不大」，SEO的排名規則有「SEO以行動版網站內容為主」、「網站行動效能影響SEO」、「網站版本之間的內容一致性會影響SEO」，手機網站部分：AWD、RWD 兩個都有手機版，所以都符合條件。網站效能部分：AWD手機效能略優於RWD，這裡是AWD稍微優勢一些。內容一致性部分：AWD的網站版本之間的確會因為優化，產生內容不同步，RWD版本則是內容一致，所以在內容一致性上面，RWD勝AWD。要做好網站SEO除了要做好網站架構，還要強化頁面內容與連結，並時常觀察成效，即時進行調整。
〈延伸閱讀: SEO是什麼? 簡單說讓你聽得懂〉
〈延伸閱讀: 關鍵字排名優化最重要的3件事〉
〈延伸閱讀：好的SEO網站架構是什麼？這樣做SEO成功率才會高！ 〉
 

網站效能好壞怎麼判斷？
PSI 的英文是 PageSpeed Insights，簡稱PSI。PSI 是Google 提供的「檢測網站性能與速度的線上工具」，除了檢測結果以外並提供各種修改建議，分數是透過運行 Google Lighthouse 資料庫來分析網站，90分或以上是非常好，50 到 90 中等架構，低於 50 是很差的架構，通常要執行SEO，最少都要有80分以上。
【網站PSI是幾分？馬上來測試 PageSpeed Insights】

以RWD框架工具製作

選擇現成的RWD框架開發工具，可依照既有的RWD模版去套用網站素材，然後將網站素材組裝網站交給客戶，後續根據客戶修改需求進行修改，好處是可以減少製作時間，因為有很多現成的模組跟效果可以用，但因為模組因素所以程式無法精簡，網站效能會比較差，還有網站修改幅度不能過大會有技術難度，常見的RWD框架工具有：Bootstrap、Semantic UI、Foundation、UiKit...，最多人使用的就是Bootstrap，Bootstrap有很多現成的版型，也使用在知名的套版與軟體，例如：Wordpress、Adobe Dreamweaver，缺點就是有「很多的累贅程式碼」。以下將介紹常見響應式網頁模板，讓無法進行手工切版的使用者也能製作RWD。
〈延伸閱讀：RWD網頁設計好壞差很多 〉

1.Bootstrap

Bootstrap擁有大量HTML、CSS和JavaScript框架，是目前最多人使用的RWD框架製作工具。方便使用者能在基礎框架之下進行網站開發，達到自動適應螢幕寬度的效果。

【點我使用>>Bootstrap】

2.Foundation

Foundation主要以手機版面為優先考量，能夠開發RWD網站和應用程式，同樣提供HTML、CSS和JavaScript模板，並支援Sass擴充功能，幫助開發人員可以快速製作。

【點我使用>>Foundation】

3.UiKit

UiKit是一個輕量級前端框架架設工具，提供CSS和JavaScript框架，還能建立常見的UI功能，滿足不同項目的需求。

【點我使用>>UiKit】

4.Semantic UI

Semantic UI的組件名稱和類別使用了語義化的命名方式，使開發者能夠更容易理解和使用。例如：使用 "button" 建立按鈕、 "menu" 製作選單...等，且能夠透過主題創建改變RWD網站的外觀設計。

【點我使用>>Semantic UI】

5.Pure

Pure主要提供輕量型的CSS語法模組，可以快速載入，減少網頁的負擔，適合客製化需求高的使用者，讓RWD網頁製作更加容易。

【點我使用>>Pure】

以RWD手工切版製作

手工切版不使用RWD框架工具，主要以從無到有產出網站的html來進行。手工切版可以精簡程式，讓網站更有效率，不會有像框架工具的「累贅程式碼」，同時可以有程式自主權，容易修改程式，也可以達到HTML最佳化，但缺點是需要更多的製作時間，從拿到網站設計圖稿，慢慢把圖片切成HTML，整個製作時間是框架工具製作RWD網站的兩倍時間以上，八成以上的網頁設計公司都不會採用，但如果要執行SEO，需要高效能PSI的網站，就需要手切網站。
〈延伸閱讀：網站速度- SEO優化的重要項目〉
 

框架工具與手工切版比較表

如何檢查行動版網站的狀況？

要怎麼檢視行動版網站狀況呢？可以用Google Search Console(GSC)審查網址，Google於2020年正式以行動版作為搜尋收錄與排名的基準，所以網站必須符合各種行動裝置的規則，所以可以透過GSC去查看網站的「行動裝置可用性」（此報表2024 年 12 月 1 日起失效）、「網站內容」、「中繼資料(Meta Data)」、「結構化資料(Structured Data)」，可以從中找出網站是不是有符合規則，如果有檢測到行動網站的錯誤，就可以根據錯誤進行修正，RWD、AWD都可以從Google Search Console檢測，是SEO很重要的工作之一。
〈延伸閱讀：SEO排名因素有哪些？ 45個要點一次看完〉

Google以行動網站作為索引，響應式網站變得重要

Google Search Console檢查行動網站(響應式網站)