RWD 響應式網頁是什麼？6 大優點 3 大方向，告訴你手機版網頁設計，選擇哪個更好

｜文／犬哥網站｜原文出處／RWD 響應式網頁是什麼？跟 AWD 自適應網站有何不同？用哪個設計手機版網頁更好？｜首圖／Freepik

---

這篇文章，我們會說明「 RWD 響應式網頁設計 」是什麼，以及響應式網頁的重要性。

行動設備（Mobile）日益興起，有極大部份的網路使用者，都是透過手機等 .. 行動設備來進行企業服務查詢、電商購買、知識搜索等 .. 行動。

因此，響應式網站（Responsive Website Design，簡稱 RWD）的設計，就變得十分重要。

但你知道，RWD 響應式網頁和傳統式手機版網頁設計有什麼不同嗎？

還有與響應式網站相似，容易被搞混的自適應網站（Adaptive Website Design，簡稱 AWD），我們也會一同介紹，那麼就開始囉！

手機版網頁設計重要嗎？

開始設計網頁，或是委託網頁設計公司前，我們必須先瞭解一個重要的觀念，那就是電腦、平板、手機等 .. 不同裝置，都需針對其螢幕大小，進行設計。

尤其手機版本的網頁設計更為重要，因為 Google 統計 約有 58% 的搜尋 是由手機端產生，搜尋量已遠超過電腦版的次數，因此，讓手機版的網頁畫面更好閱讀，是刻不容緩的緊急任務。

有時使用手機設備觀看網頁，會看見不同的網頁設計，可能是按鈕、圖片、文字位置不同，也可能是排版具有極大改變，這就是經過「響應式設計」的網頁。

下圖我們以「 犬哥網站 」為範例，擷取桌電和手機的畫面，讓大家觀察其中的差異：

網頁內容可以依照設備螢幕寬度不同，立即反應在排版上，這就是「 響應式設計 」和「 自適應設計 」的重要用途。

另外，還有將電腦版網頁和手機版網頁分開來製作的「 傳統手機版網站設計 」。

那麼，這 3 種不同的網頁設計形式，分別是什麼？有什麼區別呢？我們繼續往下看吧

響應式網頁（RWD）是什麼？

 

響應式網頁（RWD）英文原文為 Responsive Web Design ，也稱作回應式網頁設計。可讓網頁自動在電腦、平板、手機等 .. 不同裝置的螢幕上，自動切換不同設計樣式，讓網頁畫面更方便閱覽。

RWD 的技術核心為讀取頁面上同一個 CSS，依照不同螢幕寬度，來顯示網頁設計排版。

手機、桌機同網址。同一個 HTML 文本，CSS 能依照不同螢幕寬度的條件，來改變排版。

• CSS 是什麼：CSS 是一種網路設計語言，不能單獨使用，必須和 HTML 或 XML 一起應用在網頁製作上，可呈現網頁設計元素。「 媒體裝置查詢 」是 CSS 最重要的能力，可分辨開啟網頁的裝置，即時讀取不同的樣式呈現。

因為手機設備的使用需求日益上升，於是響應式網頁 受到 Google 的推薦和獎勵。

Google 會在 SEO 排名時，考慮該網站設計對移動式設備的友好程度。如果你的網站沒有使用 RWD 設計，你的網站關鍵字排名就會降低。

除了 SEO 排名外，響應式設計還可以提升使用者體驗，從而提升一定的轉化率。

如果不太理解 SEO 是什麼，可先前往 SEO 指南 先進行全面學習！

自適應設計（AWD）是什麼？

 

自適應網頁設計（AWD）英文原文為 Adaptive Web Design，跟響應式網頁（RWD）一樣，可在同個頁面（不用切換連結）依據適合螢幕尺寸，呈現不同的視覺設計。

在不同的裝置開啟網頁時，AWD 會先判定裝置屏幕尺寸是哪一種，來讀取不同的 CSS，呈現網頁設計排版。

但相對於響應式設計（RWD）網站，為一個網站設計頁面多種 CSS，會增加工作的複雜程度和開發成本，但自適應網頁（AWD）可以更好呈現網站的視覺效果。

