AWD（自適應網站設計）和 RWD（響應式網站設計）是當今比較常見的網頁設計方式，也是網站開發的趨勢。此外，關於選擇哪種設計方式的討論也逐漸成為趨勢。因為，用於上網的設備或裝置的種類逐步在增加，設計師或開發人員需要創建能夠滿足各種不同瀏覽器和螢幕大小要求的解決方案，因此他們需要決定應該使用哪種設計方式來滿足越來越苛刻的使用者！
其實，這兩種設計方法存在的目的一致：都是為了讓網站在不同裝置以及不同瀏覽器上呈現出較佳的使用者體驗，無論是手機、平板，還是筆電、桌機；無論是 Chrome、IE 瀏覽器，還是 Safari等瀏覽器。
儘管任務相同，但AWD（自適應網站設計）和 RWD（響應式網站設計）在網站開發技術上存在著差異。因此，本文分別闡述了AWD 意思、RWD 意思、兩者間的主要區別，以及在何種情況下使用 AWD 或 RWD 方式，希望本文的介紹能幫你挑選出適合你的網頁設計方式。
1. AWD（自適應網站設計）是什麼？
AWD（Adaptive Web Design，自適應網站設計）的主要理念是創造最佳的使用者體驗，即網站可以不受任何技術限制地訪問。自適應網站設計基於不同佈局以及某些預先指定的裝置和螢幕解析度，開發出適應這些裝置的不同版本的網站。也就是說，AWD是一種跨平台網站設計解決方案。
AWD 的出現是一件好事情，因為除了筆記本電腦、平板電腦和螢幕尺寸各異的智慧型手機外，我們現在還有非常大的電視、小螢幕的手錶和板載電腦，所有這些都可以接入網路，AWD 的介入，可以讓使用者在這些裝置上得以正常瀏覽不同版本的網頁。
判斷一個網站是否是透過 AWD 方式製作出的網站，可檢視其網址在不同裝置上是否是不一樣。一般情況下，AWD 自適應網站手機版本的網址以「m」開頭，例如：臉書和momo購物網在手機裝置上的網頁網址分別為 https://m.facebook.com/ 和 https://m.momoshop.com.tw/。
2. AWD 優缺點
以下是自適應網頁設計的優點：
- 可依照不同裝置設計獨特的網頁介面，因為伺服器定義了裝置類型且可傳輸不同的網站版本。
- 具有為特定類型的裝置創建一個美觀的客製化網站的可能性。
以下是自適應網頁設計的缺點：
- 開發過程昂貴且複雜。
- 更新和維護過程昂貴且複雜。
3. RWD（響應式網站設計）是什麼？
全球第一次聽說 RWD（Responsive Web Design，響應式網站設計）是在2010年，當時一位名叫Ethan Marcotte的設計師在一篇文章中提到了這個詞，後來他寫了一本名為《響應式網頁設計》的書，這本書仍然被認為是這個主題最可信的來源。
採用 RWD 方式製作的網站，適用於所有裝置和瀏覽器，你可以透過 CSS 程式設定網站內容的字體大小、行距、是否添加相同的圖片等版面，讓網頁符合瀏覽器的螢幕大小、在不同裝置上呈現出適合的排版。
不同裝置上顯示的網站是同一個網址，例如本網站、https://www.apple.com/tw/ 就是透過RWD方式設計、製作出的網站。
apple 電腦版網頁
apple 手機版網頁
4. RWD 優缺點
RWD 之所以會成為主流的跨平台網站設計方式之一，是因為它有以下幾個優點：
- 一個URL可用於網站的所有版本，從而使其推廣變得容易很多。
- 搜尋引擎，如Google，非常注重行動版網站的使用者體驗，他們將其作為影響SEO排名的一個很重要的因素。響應式網站設計正好對行動裝置是非常友好的，採用 RWD 方式非常有助於提高SEO積分。
- 可以呈現不同裝置上的不同外觀。
- 響應式網站在設計、維護成本上低很多。
雖說 RWD 在當今網站設計行業中比較流行，但它也有相應的缺陷：
- 有時手機螢幕上的內容太多。
- 不可能為當代所有裝置製作出所有多樣性網站。
5. AWD 和 RWD 差異比較
AWD 和RWD 都是相當成熟的網頁設計方式，AWD 較 RWD 出現更早，RWD 彌補了 AWD 的一些劣勢。
| 網站設計方式 | AWD | RWD |
| 全名 | 自適應網站設計（Adaptive Web Design） | 響應式網站設計（Responsive Web Design） |
| 出現時間 | 較早 | 2010 年 Ethan Marcotte 網站設計師提出 |
| 網址 | www.xxx.com （電腦版）、m.xxx.com（行動版，包括平板、手機） | www.xxx.com（電腦版和行動版） |
| 開發次序 | 手機 > 平板 > 電腦 | 電腦 > 平板 > 手機 |
| 網站檔案目錄 | 行動版和電腦版網頁位於不同檔案目錄下，html 和 CSS 同樣分別處理 | 都在同一檔案目錄下 |
| 適合對象 | 架構複雜、龐大、內容繁多的大型網站平台 | 中小型網站、品牌網站、公司形象網站 |
6. AWD 和 RWD 分別對 SEO 有什麼影響？
2020 年 9 月，Google 已全面執行「行動版內容優先索引」的動作，也就是說，行動版網站成為了 Google 優先檢索及排名網站的依據。
（1）網頁載入速度
採用 AWD 設計方式，網頁載入速度會很快，因為在開發過程中，開發人員可以專門提升手機版網站使用體驗，他們可在程式碼上針對手機裝置量身定做。相比之下，RWD 必須把眾多跨平台設備版本的網頁程式碼集中在一個頁面去執行，檔案肥大，所以經常需要快取技術提升網頁載入速度。
（2）重新導向
AWD 在手機版和電腦版的網頁網址不同，但為了讓兩個版本的網站相互對應、自動轉換，一般會採用「重新導向」的方式來處理，但這項處理會增加網站的反應時間，導致訪客跳出率變高，進而對 SEO 產生負面影響。
（3）重複內容
AWD 在手機版和電腦版的網頁網址不同，對搜尋引擎來說，如 Google，容易將其判定成重複內容，需在手機版網頁上標註「電腦版的對應網址」，否則非常不利於網站的排名。
7. AWD 和 RWD 該如何選擇？
在以下情況下，選擇響應式網站設計（RWD）是個好主意：
- 你的時間和資金預算比較有限。
- 你傾向於簡單、乾淨的設計和功能，而不需要採用它來滿足各種需求。
- 你旨在簡化網站維護和更新過程。
在以下情況下，自適應式網站設計（AWD）將是一個很好的選擇：
- 你絕對確定你將需要吸引很多不同裝置的目標客群。
- 你有時間和預算來創建和維護不同裝置上的不同版本的網頁。
最後但並非最不重要的一點是，這 2 種方式沒有絕對的誰更好或更差，只有適合與不適合。
我們希望在閱讀這篇文章後，你能對 AWD 和 RWD 有更好的理解，並對你的選擇有幫助。
8. 結語
除了龐大、結構複雜的大型系統性網站外，一般網站採用 RWD 方式進行製作即可。
如果你的網站相對簡單，RWD 絕對是最好的選擇，你可以在很短的時間內架設網站，並且上線，所有的組件都可以在 RWD 模式下順利工作。總體而言，RWD 是更快、更簡單的選擇。此外，在後期編輯過程中，RWD 只需要在 CSS 程式碼上固定一次，而 AWD 有不同的結構需要編輯。
另一方面，搜尋引擎優化在網站中扮演著重要的角色。RWD 是 Google 推薦的手機版網頁設計方式。根據 Google 的說法，響應式網站在搜尋排名中的表現會更好，因為它們比不適合行動裝置的網站提供了更好的使用者體驗。
-> 只有技術人員或開發人員才能進行網站設計？NO ！其實，我們個人也可以幹這件事，請參考網站設計 – 新手設計網頁最終指南這篇文章，幫你節省數千元甚至上萬元的網站設計費用。
0 Comments