網頁基礎篇：從零開始認識RWD與AWD！
網站設計
什麼是RWD？
RWD全名「Responsive Web Design」，中文翻譯為「響應式網頁設計」。是目前最為廣泛使用的一種網頁設計的方法，讓網站能夠根據不同設備和螢幕尺寸提供最佳的呈現效果。
簡單來說，就是使用彈性的網格系統和相對單位，使網站元素的大小和位置能夠自動調整，以適應不同的螢幕大小。圖片能根據使用的螢幕大小而調整，確保圖片在不同設備上都能以最佳方式呈現。
舉例來說，一個公司的企業網站，這個網站可能包含產品信息、公司歷史以及聯絡方式。使用RWD的話，當用戶從桌面電腦轉換到平板或手機時，網站的佈局和內容會自動調整，以確保信息在不同設備上都能夠被清晰顯示。
什麼是AWD？
AWD全名「Adaptive Web Design」，中文翻譯為「適應性網頁設計」。是在RWD推出之前就有的技術，目的是根據使用者設備的特點和能力提供更適切的網頁版本。
AWD 使用伺服器端的技術來檢測訪問網站的設備，包括裝置的螢幕大小、瀏覽器版本等，這使得伺服器能夠根據這些特徵提供適當的網頁版本，確保在各種裝置下皆能有最佳的使用體驗。但也由於每個版本都是固定的，再需要維護多個版本的情況下，維護成本就會相對RWD更高。
想像一個電子商務網站，商品種類、項目眾多，該網站可能就需要一個專門針對桌面的版本，另一個針對平板，還有一個針對手機，並針對個別版本優化商品展示和購物流程，以更好地滿足特定設備的需求。
RWD與AWD的差別？
最主要的差別在於，RWD是網站上元件位置會適應螢幕大小而自動調整位置，而AWD則是針對每個裝置尺寸做獨立設計。
| 特點 | RWD（響應式網頁設計） | AWD（適應性網頁設計） |
| 主要目標 | 提供在不同裝置上一致的用戶體驗 | 根據裝置的特點優化使用體驗 |
| 響應性 | 彈性佈局適應於各尺寸，元素大小和位置能夠自動調整 | 更依賴於伺服器端偵測，並直接載入裝置對應的元素版本（PC版或手機版） |
| 設計靈活性 | 適用於各種尺寸的裝置 | 針對每一種裝置做客製化的設計 |
| 適用範圍 | 廣泛應用於不同類型的網站，特別是內容為主的網站 | 針對每一種裝置做客製化的設計 |
| 設計靈活性 | 適用於各種尺寸的裝置 | 針對不同裝置進行個別的設計，適合網站結構較複雜、功能性多的網站 |
| 實作難度 | 相對較容易實施，設計相對簡潔 | 相對複雜，需要更多伺服器端的處理和優化 |
| 網站性能 | 一次載入所有PC版以及手機版的資源，可能影響網站載入速度 | 根據裝置（PC版或手機版）需求載入對應的資源，網站載入速度相對較快 |
| 維護成本 | 單一頁面維護，成本較低 | 多個頁面維護，成本較高 |
我該選擇RWD與AWD？
當我們準備架設一個網站並選擇需要使用RWD還是AWD，我們有幾個面向可以思考：
- 如果網站主要以內容為主，而且在不同裝置上希望呈現相同的元素及使用體驗，RWD會是是一個理想的選擇。相反，如果您的網站需要針對不同裝置提供不同的內容和功能，AWD會更適合。
目標受眾
- 網站若是以官方網站、企業形象網站等以內容為主的網站，不需要複雜的特定裝置介面優化，並且重視在不同的裝置上希望有相同的使用體驗，會推薦採用RWD的作法。但若是要製作大型的購物、社交平台或是功能導向的網站等，內容相對多量，為了讓各種裝置的受眾都有好的操作體驗，則會推薦使用AWD製作。
網站類型
- AWD的開發因應所需要的裝置版本，可能相當於製作多個網站前台，除了製作時程會因此拉更長，後續維運上的成本也相較RWD更高。若是以基本的形象網站為前提，RWD的CP值最高！
維護預算
| 選擇因素 | RWD | AWD |
| 基本網站需求 | ✓ | |
| 預算金額 | ✓ | |
| 一致的用戶體驗 | ✓ | |
| 複雜的裝置需求 | ✓ | |
| 對性能優化有需求 | ✓ | |
| 高度客製化設計 | ✓ |
RWD與AWD哪種對SEO比較好？
是否對於SEO比較好，我們需要知道SEO的規則主要有：網站回應速度（網站效能）、使用者體驗、結構化資料、行動版網站的內容與電腦版網站相同。也就是說在所有條件都相同的情況下，網頁RWD與AWD對於網站其實沒有太大的差別。
延伸閱讀： 輕鬆了解「結構化資料」對於 SEO 優化超加分！
網站效能檢視工具 Google Pagespeed Insights
為了更有效率的優化網站，google的提供的免費工具 Google Pagespeed Insights >> 可以為網站來檢測效能。直接輸入網址就能夠看見網站網站的優化建議以及速度評分，分數90 分以上即表示良好（綠色圓圈），50 至 89 分代表需要改善（橘色方塊），低於 50 分則代表不佳（紅色三角形）。通常建議數直接維持80分以上喔！
使用者體驗檢視工具 Google Search Console
針對使用者體驗google也有提供的免費工具 Google Search Console >> 可以針對查看網站用戶的使用者體驗，內容、設計及字體大小或網站速度等都會列入評判基準，若有待改善或不良的問題也會列出，修正後可以重新提交確認是否已經修正完畢。
結論
選擇 RWD 還是 AWD 取決於具體需求，如果網站內容相對簡單可以選擇RWD，如果更重視手機端的用戶體驗和性能，並且網站資訊量相對多的話就會建議做AWD。
最終維護成本以及擴充需求也是重要的考量因素，在做決定之前，最好進行詳細的需求分析和討論。
還在思考網站需要使用的類型嗎？趕快聯繫我們諮詢吧！
文章編輯
文章編輯：Alice Zhang
圖文編輯：Amy S Chou
推薦文章
-
SSL 證書是什麼？網站需要 SSL 憑證嗎？
網路上有許多不同類型的網站，提供各種各樣的服務和資訊。但你知道瀏覽的網站是否安全嗎？資料是否有被保護嗎？這時候就需要了解SSL憑證的作用，本文將介紹 SSL 憑證是什麼以及證書有哪些類型？為什麼需要呢？
網站架構
-
ESG網站到底在夯什麼？原來有必要！
落實企業社會責任對於企業的益處不勝枚舉。不僅真正落實永續經營，也助於建立企業良好形象，達到良好的長期發展。
網站設計
如果您喜歡我們的文章，歡迎分享! 有相關問題也歡迎與我們聯繫
