RWD教學｜4大RWD響應式網頁設計原則＆RWD AWD區別！

RWD響應式網站設計是什麼？RWD AWD有什麼差別？

（一）RWD網站是什麼？

RWD（Responsive Web Design）響應式網頁設計的概念是由美國網頁設計師Ethan Marcotte所提出的。

RWD響應式網頁設計的核心概念是讓同一套網站的設計能夠在不同裝置（例如手機、平板、電腦）中自動調整，以提供最佳的瀏覽體驗。而要達到此目的，其主要執行原理是運用CSS3的媒體查詢（Media Queries）功能。

簡單來說，RWD響應式網頁意思就像是「水」的概念，因為水可以自如的在各種容器中任意變化形狀，而RWD網頁就如同水一般，能夠順暢的在各個設備中切換。

此外，根據Google官方統計，約有58%的使用者更傾向於使用手機進行搜尋和瀏覽網頁，並且Google官方文章也指出，目前的搜尋排名方式會以手機介面瀏覽友善的網站為推薦主力。

因此，各企業為了能夠在不同裝置上都能提供使用者優良的瀏覽體驗，RWD響應式網站設計也變得越來越普及。

RWD意思是一種網頁設計方法，其主要目的是打造「響應式網站」，讓網頁內容能夠適應不同大小的裝置螢幕，以達到優質的網頁瀏覽體驗。

（二）AWD網站是什麼？

AWD（Adaptive Web Design）自適應網站設計，又稱為「手機版網站」，是RWD響應式網站設計的前身。

不同於RWD響應式網站設計的方式，AWD自適應網站會為不同的裝置（如電腦、手機、平板）提供各自獨立的網頁設計。換句話說，若要支援多個裝置，就需要建立並維護多個不同的網頁版本。

若網頁的網址中出現「/mobile」，或是網址以 「m」為開頭，此網站則極有可能是使用AWD自適應網站所設計的，目前許多大型購物網站都還是以AWD自適應網站的方法來設計，例如Facebook、Youtube等。

也正因為AWD自適應網站需要為每個裝置設計不同的網頁，因此無論是網頁設計或維護上，都可能會比RWD響應式網站需要投入更多的時間與工作成本。

（三）RWD AWD有什麼區別？RWD AWD怎麼選？

RWD響應式網站設計與AWD自適應網站設計並無優劣之分，自身企業、業務性質等的不同，將決定哪一種網站設計更為合適。

以下附上RWD和AWD的比較表，幫助大家判斷哪種網頁設計更適合自己：

RWD vs AWD 差異比較

根據上方的比較表，建議網站所有者可以思考自己的預算、維護成本、網站類型的優先順序，進而衡量RWD和AWD哪種更適合自己！

5種RWD網頁設計模式與4大RWD設計原則報你知！

為了確保RWD網站設計能夠最大程度提升使用者網頁瀏覽體驗，你可以遵循以下4大響應式設計原則，幫助你在RWD設計開發前期更有方向！

（一）RWD響應式網頁設計4大原則

📍顯示內容應評估是否符合使用者需求

網頁RWD設計時，應事先了解用戶普遍使用的設備、常見的需求和偏好等。基於這些資訊，調整網站內容，確保手機網頁設計，或是平板網頁設計等的內容在不同設備上都能有效傳達信息。

📍降低點擊次數，提升網頁內容查找效率

除了評估用戶所需要的資訊內容之外，確保使用者進入網站後能夠迅速找到需要的資訊也是很重要的設計原則。

盡可能地在RWD網頁程式設計上減少用戶進站後的點擊次數，可以透過提供清晰的Breadcrumb麵包屑結構來達成此效果。

📍加速網頁開啟的讀取時間

若網頁載入速度過慢，用戶可能會因此失去耐心，建議可以使用檔案容量較小的WebP格式圖片、網頁壓縮技術等方式來提高頁面讀取的時間。

📍採用方格（塊狀）設計

方格或塊狀設計有助於網頁內容在不同裝置或螢幕大小之間自動調整最佳的顯示畫面。

