什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂
RWD網頁設計(又稱響應式網頁設計)已經出來幾年了，但常常還是有客戶詢問什麼是RWD網頁設計？因此我們做了幾張圖，希望能用看圖說故事的方式，讓大家快速了解什麼是RWD網頁設計，以及RWD網頁設計的特性。
目錄
什麼是RWD響應式網頁？
RWD，英文原文為Responsive Web Design，中文為響應式網頁設計 / 自適應網頁設計 / 回應式網頁設計 ，是一種網頁前端技術的作法，用來讓網站在不同的裝置間保持正常運作。
用白話文來說，RWD就是在同一個網址中，網頁可因應不同裝置寬度(電腦、平版、手機)可自動產生不同的版面變化的網頁技術。
RWD響應式網頁就是手機版網頁？
有很多人直接把RWD網頁叫手機版網頁，但其實手機版網頁和RWD網頁是不一樣的東西。單純的手機版網頁是只能在手機上正常運作，把手機版網頁的網址傳到電腦上，就會看到比例不一致的畫面。而RWD網頁則沒這個問題，在RWD網頁所使用的網址，在不同的裝置中都可以正常顯示。
為什麼網站一定要RWD？
有RWD的網頁，版面配置會自動跟著桌電/筆電/手機不同的裝置自動調整，讓網頁符合各裝置的操作習慣。當你的網站沒有符合RWD響應式，你的潛在客戶如果用手機上網，可能看都不看就直接關掉網頁。
RWD響應式網頁如何在電腦和手機裝置間做切換？
為了適合不同尺寸的螢幕，必須將網頁的版面設計成可以像樂高積木一般自動變換區塊尺寸和位置，橫向排列自動變成直向排列。也因此，RWD網頁大部份就會長得像樂高積木，成為塊狀的版面設計。
如果沒有RWD，網頁畫面會有什麼差別？
沒有RWD的網頁，在手機上會看到像左圖這樣，必須不斷用手指頭在手機上不停地放大縮小，才能看清楚文字內容。
有RWD的網頁，在手機上看到的畫面則會像右圖，各區塊會依設定的比例做區塊切換，不需手指放大就可以清楚網頁文字。
RWD網頁設計案例：博來科技RWD企業形象網站
無RWD的傳統網站案例：雷祥生技企業網站
如何知道這個網頁有沒有符合RWD規範？
要判斷這個網頁是不是RWD網頁，最簡單的方式就是直接改變瀏覽器寬度，看看它的版面會不會在特定尺寸有所變化。
RWD網頁設計案例：HarvestOne 品牌形象RWD網站設計
網頁選單在RWD響應式網頁中將如何呈現？
為了在手機上也能呈現「選單」的操作方式，主選單到了手機版就變成漢堡選單的樣式，點擊後會展開網站架構。
RWD網頁設計案例：CADIIS RWD Web Design Company
RWD響應式網頁中的版面該如何取捨？
許多電腦版上漂亮的背景，到了手機版當然就要適度簡化和隱藏，才不會在手機小小的螢幕塞滿了雜七雜八的視覺訊息。
RWD網頁設計案例：Credo醫療設備RWD公司形象網站設計
在編輯網頁時，後台管理者也要懂RWD響應式網頁嗎？
其實後台編輯的網頁不會自動RWD。不過，透過簡單的rwd css code還是可以讓你的文章內容符合RWD的規範。也因此，設計得太過花俏的網頁，對於日後的編輯維護會有困難。
RWD網頁設計案例：東捷資訊RWD公司形象網站設計
在RWD響應式網頁設計中遇到表格該怎麼處理？
雖然網路上也有許多RWD表格範例可以實現Table表格也支援RWD自適應效果，但其實表格很難在小小的手機中完整呈現。對於太過複雜的表格(例：產品規格)，建議直接做成PDF文件檔，在手機上可點開PDF檔後，用手指滑動放大查看資料。如果是有資料庫的產品列表，則可以寫成網頁程式自動讓它RWD。
RWD網頁設計案例：GoodSky RWD 形象網站設計 (採用PDF下載取代網頁表格)
網頁中的影片要如何讓它也RWD？
在後台編輯時，嵌入youtube影片也是不會自動RWD的，要在網頁原始碼加上RWD樣式碼，才讓影片真正RWD以等比縮放的方式符合視窗寬度。
RWD網頁設計案例：相成機械RWD形象網站設計 (影片RWD)
以上是RWD網頁設計的說明，如果你的網站正在進行網站改版，你需要對網頁設計公司了解未來的網站是否能支援RWD，以及日後網站維護是否也有RWD的相關配套措施。
延伸閱讀：RWD響應式網頁設計有什麼特點？了解它們如何改變網頁設計的面貌
延伸閱讀：客製化網頁、套版網頁有何差異？客製化網頁設計的3大優點
 | Eric Wang 凱士網頁設計公司 專案經理 Eric，擁有設計與理工背景，擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通，樂於分享與討論，長期致力於網頁設計白話文運動。
|
