好的設計要如何跨屏瀏覽，而不失原先的設計效果呢？響應式網頁設計(Responsive Web Design)，可以幫助你解決多種裝置顯示的問題，又稱作RWD、適應性網頁、回應式網頁設計..等，這是一項始於2011年的技術，隨著行動裝置手機、平板越來越普及後，被公認為是網頁設計開發趨勢。在響應式網頁設計中，手機、桌機版使用同個網址，同一個 HTML 文本，網站使用CSS3語法，以百分比的方式與彈性的畫面設計，在不同解析度下改變網頁頁面的佈局及排版，讓不同的設備及裝置(桌電、筆電、平板、手機等)都可以正常瀏覽同一個網站，減少用戶在頁面中縮放或是捲動的行為，提供最佳的網站體驗！
☞ RWD 響應式網站（Responsive web design）是什麼？
RWD 是透過檢查螢幕寬度（瀏覽器寬度），讓網頁上的內容，可以改變文字大小、行距、整體排版、區塊位置、圖片縮放等等樣式。無論你是用手機開網頁、電腦開網頁、平板開網頁，網頁內容的版面配置，都可流暢的依照瀏覽器寬度來改變，用一套網址就可以打遍天下！
RWD 最重要的一個部分，就是依據「螢幕寬度」，也就是檢視區寬度（Viewport）來改變網頁上的內容排版。在HTML當中，應該著名meta name = ”viewport”的標籤，讓瀏覽器清楚知道「寬度尺寸變化」與「網頁內容縮放」兩者的比例。
- 利用 meta viewport 標籤，控制瀏覽器大小變化時，網頁內容的寬度、縮放該如何調整。
- 註明 width=device-width ，讓網頁內容可以依據「裝置寬度」，靈活運用裝置的獨立像素，可以自由改變排版。
- 註明 initial-scale=1 ，讓網頁 CSS 像素：裝置獨立像素＝1:1，如此一來，無論手機直立、橫放，都能確保網頁能完整運用螢幕寬度。
此外，RWD之所以可以隨著不同裝置改變網頁佈局版型，最大的功勞來自於CSS樣式。運用CSS設定條件，在不同的螢幕寬度之下，即可使用不同的字型大小、行距與版面位置。
在 CSS 中，大型元素使用「相對」寬度，避免使用「絕對」寬度。因為各家手機、平板，螢幕大小不同，設定了「絕對」寬度，難以保證可以在所有類型裝置上正常顯示。例如，在頂層 div ，設定 width: 100%，而不要使用 width: 344px。
☞ RWD響應式網站優點
▶適用於所有的螢幕尺寸、裝置
面對不同螢幕尺寸能自動調整網頁版面寬度、操作介面、內容排版、圖片大小…等，電腦、平版、手機、電視…都能順利瀏覽，且不用為某個裝置另外製作網站，僅用一個網站、一個 URL ( 網址 ) 就能解決螢幕尺寸問題，就算未來有更大或更小螢幕尺寸的的裝置，也不用擔心無法順利瀏覽網頁的問題。
▶降低網站開發成本
以往傳統網站開發為了給使用者最佳的瀏覽環境，會開發電腦版及手機版網站，但這在製作上等於一個網站要做二次；而 RWD 只需製作一個網站即可，有效的降低網站的開發成本
▶有利於分享網頁，累積網站流量
過往不同的使用者在彼此分享網頁時，經常會因為瀏覽器或裝置的不同，而無法達到網頁瀏覽的最佳效果，導致文章流量、瀏覽數容易被稀釋。RWD 只有一個頁面、一個URL（網址），可直接避免上述問題產生。
▶利於網站營運維護
若網站沒有後台管理系統，靜態網頁頁面的更新維護需要電腦版、手機版各做一次，不僅麻煩且容易出錯，RWD 則只需更新一次即可，不會有不同步的問題。
▶可優化SEO經營
近年來因各大搜尋網開始重視手機用戶的搜尋權益，紛紛要求網站在手機上需易於閱讀，根據網站的字型大小、連結密集程度，及版面能否隨屏幕大小調整，進而提高你的網站在有關搜尋引擎內的排名。Google 在「行動版網站搜尋引擎最佳化設定」指南中建議使用 RWD 技術來開發網站，一個網站使用同一個網址，不會因為電腦版、手機版多個網址來分散 SEO 成效。
延伸閱讀：SEO是什麼？SEO教學全攻略：On Page SEO、Off Page SEO
▶降低網頁跳離率
如果行動用戶搜尋後點選網站，發現用手機無法順利瀏覽故而立即回到搜尋頁，容易被Google判斷為此網站不是最好的搜尋結果，進而使SEO排名下滑外。
▶提高網頁可用性
RWD響應式網站不論使用電腦、手機、平板等任一裝置查看網站時，系統會將網頁自動調整為符合螢幕大小設計，使用者可以很順利、方便的使用各種設備瀏覽網頁。
▶減少重複的網頁內容
以Google的規則來說，不同網址但卻呈現重複內容的網站，容易影響SEO的排名評價。同一個網站、同一個URL，可以大幅降低上述情形發生。
▶流量集中至單一網址
對RWD響應式網站來說，同一個網址同時適用於電腦、平板及手機，因此網站的流量會累積在同一個網址上。當跳出率下降、使用者停留時間增加，網站內容可用性高又能集中累績流量，自然有利於SEO排名優化。提高在地搜尋評價
現今大多數使用者都以行動裝置來使用Google在地搜尋，而搜尋結果會優先顯示離使用者距離較近的店家。但若這個網站不能在手機上順利瀏覽，高曝光率反而會帶來高跳出率，進而影響搜尋SEO排名評價。
▶同步更新電腦和手機資料
RWD響應式網站在管理上對後台管理者擁有著極大的便利性，資料更新一次編輯，系統就會自動調整為符合螢幕大小設計。
☞ RWD 響應式網站與SEO設置
RWD響應式網站當中，有哪些設定是與SEO相關的呢？「使用者體驗」是SEO相當重視的一個環節，小至按鈕夠不夠大，文字間距夠不夠寬，還有手機網頁是否好操作、流程是否順暢、畫面是否符合螢幕寬度、載入的loading時間會不會太久..等，在設置RWD時，也可以同步考慮：
- 使用 meta name=”viewport” 標記，向瀏覽器聲明，網頁內容可以配合裝置寬度調整大小。
- 請勿使用 robots.txt 或其他方式，擋住 Googlebot 檢索任何網頁資產 (CSS、JavaScript 和圖片)，以避免 Google 無法正確解讀 RWD 的網頁配置。
- RWD 響應式網站上線後，使用 Google 行動裝置相容性測試，檢驗 Googlebot 是否能正確解讀，並且預防有不小心擋掉 Googlebot 的狀況。
- 使用響應式圖片技術（Responsive Images）。除了可依據裝置寬度，調整圖片比例之外，在高解析度裝置上，也可給予高解析度圖片。
- Google 建議使用「適應性 JavaScript（ JavaScript-adaptive）」。
除了SEO，經營網站還需考量人力、開發時間、管理維護成本，以及內容資料量、功能複雜程度以及畫面要求程度，可參考下方內容：
RWD 響應式網站案例｜兩廳院售票系統消費者行為報告網站
兩廳院售票系統作為國內主要藝文票券銷售平臺，更是藝文觀眾及表演藝術場館、團隊的連結橋樑。將複雜、難懂的資訊視覺化，轉譯成清晰易懂的圖像，依據不同內容呈現多種樣貌的動態表現，讓數據變得生動不乏味，並建置成響應式網頁，將生硬冰冷的數據轉化為層層堆疊的故事情境，讓使用者在不同載具上皆能享受完整的視覺體驗。
RWD 響應式網站案例｜Design For Change 臺灣童心創意行動協會
Design for Change, Global 是一個發源自印度河濱學校的國際教育非營利組織,在全球超過 70 個國家在地推廣創新教育理念,並以設計思考為基底的創新教學模式 DFC四步驟讓孩子主動解決問題、活用所學。以插畫風格詮釋設計思考的理念,期望帶出有趣、活潑的視覺表現，設計成一個兼具功能與美感的官方網站，建置成響應式網站後，能讓手機及桌機前的教育工作者都能輕鬆了解協會的理念及獲取最新的資訊
如有RWD響應式網站設計需求，歡迎透過下列表單聯繫我們，取得完善且專業的整體網站規劃建議！