方格設計方式能確保用戶不需要水平捲動即可輕鬆瀏覽網頁內容，對於手機瀏覽較為友善，同時也有助於網站保持統一的外觀和風格，達成一致性的品牌形象。

（二）5種較常使用的RWD響應式網頁設計模式

局部流動（mostly fluid）

局部流動（mostly fluid）是一種流體設計，網頁內容會隨著螢幕的寬度而調整。

當裝置的螢幕較小時，網頁內容將按照順序從上至下排列顯示；而當裝置的螢幕較大時，內容將達到預設的最大尺寸，並顯示在螢幕中央位置。

欄內容下排（column drop）

欄內容下排（column drop）與局部流動（mostly fluid）相似，同樣會隨著裝置螢幕變窄時，使網頁內容呈垂直堆疊排列，不同之處在於當螢幕變大時，網頁內容會往橫向排列。

版面配置位移（layout shifter）

版面配置位移（layout shifter）會根據螢幕寬度的不同，完全改變版面配置。

例如：從多欄位佈局切換到單欄位佈局，或者將主要導航從頂部移到側邊欄，目的是在不同裝置螢幕尺寸上提供最佳的用戶體驗。

細微調整 （tiny tweaks）

細微調整 (tiny tweaks) 通常包含調整字體大小、圖片尺寸、段落間距等，以確保網頁在不同設備上看起來協調一致。

畫布外空間利用（off canvas）

畫布外空間利用（off canvas）會在螢幕較小時，將一部分內容隱藏，需要點擊特定按鈕才會顯示，通常用於顯示導航選單、側邊欄或其他次要內容，以節省螢幕空間。

（三）響應式網站設計為什麼對SEO排名有好處？5大優點總整理！

✅ 有效提升被Google索引的速度

RWD響應式網站設計確保網站能夠在不同設備上提供一致的內容，這有助於Google更快速地索引你的網頁，且Google也明確表示更偏好於RWD響應式網站設計的頁面。

✅ 單一網址，避免被判斷為重複網頁

這與第1項優點相關，由於RWD響應式網頁設計自始至終都是同一個URL，除了加速Google索引網頁資料之外，也能避免被搜尋引擎視為重複內容的問題，而對排名造成負面影響。

✅ 節省Google爬取網站內容的預算

Google機器人每天都會爬取網站上的資料，但因為搜尋引擎中的資訊量龐大，所以分給每個網站的爬取預算是有上限的。

因此，相比AWD自適應網站設計可能有2種以上的設計版本（例如電腦版和行動版），導致增加Google爬取的成本與時間，RWD響應式網站設計則僅有1種版本，因此能夠有效節省Google的爬取預算。

✅ 提升使用者體驗，降低網頁跳出率

無論是電腦、平板還是智慧型手機，RWD響應式網站設計確保網站在各種設備上都能提供優質的用戶瀏覽體驗，而這有助於降低網頁跳出率，增加用戶停留時間，進而提升排名。

✅ 大幅降低維護時間成本

管理多個網站版本需要更多時間和資源，包括內容更新、優化和維護。

RWD響應式網站在這方面更具優勢，因為只有1種版本，因此簡化了維護過程，節省了時間和成本。

最後分享最多人詢問Welly SEO的問題：

❓採取RWD網頁設計，我的網站排名一定會提升嗎？

答案是：未必！

雖然Google官方已經表示會以行動裝置瀏覽友善的網站為推薦主力，但是SEO排名的影響因素眾多，包含Google演算法更新、內容優劣、網站架構等等，因此使用RWD響應式網頁設計並非百分百保證會提升網站排名的操作！

建議大家應專注在「提升用戶體驗、以用戶需求為核心」的方式經營網站，才是SEO的根本之道！

RWD教學：RWD CSS、RWD HTML實作攻略！

我們將提供較為基礎的CSS與HTML響應式網頁教學實作範例，大家後續可以依照自己的學習能力在網路上搜尋更進階的響應式網頁設計教學。

