By: willie 更新： 2023-10-22

RWD 網頁是什麼？響應式網頁的設計要點

分類：網站設計與架設標籤： RWD 響應式網頁 | SEO

文章目錄

#1 隨著螢幕尺寸改變網站的排版，有哪些做法？
#2 關於 RWD
#3 除了 RWD 外，還有哪些選擇？
#4 總結

你有沒有在使用手機點進某些網頁時，畫面很卡、版型整個跑掉、或者直接顯示電腦版的畫面，因為網站的字很小，導致很難閱讀的經驗呢？這是因為現代人瀏覽網頁的裝置越來越多樣化，包括桌機、筆電、平板、智慧型手機等，同一種版型的網站已經很難滿足使用者的需求，隨著螢幕尺寸改變版型的網站就成為了必然趨勢。

#1 隨著螢幕尺寸改變網站的排版，有哪些做法？

現在人手一支智慧型手機，根據《Strategy Analytics》的分析，目前使用智慧型手機的人口已達 39.5 億，已超越全球總人口數（79 億人）的一半。用手機上網瀏覽已經是常態，而在手機與其不同設備上的網站設計可分為 RWD、AWD、AMP 與手機版網站。

先說重點，以一般企業來說，最符合開發效益的是 RWD；AWD 因為開發成本較高，適合大型網站（比如 Amazon）；而以 SEO 來說，最不建議使用手機版網頁（因為會產生兩個網站，反而降低各自排名）。

#2 關於 RWD

#2-1 介紹

RWD 是目前最主流的方式，在開發難度與提升使用者體驗的性價比最高，RWD 全名為 Responsive Web Design，中文翻譯為「響應式網站設計」，這個技術的核心原則是能針對不同螢幕的大小而自動調整網頁圖文排版。讓使用者在不同的設備上瀏覽同樣的網站都能得到良好的使用者體驗。

根據 Google 的描述：RWD 是一種設定，可讓伺服器一律向所有裝置發送相同的 HTML 程式碼，並透過撰寫好的 CSS 程式碼，自動判斷目前瀏覽網站的裝置螢幕尺寸，決定要用哪種排版形式。資料來源：Google 說 RWD

#2-2 技術要點

RWD 最重要的是概念是「網站的版面布局與變化」。通常情況下，電腦版網站在使用手機瀏覽時，會因為螢幕解析度不同而讓網站內容產生跑版以及網頁錯誤，以架設網站的進程來說，會先設計出手機版的網頁排版，當排版確定後，開始測試不同螢幕尺寸下會產生的排版問題，最後在透過使用特定的 CSS 寫法，來調整不同裝置要顯示的網頁元素與區塊。舉例來說，在手機螢幕上，可以將導航菜單折疊起來，並使用下拉列表來代替傳統的橫向導覽列。

此外，RWD 還要求許多文字內容上的細節調整，例如字體大小應該根據不同的設備進行適當調整，以確保網頁在不同的設備上都能讓使用者輕鬆閱讀，圖片和影片的顯示尺寸也應該根據螢幕大小進行調整，以避免在較小的螢幕上出現模糊或拉伸的情況。

RWD 技術對於網站的 SEO 也有很大的幫助。因為使用 RWD 技術的網站不需要另外架一個手機版網站，所以不同版型的網頁都是使用同一個網址（URL），可以累積網頁的權重，提高頁面在搜索結果頁（SERP）中的排名，而如果是早期的做法，會開一個子網域建立手機版網站（比如 MOMO 的電腦版為：https://www.momoshop.com.tw/、手機版則為：https://m.momoshop.com.tw/），但就算是子網域，不同的 URL 對於搜尋引擎來說就是不同的頁面，所以同樣內容的頁面會彼此分散權重，導致搜尋結果頁面排名的降低。

然而，RWD 技術也存在一些限制和挑戰，RWD 技術需要對網站進行全面的測試和優化，以確保網站在不同的設備和瀏覽器上都能良好運行，這些測試和優化工作其實會耗費大量的時間和精力。同時，由於需要不同裝置的版型寫進 CSS 當中，也容易導致 CSS 過大等問題。

