GIF動畫帶你秒懂什麼是RWD網站！響應式網頁設計

Responsive Web Design 響應式網頁設計，俗稱為RWD網站，是指工程師透過程式上的設計，讓網站能夠隨著瀏覽者的螢幕大小，自動變換成最適合的內容，給訪客觀看，藉以提升使用者體驗。

還是不懂？來看看RWD的具體行為表現

拖曳視窗大小來觀察RWD

如果你還不懂什麼是RWD，沒關係，這邊馬上用畫面來說明給你看！

拉瀏覽器的寬度大小就是一個很好的測試RWD的方式，從最開始的電腦螢幕大小⋯⋯再到平板電腦大小⋯⋯最後是手機螢幕大小，可以觀察幾個重點：

在不同寬度大小的變化下，網頁的內容會跟著做位移和改變，當畫面不夠大時，「雙欄式」的設計會轉為「單欄式」，上方的選單按鈕，會變為隱藏式，按壓選單鍵才會顯現。

即使是用手機般的大小來觀看RWD網站，網頁上的資訊依然保持清晰易讀，文字保持適當的大小，讓瀏覽者輕易閱讀網頁資訊，不需要用手指去做縮放來進一步瀏覽。

沒有RWD的網站，在手機上的呈現

沒有RWD的網站當你在手機上觀看的時候，會發現他長得跟電腦上一模一樣，但是變得很小，因此必須透過手指放大縮小的方式來進行瀏覽，使用上變得辛苦，使用者體驗非常的不好。

RWD所帶來的好處

更好的使用者體驗

RWD帶來更好的使用者體驗，提升現代大量的手機使用者用手機瀏覽你網站的意願，現代用手機上網的人口早已超越用電腦上網的人口，因此除非你想流失掉超過50%的上網族群⋯⋯否則注重手機上的使用者體驗的RWD已是不可或缺。

RWD vs 手機版網站

智慧手機剛開始普及的早期，RWD觀念還未興盛，企業主那時的解決方案是：額外製作一個手機版的網站，當訪客用「手機」進入到網站時⋯⋯就引導訪客進入手機版網站，桌上電腦則保持進到原本的網站，但缺點是企業主得同時維護兩個網站，因為手機版網站需額外製作，自然也算是另一個額外的網站，不但需要額外的製作成本，連更新資訊時也得兩邊更新。

而RWD的網站則沒有這個困擾，因為RWD是透過程式讓同一個網站，根據不同螢幕大小的訪客自動重新排序，因此企業主不但不需要額外成本去製作另一個網站，更新網站時，也只要保持專注在一個網站上即可，非常的方便。

RWD已成標準化配備的響應式時代

智慧型手機已經全面普及了，而RWD網站也是⋯千萬不要再做沒有RWD功能的網站了，雖然很多網站公司依然會提供客戶選擇要不要RWD功能，造九頑五只幫客戶製做有RWD功能的網站，因為我們認為這已經是不可逆的趨勢，絕對沒有一間廠商是不需要RWD的！也不會因為有RWD功能就收費比較貴，因為我們認為這已經是現代網站的「標準配備。」