（一）響應式網頁CSS實作參考

對於CSS不了解的初學者，可能會覺得RWD網頁教學所教的東西看起來好像很困難，但其實實作上只需要搞懂基礎的框架就能夠完成！

首先，設定好媒體查詢（Media Queries）是首要工作，設定媒體查詢的目的在於讓網站知道在哪種高度與寬度的裝置下應該顯示的網頁模板，而其中裝置的「寬度」設定尤為重要。

我們也整理出常見的5種媒體查詢設定項目：

• width：視區寬度
• height：視區高度
• device-width：裝置寬度
• device-height：裝置高度
• color：視區顏色

實作範例如下：

上面的代碼表示當行動裝置寬度低於600px時，背景就會變成綠色的。

（二）HTML RWD 範例實作參考

在網頁最上方先加入以下這行代碼後，能夠省去後續編寫代碼時需要手動一個區塊一個區塊調整字體大小，之後就不會因為使用手機裝置瀏覽網頁版內容，而導致內容字體過小看不清楚。

通常「初始縮放比例（initial-scale）」與「設定畫面的最小縮放比例（minimum-scale）」會設定為1，但如果網頁內容較寬且資料量大時，則建議設定為0.6，不過這個數字還是可以依據實際需求進行調整。

以上是RWD響應式網頁設計時重要的2種代碼，當然RWD響應式網頁設計上還有許多值得深入研究與學習的地方，不過萬事起頭難，先了解上述2種代碼，幫助你開啟網頁設計之路！

（三）響應式網頁尺寸大彙整

了解RWD網頁尺寸是RWD響應式網站設計開始前最首要的工作，下表整理常見的各種裝置所適用的RWD尺寸寬度。

RWD開發工具推薦：Bootstrap、Grid、Flexbox等

（一）Bootstrap

Bootstrap提供了各種現成的HTML、CSS樣式和JavaScript元件，可用於快速建立響應式網站，非常適合初學者建立RWD響應式網站。

Bootstrap：https://getbootstrap.com/

（二）Grid

Grid是CSS的一個模組，用於實現網格系統的佈局，可以協助創建複雜的網格結構，使網站的內容能夠自適應不同螢幕尺寸。

（三）Flexbox

Flexbox（彈性盒子佈局）是另一種CSS佈局模組，專為設計具有可變換大小的響應式佈局元素。

Flexbox特別適用於創建彈性的導航菜單、網格和卡片佈局。

（四）Foundation

Foundation是一個開源的前端框架，提供了大量的HTML、CSS和JavaScript組件，其具有高度客製化的特性，適合對前端開發有更高要求的專業人士。

（五）Pure

Pure是由Yahoo開發的輕量級CSS框架，專注於提供簡潔、基本的CSS樣式，用於快速構建輕量級響應式網站。

由於Pure只有HTML和CSS，沒有JavaScript，因此檔案容量較小，但也因為只提供簡單的樣式，有很多功能都需要使用者自行編寫上去，而相反地使用者也可以同時確保自己自由的設計和擴展網站。

RWD網頁範例：Welly SEO、Medium

為了順應手機市場蓬勃發展，並且有效控制網站開發成本，目前市場上許多品牌網站都以RWD響應式網站設計為主，下方將分享2個RWD網站範例供大家參考。

（一）Welly SEO

Welly SEO響應式網頁範例如下圖，讓用戶在不同裝置瀏覽網頁時都能獲的最佳體驗並快速了解重要資訊。

（二）Medium

Medium也是一個值得參考的響應式網站範例，是許多專業寫手發佈文章的平台，無論使用手機或是電腦瀏覽，都提供了極簡潔的文字閱讀體驗。

以上就是RWD的介紹與教學，相信看完本篇文章，你對RWD會有更近一步的認識！如果想要請 Welly 協助您免費分析網站現況、設計合適的廣告或SEO行銷方案，歡迎點擊下方黃色按鈕，Welly 團隊會有專員為您服務！