#2-3 常見的 RWD 做法

在實際應用中，可以使用 CSS 的特定寫法來實現不同螢幕尺寸的響應式調整，以下介紹幾種常見的做法：

Media Query：

Media Query 是一組邏輯表達式，可以根據不同的螢幕大小和設備特性來決定不同的CSS樣式，比如不同螢幕尺寸可以採用不同的背景顏色。

@media screen and (max-width: 650px) {
  body {
    background: rebeccapurple;
  }
}

Responsive Images：

有兩種做法，一種是使用 HTML 語言的標籤，另一種使用 CSS 的作法，這兩種方式都可以讓圖片根據螢幕尺寸調整大小。

HTML：

<picture>
  <source media="(min-width: 600px)" srcset="sample-large-1x.jpg 1x, sample-large-2x.jpg 2x" />
  <source media="(min-width: 400px)" srcset="sample-medium-1.jpg 1x, sample-medium-2.jpg 2x" />
  <img src="sample-small.jpg" alt="Sample" />
</picture>

CSS：

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Display：

這是一種 CSS 語法，可以設置元素的顯示方式。可以使用 display:flex 來設置一個 HTML 元素的彈性布局，以實現響應式調整的排版變化。

.container {
  display: flex;
  flex-direction: row;
}

Float 和 Clear：

這兩種也是 CSS 語法，可以設置 HTML 元素的如何流動。例如可以使用 float:left 來設置元素區塊從左側開始流動疊加，同時可以使用 clear:both 來移除特定元素的流動，避免當使用不同螢幕尺寸瀏覽網頁時影響或遮蓋住其他區塊。

img {
  float: left;
}

.clearfix {
  clear: both;
}

CSS 框架（CSS Frameworks）：

CSS 框架是一種基於 CSS 和 HTML 的設計工具，可以提供一些常用的 UI 元素和樣式，且大部分也提供 RWD 的功能，例如 Bootstrap 是其中常見的框架。

總體而言，RWD 技術是現代網頁設計的一個必要趨勢，我們需要對 RWD 技術有一定的了解和掌握，並運用相關工具和技術進行設計和開發，為使用者帶來更好的使用體驗和網站效果。

#3 除了 RWD 外，還有哪些選擇？

#3-1 AWD

除了 RWD 之外，還有另一種設計形式叫 AWD（Adaptive Web Design，中文為「自適應網頁設計」）基本上對使用者來說，網站外觀變化、使用情況都跟 RWD 大同小異，RWD 與 AWD 都是使用同一個網址的網站在不同設備上呈現大小合適的排版變化，其中的差異點是， RWD 根據不同設備讀取同一組 CSS 讓排版產生變化，而 AWD 則是會透過撰寫多組針對不同裝置的 CSS，接著先透過系統判斷使用哪種裝置，才讀取特定的 CSS ，所以手機、平板、電腦都會有一個各自的固定版型。

以製作成本來說，RWD 看起來是最符合效益的，因為只需要一個網頁，透過 RWD 的設計去符合不同裝置；AWD 就得增加許多程序與開發時間。然而 RWD、AWD 視覺上看起來幾乎一樣，那為何還要區分呢？是因為像大型電商（例如 Amazon）網頁內容很多，如果只用 RWD 排版的話，畫面顯示會過於冗長，不如另刻一個版型，用 AWD 呈現。但在製作成本、開發時間與維運方面，AWD 比 RWD 還要高，如果是一般的中小企業，建議使用 RWD 即可，有大量內容呈現在不同裝置的網頁則比較適合 AWD。

重點：建議一般的中小企業使用 RWD 即可，有大量內容的較適合 AWD。

#3-2 行動版網站

這時可能有人提問：那手機版的網站不好嗎？上述介紹 RWD 與 AWD，它們都是同一個網址因應不同裝置呈現畫面的變化，手機版網站則是獨立製作，比如 PChome 跟 momo 購物網，它們的手機版都是另外開發的網站，雖然手機版的網站讀取速度比較快，但由於網址（URL）與電腦版的不同，無法累積權重在同一個網站，以及會產生重複內容的問題，這都會影響 SEO ，而且製作一個手機版網站，所有圖片、內容、素材都要額外調整，在開發上需要花費不少時間。

