這篇文章，我們會說明「 RWD 響應式網頁設計 」是什麼，以及響應式網站的重要性。
行動設備（Mobile）日益興起，有極大部份的網路使用者，都是透過手機等 .. 行動設備來進行企業服務查詢、電商購買、知識搜索等 .. 行動。
因此，響應式網站（Responsive Website Design，簡稱 RWD）的設計，就變得十分重要。
但你知道，RWD 響應式網頁和自適應網站（Adaptive Website Design，簡稱 AWD）有什麼不同嗎？
我們會一同介紹響應式設計和自適應網站是什麼，以及兩者的差別，那麼就開始囉！
- 手機版網頁設計重要嗎？
- 響應式設計（RWD）v.s 自適應設計（AWD）
- RWD 和 AWD 優缺點，完整表格比較
- 響應式設計和自適應設計，選擇哪個更好？
- 使用 RWD 響應式設計，對 SEO 排名好處？
- 使用 WordPress，響應式設計更輕鬆
- 常見問題
- 網頁設計最佳選擇
手機版網頁設計重要嗎？
開始設計網頁，或是委託網頁設計公司前，我們必須先瞭解一個重要的觀念，那就是電腦、平板、手機等 .. 不同裝置，都需針對其螢幕大小，進行設計。
尤其手機版本的網頁設計更為重要，因為 Google 統計 約有 58% 的搜尋 是由手機端產生，搜尋量已遠超過電腦版的次數，因此，讓手機版的網頁畫面更好閱讀，是刻不容緩的緊急任務。
有時使用手機設備觀看網頁，會看見不同的網頁設計，可能是按鈕、圖片、文字位置不同，也可能是排版具有極大改變，這就是經過「響應式設計」的網頁。
響應式設計會如何呈現手機螢幕畫面？
下圖我們以「 犬哥網站 」為範例，擷取桌電和手機的畫面，讓大家觀察其中的差異：
網頁內容可依照設備螢幕寬度不同，立即反應在排版上，這就是「 響應式設計 」的重要用途。
另外，還有將電腦版網頁和手機版網頁分開來製作的「 自適應設計 」。
這 2 種設計方式雖然不同，但都可以自然的呈現手機版網頁。
非響應式設計網站，在手機上會如何呈現？
若沒有使用相關的響應式設計，網頁在手機版面上的呈現，可能會有變形的情況，導致使用者難以閱讀。
以下是來自 DequeUniversity 製作的沒有套用響應式設計網頁的範例：
可以看見，沒有響應式網頁設計的網站，會讓手機版的頁面難以閱讀，使用者必須使用手指滑動放大，造成不便。
所以使用響應式設計，將電腦版網頁和手機版網頁做出區分設計，是非常重要的事情。
響應式設計（RWD）v.s 自適應設計（AWD）
我們已經了解，將手機版網頁重新設計成適合螢幕尺寸的視覺，讓使用者有更良好的體驗，是很重要的。
將電腦版和手機版網頁分開設計，有 2 種技術，分別是響應式設計和自適應設計。
那麼，這 2 種不同的網頁設計形式，分別是什麼？有什麼區別呢？我們繼續往下看吧 ..
響應式網頁（RWD）是什麼？
響應式網頁（RWD）英文原文為 Responsive Web Design ，也稱作回應式網頁設計。可讓網頁自動在電腦、平板、手機等 .. 不同裝置的螢幕上，自動切換不同設計樣式，讓網頁畫面更方便閱覽。
RWD 的技術核心為讀取同一個 CSS 檔案，依照不同螢幕寬度，來顯示網頁設計排版。
桌機、平板、手機都是用同一個 HTML 代碼和同一個 CSS 檔案，能依照不同螢幕寬度的條件，來改變排版。
- CSS 是什麼：CSS 是一種網路設計語言，不能單獨使用，必須和 HTML 一起應用在網頁製作上，主要用途在網站的樣式美化。另外，「 媒體裝置查詢 @media 」是 CSS 重要的能力之一，透過它可分辨開啟網頁的瀏覽器寬度大小，即時讀取不同的樣式呈現，就能達成 RWD 響應式效果。
因為手機設備的使用需求日益上升，於是響應式網頁 受到 Google 的推薦和獎勵。
Google 會在 SEO 排名時，考慮該網站設計對移動式設備的友好程度。如果你的網站沒有使用 RWD 設計，你的網站關鍵字排名就會降低。
除了 SEO 排名外，響應式設計還可以提升使用者體驗，從而提升一定的轉化率。
使用特色
- 響應式設計，可協助 Google Bot 快速讀取網頁索引，編列網站檔案，不必跟著指定訊息前往相對應的電腦版 / 手機版頁面，有利於機器人判讀程式碼。
- Google Bot 檢索網站資料時，可節省爬取預算，所以 Google 鼓勵站長使用響應式網頁。
- 開發過程容易，降低人力成本，並且開發迅速，可快速取得網站。
- 只需要維護一組 CSS 檔案，降低工程師處理時間，自然降低維護成本。
- 降低行動版網站加載錯誤的機率，像是：重定向錯誤、重複內容錯誤等 .. 。
- 資料可即時同步，更新網頁內容較方便快速。
自適應網頁（AWD）是什麼？
自適應網頁設計（AWD）英文原文為 Adaptive Web Design，跟響應式網頁（RWD）一樣，可在同個頁面依據適合螢幕尺寸，呈現不同的視覺設計。
在不同的裝置開啟網頁時，AWD 會先判定裝置屏幕尺寸是哪一種，來讀取不同的 CSS 檔案，呈現網頁設計排版。
但相對於響應式設計（RWD）網站，開發和維護會更花費心力。因為 AWD 需要為一個網站設計多個 CSS，會增加工作複雜程度和開發成本。
雖然和響應式設計一樣，可以依據螢幕尺寸讀取適合的 CSS 檔案，但是因為響應式設計已經可以做到 AWD 可以做到的功能，並且自適應網站開發成本較高，所以目前已漸漸在市場中消失。
使用特色
- 網頁維護範圍時間降低，因為 CSS 已經分好組，所以不怕電腦版 / 手機版被吃掉原本設計。
- 行動裝置載入速度會更快，因爲可針對單組 CSS 進行優化。
- 開發速度較緩慢，且人力＆金錢成本會提高，因為要寫出多組 CSS。
- 維護成本會相對提升，因為要維護兩個以上的 CSS 檔案。
- 較不利於 SEO 維護，容易有重複性內容問題，或者工程師誤植兩個網址，導致網站權重分散。
- 更新資料時，需要修改多組 CSS 檔案，難以同步更新。
如何分辨網頁是 RWD 還是 AWD？
基本上來說，是無法分辨的。因為 RWD 響應式設計和 AWD 自適應設計，都會被放在同一個網站檔案，只是依據 CSS 檔案的不同，去分別呈現畫面。
但還是有一個方法可以分辨，就是「 觀察電腦版 / 手機版網頁連結是否不同 」。
自適應網站是較早期就開發的技術，之前還不重視 SEO，所以會忽略將電腦版＆手機版檔案串聯進同一個網址這個步驟。
像以上這種情況，只要分別進入手機版和電腦版網站，觀察連結，若連結不同，就表示使用的是傳統的自適應網站設計。
因為 Facebook、MOMO購物網 .. 都屬於較早期開發的網站，因此分別進入電腦版和手機版網頁，可以看見兩個頁面的網址是不同的，這就能分辨出，這 2 個網站使用的是「 自適應網站設計 」。
像是，原本桌機版網站連結為：https://example.cpm
進入手機版網頁後，連結變更為：https://m.example.com
RWD 和 AWD 優缺點，完整表格比較
響應式設計（RWD）、自適應設計（AWD），這兩種設計都各自有其優缺點，但哪一種選擇更好呢？
犬哥數位整理了兩個不同設計方式的優缺點做成表格，給站長們當作參考，希望能幫助到站長們：
| 比較項目 | 響應式設計（RWD） | 自適應設計（AWD） |
|---|---|---|
| 運作邏輯 | 使用一組 CSS，在該組 CSS 中寫入判斷碼，既可自動判斷裝置螢幕尺寸， 顯示相對應網頁版本。 | 寫出多組 CSS，一般來說多為兩套，一組電腦版 一組為手機版。 再依據螢幕尺寸寬度，叫出不同 CSS 檔案。 |
| 適用網站 | 企業形象、個人品牌、中小型購物網站等 .. 一般需求網站。 | 大型平台網站，內容較多且複雜時才會考慮使用。 |
| 開發時長 | 快速 | 緩慢 |
| 加載速度 | △ | ✓ |
| SEO 維護 | SEO 優化＆維護容易。 | 需要有理解 SEO 策略的工程師，在同一個 URL 中，寫出對應裝置的 CSS 檔案。 |
| 維護成本 | 較低，因為只需維護一套 CSS | 較高，因為需要維護多套 CSS |
| 開發費用 | 依網站複雜度，費用由低至中高皆有 | 依網站複雜度，費用由中高至高皆有 |
下個章節，我們會說明響應式設計和自適應設計選擇哪個，會對網站有更好的成效。
響應式設計和自適應設計，選擇哪個更好？
了解響應式設計（RWD）、自適應設計（AWD）是什麼，以及各自的優缺點之後，那麼站長也許會疑惑，選擇哪一種來製作手機版網頁會更好呢？
犬哥網站一致推薦站長們選擇「 RWD 響應式設計 」，這是因為，響應式設計適用大多數網站，已經是目前網頁設計公司所使用的技術。
RWD 響應式設計：
最推薦站長使用的手機版網頁製作技術，因為快速、開發＆維護成本低、較適合大部分網站。
我們依據以下 4 種項目，說明響應式設計和自適應設計的差異和比較，以及為什麼響應式設計（RWD）是最好的設計方式。
原因 1：開發時的時間成本
使用 RWD 響應式設計開發手機版網頁，會是最快速的選項，因為只需要撰寫一組 CSS 檔案，並在適當的斷點添加「 媒體裝置查詢 @media 」指令，即可自動適應不同螢幕尺寸。
AWD 自適應網站在開發時，會需要撰寫電腦版 / 平板 / 手機版這 3 種 CSS 檔案，來適應不同的螢幕尺寸，自然會增加開發時間。
通常網頁設計公司，為了增加 AWD 開發速度，會將平板和手機版的 CSS 檔案寫在一起，這就會造成平板的畫面有時可能會呈現不自然的狀態。
所以，使用 RWD 響應式設計，不只節省開發時間，所需要花費的成本也會相對較低。
原因 2：網頁建置預算
現今網頁製作，大多都使用 RWD 響應式設計，因為 AWD 開發成本過高，並且 SEO 維護時需要較花費心力，所以站長需要付出較多的製作＆維護費用。
RWD 響應式設計，開發迅速，工程師工作的時間較短，自然會比需要花費大量人力的 AWD 自適應網站還要節省預算。
原因 3：後續的維護成本
網頁製作完成後，不論是使用哪一種方式製作手機版網頁，後續的維護都是必要的，自然也會需要去評估，響應式設計和自適應設計的成本。
先看響應式設計，後續再更改網頁設計時，雖然需要特別注意 CSS 檔案的修改，因為牽一髮動全身，但相對來說，只需要維護一份檔案，對站長來說會是比較方便的選項。
而自適應網站，同樣的修改，需要跑多組同樣的流程，這樣重複修改的流程，不只會耗費較多時間，也會消耗最多人力。
原因 4：SEO 排名優勢
響應式設計對於 SEO 會是較良好的設置，因為 AWD 自適應設計需要為每個裝置的 CSS 檔案進行 URL 指向，較容易出錯。
響應式設計會省去 SEO 前置步驟，自然會比較省時，也減少因為設置出錯，導致 SEO 分數受到影響的機率。
在下個章節，我們會特別說明，使用 RWD 響應式設計對於 Google SEO 的好處，讓站長們明白了以 SEO 角度來觀察，選擇「 RWD 響應式設計 」會是高 CP 值的選擇：）
小總結
整體來說，我們還是最推薦使用「 響應式設計 」，但並非 AWD 自適應網站就是不好的。
如果是大型平台網站，像是多達千件以上商品的購物商城，通常也可以考慮使用 AWD 設計，不過這種大型平台，多半會自己培養工程師撰寫 AWD，因為很少有網頁設計公司，會使用 AWD 技術。
一般的企業官網、個人部落格、中小型購物商城，大多都使用 RWD 技術即可。
使用 RWD 響應式設計，對 SEO 排名好處？
Google 早在 2016 年就推出 Accelerated Mobile Pages （AMP）計畫，目的是為了提升移動設備對網站的存取速度。
使用 RWD 響應式設計，對於 SEO 排名的好處，會相較 AWD 自適應設計和沒有手機版設計的網站，來的更多。
這邊我們整理出 4 點使用響應式設計對 Google SEO 的好處和優點，供站長參考。
優點 1：Google 等 .. 搜尋引擎，鼓勵響應式設計
Google、Bing、Yahoo 等 .. 搜尋引擎，鼓勵網站使用響應式設計。更多 Google 資料來源。
因為RWD 響應式網頁不只方便維護，也更方便 Google 等 .. 爬蟲，抓取網站最新的資料。
即便 Google 也接受不同網址的自適應網站設計，但也在 獨立網址說明文件 中，明確表示 Google 更喜歡響應式設計的頁面。
優點 2：降低網頁跳出率（Bounce Rate）
如果使用者在移動式設備，點擊進入網頁，卻發現不能順利瀏覽，或者是手機版頁面的設計不夠友善，那麼使用者便會跳回搜尋結果頁面，增加了網站的跳出率。
跳出率會影響到 SEO，Backlinko 研究，排名越低的網站，跳出率就越高。更多 網站跳出率是什麼。
如果使用 AWD 自適應設計，忘記分配好 URL 設置，導致使用手機版的訪客，不小心從手機讀取到電腦版頁面，那麼，跳出率就可能大幅提升，從而降低 SEO 分數 .. 。
優點 3：避免重複性網頁內容
目前響應式設計和自適應設計，都會盡量在同一個 URL 中，放入 CSS 檔案。
但早期的自適應網站，容易忽略 SEO 技術，導致電腦版和手機版網頁，轉變成兩個不同的網址。
當網址不同時，Googlebot 在爬取網站資料時，會容易把手機版網頁判定為電腦版網頁的「 重複性內容 」。
雖然 官方文件 表示非抄襲網頁，有重複內容不會影響分數，但也可能會導致權重分散，手機版網頁和電腦版網頁互相打架的情景出現。
使用響應式設計，就是在同個網址擁有不同的頁面呈現，因此就不會產生重複內容產生的相關性問題。
優點 4：節省 Google 爬取網站預算
Googlebot 會依照網站流量、更新速度、SEO 權重等 .. 多種因素，決定造訪這個網站的頻率，要撥多少「 預算 」給該網站，這就是 爬取預算。
Googlebot 會自動讀取手機版和電腦版網頁，並且分別出相似內容，以及避免誤判重複內容問題。
但一個內容網頁，有 2 種以上版本，會花費更多 Googlebot 更多的爬取預算在不同版本，這也是為什麼 AWD 自適應設計，正在逐漸減少的原因。
若網站規模過大，像是擁有許多網頁、更新頻率越高，像是電商平台、新聞媒體等 .. 類型網站，就會產生不小的影響。
因此擁有響應式設計的網頁，可大大節省 Googlebot 爬取預算。
使用 WordPress，響應式設計更輕鬆
看完以上介紹後，相信站長們也知道響應式設計是 CP 值較高的選擇，也知道了多種響應式設計的好處。
但若是不懂程式碼，想自找網頁設計公司額外開發 RWD 響應式設計，又怕成本過高，該怎麼辦呢？
不用緊張，這邊我們額外推薦另一款針對不懂程式碼，又想製作網站的站長，好用的架站軟體 WordPress。更多 WordPress 是什麼。
WordPress 軟體非常容易上手，雖然有些學習曲線，但相較於從零開始學習程式碼，它是一個絕佳選項。
搭配 佈景主題＋頁面編輯器，站長即使不使用程式碼，也能夠製作出響應式設計網頁！
犬哥網站擁有完整學習資源，想節省網頁製作預算的站長，千萬不要錯過。
若還是沒有時間完整自學 WordPress 網站，該怎麼辦？
犬哥數位，能夠以優惠超值價（低於一般網頁設計公司價格），幫助站長使用 WordPress 製作響應式網頁！
交給犬哥數位的優點？
犬哥數位可幫助你客製化多種類型網站，並且不會獨佔程式碼，交付案件後，教學站長們如何操作後台，期盼幫助大家，擁有完整、精美，全部屬於自己的網站！
交由犬哥製作的網站，從程式結構到軟體配置，會確保符合 Google 喜愛，讓您的網站在 SEO 表現如魚得水！
常見問題
響應式網頁設計（RWD）是什麼？我的網頁需要這項技術嗎？
響應式網頁設計（RWD）英文原文為 Responsive Web Design ，也稱作回應式網頁設計。可讓網頁自動在電腦、平板、手機等 .. 不同裝置的螢幕上，自動切換不同設計樣式，讓網頁畫面更方便使用者閱覽。
也就是說，響應式網頁設計可以讓網頁視覺呈現，更貼合手機、平板等 .. 移動裝置。
手機版本的網頁設計更為重要，因為 Google 統計 約有 58% 的搜尋 是由手機端產生，搜尋量已遠超過電腦版的次數，因此，讓手機版的網頁畫面更好閱讀，是刻不容緩的緊急任務唷。
RWD 和 AWD 哪一個才是最好的網站設計解決方案？
RWD 其實是針對 AWD 做出改善的網頁技術。在表現上，RWD 在設計難易度、SEO 表現、後續維護預算等 .. 都相較能得到較傑出的表現。
因此若無特別需求，建議你可選擇「 響應式網頁（RWD）」技術進行行動裝置網站的開發。
如果你還是無法確定哪種方案更好，可聯絡 犬哥數位專業團隊，幫助您進行免費評估！
網頁設計（RWD）對 Google SEO 有什麼好處？
響應式網頁設計（RWD）對於 SEO 有著良好的優化表現，像是：避免重複性網頁內容、後台同步資料更新、降低網頁跳出率、減少重新導向錯誤、減少檢索預算等 .. ，詳細可觀看內文學習唷！
網頁設計最佳選擇
如果你喜歡我們的文章，歡迎分享，有任何疑問可以在底下留言。
若有其他網頁設計、網頁行銷、 SEO 等 .. 相關的問題，也可查看犬哥網站的其他文章學習。
想進一步了解犬哥數位的網頁設計、廣告投放等 .. 多元服務，歡迎點擊下方諮詢按鈕，告知我們你的需求，將有專人為你服務！
參考資料
資料參考：
The Beginner’s Guide to Responsive Web Design (Code Samples & Layout Examples)－Kinsta