另一個自適應網頁（AWD）好處是，我們可以評估哪個裝置的流量表現較佳，然後針對該裝置尺寸，修改頁面設計和深入開發網頁功能深入開發。

像是：優化網站速度、設計美觀度、圖片影片優化等 .. ，站長可集中設計該版本的網頁，從而節省金錢和時間等 .. 開發成本。

傳統手機版網站（Separate URLs）是什麼？

 

傳統版手機網站，是將多個不同的裝置螢幕尺寸分開來，進行網頁製作。

與 RWD 和 AWD 設計只設計一個網頁（不管多少設計版本，都會是同一個連結）不同，傳統網頁設計會有多個網頁（連結）指向同一個內容。

這多個網頁，會同時存在於網站上，統一提供給主機伺服器，由主機判斷使用者透過哪種裝置進入網頁，再抓出適合該裝置螢幕尺寸的網頁內容。

也就是說，網站上有幾個網頁，就會針對該網頁，有多種不同尺寸版本，網頁數量，將會以倍數成長。

這會相對提升網站開發和維護成本，同時也會因為網站檔案過大，增加讀取速度等 .. ，讓 SEO 排名逐漸降低。

如何分辨傳統手機版網站 / 響應式設計

只要分別進入手機版和電腦版網站，觀察連結，若連結不同，就表示使用的是傳統版網頁設計。

因為傳統手機版網站設計，實際上是跟電腦版網頁，是兩個分開設計的網頁。

像是，原本桌機版網站連結為：https://example.cpm

進入手機版網頁後，連結變更為：https://m.example.com

連結一經變更，就表示使用的是傳統板手機網頁設計唷！

非響應式設計網站，在手機上會如何呈現？

若沒有使用相關的響應式設計，網頁在手機版面上的呈現，可能會有變形的情況，導致使用者難以閱讀。

以下是來自 DequeUniversity 製作的沒有套用響應式設計網頁的範例：

可以看見，沒有響應式網頁設計的網站，會讓手機版的頁面難以閱讀，使用者必須使用手指滑動放大，造成不便。

 響應式設計，對 Google SEO 好處？

Google 早在 2016 年就推出 Accelerated Mobile Pages （AMP）計畫，目的是為了提升移動設備對網站的存取速度。

這邊我們整理出 6 點使用響應式設計對 Google SEO 的好處和優點，供站長參考。

優點 1：Google 等 .. 搜尋引擎，鼓勵響應式設計

Google、Bing、Yahoo 等 .. 搜尋引擎，鼓勵網站使用響應式設計。更多 Google 資料來源。

因為RWD 響應式網頁不只方便維護，也更方便 Google 等 .. 爬蟲，抓取網站最新的資料。

即便 Google 也接受傳統式網站設計，但也在 獨立網址說明文件 中，明確表示 Google 更喜歡響應式設計的頁面。

優點 2：避免重複性網頁內容

如果我們的網站未使用響應式設計，手機版和電腦版的網址就會不同。

當網址不同時，Googlebot 在爬取網站資料時，會容易把手機版網頁判定為電腦版網頁的「 重複性內容 」。

雖然 官方文件 表示非抄襲網頁，有重複內容不會影響分數，但也可能會導致權重分散，手機版網頁和電腦版網頁互相打架的情景出現。

使用響應式設計，就是在同個網址擁有不同的頁面呈現，因此就不會產生重複內容產生的相關性問題。

優點 3：後台同步資料更新（方便站長，同時提升使用者體驗）

因為 RWD 響應式網頁只會讀取一個頁面的數據，因此站長可以只更新一個頁面的資料，不用分別前往不同頁面進行資料更新。

同時也避免因為不同步更新，導致使用者在不同設備上收取到不同資訊產生的疑惑，提升使用者體驗！

優點 4：降低網頁跳出率（Bounce Rate）

如果使用者在移動式設備，點擊進入網頁，卻發現不能順利瀏覽，或者是手機版頁面的設計不夠友善，那麼使用者便會跳回搜尋結果頁面，增加了網站的跳出率。

跳出率會影響到 SEO，Backlinko 研究，排名越低的網站，跳出率就越高。