#3-3 AMP

AMP（ Accelerated Mobile Pages ，中文為「加速行動版頁面」）是 Google 針對手機開發的一種頁面呈現方式，主要是為了提高行動裝置對網站的讀取速度，從 Google 官方說明可得知，他們非常重視使用者體驗，也很大力推行 AMP：「客戶前往到達網頁後，網頁的載入速度快慢會是促使他們完成轉換或掉頭離開的關鍵因素。行動版網站的載入時間一旦超過 3 秒，訪客通常就會選擇離開，但大部分行動版網站的載入時間平均卻比這個目標多出 19 秒。」

AMP 的設計旨在追求效率，除了快速載入網頁之外，還有以下優點：

由於速度快，可增加使用者黏著度：使用者體驗好，可大幅提高黏著度與點擊率。
有機會提高 SEO：點擊率提高，對網頁的 SEO 有很大的優勢。

然而凡事一體兩面，AMP 有以下缺點：

只適用於手機裝置（而且只適用 Google 搜尋介面）。
對於圖檔、文字字體等的限制很多（為了避免讀取過大的設定檔）。
由於限制內容格式，因此只能使用 AMP-iframe，無法使用客製化的 JavaScript。

白話一點來說，AMP 雖然讀取速度快，但也因為這個「快」，得犧牲一些介面設計、圖片或內容素材。而且其實現在手機上網速度都很快，不太需要特別開發 AMP 功能，因此 AMP 較適用於一些新聞類、媒體的網站，其內容多以文字為主，必須講求時效性，希望能夠在最短時間內傳播消息。

另外，我們都知道電腦版網站的圖片跟手機版的圖片尺寸不同，如果沒有任何調整，那用戶從電腦轉到手機瀏覽時，很有可能會跑版，這時上面不同做法的解決方式為：

RWD 、AWD：系統自動判定瀏覽裝置的尺寸後，將圖片伸縮成適當大小，以適應不同裝置。
手機版網站、AMP：額外製作符合不同裝置的圖片。

網站設計	英文全名	開發成本	載入速度	特點
RWD 響應式網站設計	Responsive Web Design	3	3	開發難度與提升使用者體驗的性價比最高。
AWD 自適應網站設計	Adaptive Web Design	2	3	與 RWD 類似，但開發端的差異讓 AWD 較適合大型網站。
AMP 加速行動版頁面	Accelerated Mobile Pages	4	1	單純為了優化網站載入速度的做法，但犧牲了許多網站視覺。
行動版網站	Mobile Website	1	2	最不建議的做法，等於另外做一個網站，會影響網站的 SEO。

#4 總結

智慧型手機的普及已經大幅改變上網習慣，從 Google 帶起的各種革新可得知網頁必須因應智慧型裝置調整，讓使用者有最佳的瀏覽體驗。其實說下來還是一句話：「站在使用者的角度思考產品，進而去調整改進。」

RWD 帶出一股網頁在手機優化的新浪潮，而科技的發展日新月異，之後一定會有更多的設計興起，期待未來有更多嶄新、使用上更方便的技術突破。

總的來說，RWD 技術是現代網頁設計的一個必然趨勢。它可以使網站在不同的設備上都能自適應調整，提高使用者的體驗和網站的 SEO 排名。然而，RWD 技術也需要投入大量的時間和精力進行設計、測試和優化，才能實現良好的網站瀏覽效果。

作者： willie

心理學本科系畢業，熟悉社會心理學相關領域，對於心理學如何應用於數位行銷相當有興趣，熟悉市面上常見的大部分行銷工具，實驗設計、測驗設計的相關訓練也讓我在使用者分析上有更多的洞見。輔助過許多小型企業，曾參與許多專案，包含：建立形象官網、流量成長、口碑和社群營銷等，用以增進客戶的商業表現，數位行銷的策略制定與執行為客戶帶來的商業成長達數倍以上。