響應式網站設計（Responsive Web Design）是什麼？
RWD 透過同一個 CSS 讓一個網址能適應不同尺寸的螢幕，自動排列網站並顯示，讓同一套網站設計在不同地裝置（桌機、平板、手機）都可以輕鬆瀏覽，符合使用者體驗。
自適應網站設計（Adaptive Web Design）是什麼？
AWD 是較 RWD 更早期的設計，但目前還是有企業會採取該設計，讀取多個不同的 CSS，根據特定尺寸的裝置建立不同的頁面，針對不同裝置給予相對應版本的網站。但 AWD 在設計和維護上都會較費工費時，後台管理也會需要兩種版本。
例如捌貳行銷，會根據電腦版給予 https://www.82-seo.com/ 和手機版本 https://m.82-seo.com/ 兩種不同網址的網站。
CSS（Cascading Style Sheets） 是什麼？
幫結構化文件（HTML／XML）添加文字樣式的電腦語言，用來美化網頁設計，可以改變網站的外觀、樣式、字體大小、字體粗細、字體顏色、元素對齊、定位等等。
RWD 和 AWD 比較
| 網站設計方式 | RWD（響應式網站設計 ） | AWD（自適應網站設計） |
| 網址 | 只會有 www 版本 | 通常會有 www 與 m 兩種版本 |
| 開發成本 | 較低 | 較高 |
| 網頁載入速度 | 中等 | 較快 |
| CSS | 同一個 | 不同 |
| 網站內容 | 內容一致 | 內容不一定會一致 |
| 優點 | 一個網址就可以滿足不同裝置 | 根據桌機或行動版本提供最佳化的體驗 |
| 使用者友好，靈活適應不同的螢幕解析度 | 相容於一些複雜的站點 | |
| 多終端統一視覺與操作體驗，維護成本低 | 編碼容易 | |
| SEO友好，沒有頁面版本區分，保持SEO策略一致 | 測試會更容易，操作也能相對更準確 | |
| SEO影響 | 網址頁面單一，操作策略可同步適用 | 可能會有重複內容問題產生 |
| 缺點 | 須同時考量多種裝置在同一網址上的呈現，設計難度及挑戰較高 | 需同時開發和維護兩個版本，成本較高 |
如何決定要使用哪一個網站設計？
建議從以下三個面向來評估：
1、開發和維護成本
RWD 的製作成本和維護較 AWD 容易且省時，因 AWD 需同時開發和維護兩個版本，所以花費的成本相對來說會較高。
2、網站類型
若網站是品牌網站、形象網站或是企業網站，建議採用 RWD，能保持品牌視覺一致性 ；但若是網站是大型且複雜的購物商城、行動裝置系統平台，採用 AWD 可能會比較好，較能針對行動裝置用戶設計，提供較佳的使用體驗。
3、使用者體驗
思考網站在電腦和手機是否具有個別不同的使用族群、或不同的使用情境，或需要有不同的使用體驗，來去考慮製作適合各用戶的 AWD 或是相容性較高的 RWD。
Google 建議採用 SEO 友好的 RWD
Google 以行動裝置版本優先作為索引以及排名的主要依據，並曾提及建議使用 RWD ，以下補充 RWD 對於 SEO 的好處：
1、無須重定向
RWD 在進行電腦以及行動版本裝置切換時，無須像 AWD 一樣對兩個版本進行重定向，較少的重定向能避免導向錯誤或是載入速度過慢，導致較高的跳出率。
延伸閱讀【重定向是什麼？詳談 301 和 302 Redirect 差異及應用】
2、較易索引
因為使用同一個網址，所以不須額外告訴 Google 何種網頁為電腦版或行動版。
3.避免重複內容
由於 AWD 會有電腦、手機兩個版本的不同網址，Google 有可能判定其為重複內容；而 RWD 是同一個網址和同一個網頁內容，不但可以幫助用戶辨識網頁內容，也能幫助 Google 判別網址與頁面內容的關聯性。