優點 5：減少重新導向錯誤

當手機版、電腦版網址不同時，我們需要分別在不同裝置的網址，加入重新導向的指令，避免訪客進入錯誤裝置指派的網站。

但若是沒有設置該指令，就會容易讓訪客進入錯誤版本的網站，像是用手機開啟時，卻顯示電腦版網站。

並且重新導向會產生不必要的主機負擔，讓使用者等待太久，更可能會提高跳出率，影響搜尋的排名表現！

優點 6：節省 Google 爬取網站預算

Googlebot 會依照網站流量、更新速度、SEO 權重等 .. 多種因素，決定造訪這個網站的頻率，要撥多少「 預算 」給該網站，這就是 爬取預算。

Googlebot 會自動讀取手機版和電腦版網頁，並且分別出相似內容，以及避免誤判重複內容問題。

但一個內容網頁，有 2 種以上版本，會花費更多 Googlebot 更多的爬取預算在不同版本。

若網站規模過大，像是擁有許多網頁、更新頻率越高，像是電商平台、新聞媒體等 .. 類型網站，就會產生不小的影響。

因此擁有響應式設計的網頁，可大大節省 Googlebot 爬取預算。

選擇哪個更好？經營網站的考量

響應式設計（RWD）、自適應設計（AWD）、傳統板手機網頁，這三種設計都各自有其優缺點，但哪一種選擇更好呢？

犬哥數位 整理了三個不同設計方式的優缺點做成表格，給站長們當作參考，希望能幫助到站長們：

無論決定要選擇哪一種方式設計網頁，我們的主要目標是站在使用者角度，去考量手機畫面的呈現效果。

建議站長以公司定位、網站需求、消費者、產品等 .. 進行多方考量，接著去衡量網頁製作的預算，再去選擇如何設計多個設備的網頁呈現。

這邊整理 3 個思考方向，幫助站長進行考慮：

方向 1：網站內容＆類型

如果你的網站是企業品牌網站、專業形象網站、服務網站等 .. ，建議採用 RWD 方式開發移動式設備頁面。

因為公司品牌類型網站，主要流量並非來源於行動裝置，網站使用對象也多以電腦網頁進行瀏覽，因此較重視電腦版所呈現的形象感，就可使用較方便迅速的 RWD 方式。

如果是大型購物商城、行動裝置系統平台、遊戲平台等 .. ，則可採用 AWD 或是傳統手機版頁面設計方式，來開發行動裝置頁面，較能針對移動設備用戶，提供完整使用體驗。

方向 2：網站使用對象

了解網站類型後，接著我們就來分析使用族群大多透過哪種設備進入網站，或是依據使用情境，是否需要有不同的設備使用體驗等 .. 來做考量。

使用自適應設計網頁（AWD）和傳統手機網頁設計，較能依照不同的使用需求，客製化不同的設備環境。

如果是需要在不同設備上應用不同設計的網站，使用相容性最高的響應式設計（RWD），會是不錯選擇。

方向 3：網頁建置預算

最後的考量，就是比較實際面的預算方面啦！

由於自適應網站（AWD）需同時開發和維護 2 個或多個網頁 CSS，雖然都是抓取相同內容的 HTML 文本資料庫，但系統開發成本和後續網站維護，都會較響應式設計網頁（RWD）來得高。

至於傳統式手機網頁設計，則是這 3 種方法中，花費最多成本的方式，但同時可客製化不同螢幕尺寸頁面的設計。

因此站長可再決定哪種方式前，多加斟酌開發＆維護預算。

總結

以上是選擇哪個設計方式的考量方向，不過我們最建議站長以「 響應式設計（RWD） 」為優先選擇。

因為 RWD 設計，只要一個 CSS ，即可讓網頁自動適應不同裝置的螢幕大小，且沒有任何 SEO 困擾。

學習更多行銷人文章
怎麼做網站SEO檢查？網站SEO健檢工作項目說明與教學！
網站後台系統(CMS)要怎麼選？需要客製化嗎？後台沒建好怎麼辦？

---

｜本文由犬哥網站授權提供，僅反映專家作者意見，未經原作者授權請勿轉載。｜