早期的網頁設計預設對象大多以一般家用電腦或筆記型電腦的瀏覽者為主,所以在製作網頁時會以此規格為預計頁面的大小,然而隨著平板電腦及智慧型手機的普及,傳統的網頁設計方式已無法滿足所有的網頁瀏覽裝置,使用畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時,將會因為頁面寬度過寬而導致瀏覽者在瀏覽頁面時的不便。
因此為了滿足手機瀏覽者的需求,一般在進行網站製作時通常會再另外製作「手機版」的網站,以滿足這些族群的需求,然而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便,但對於花錢進行網站建置的企業來說,將額外增加一個網站建置的成本。
那麼「RWD 響應式網站設計」到底是什麼東西呢?
△不同的裝置會看到最適合呈現的畫面,就是RWD 響應式網站設計的特色
為解決這樣的窘境,現在有越來越多的企業選擇使用「響應式網頁設計(Responsive Web Design)簡稱RWD」的技術來製作網站。 RWD又稱自適應網頁設計、多螢式網頁設計或回應式網頁設計,簡單來說就是網頁會自己随著瀏覽者的網頁瀏覽裝置解析度的大小,自動變化網頁的寬度及頁面配置, 讓瀏覽者能以最適合閱讀的格式呈現。
RWD網頁原理是使用CSS3以百分比的方式來進行網頁畫面的設計,讓網頁在不同解析度下瀏覽時,能自動改變網頁頁面的佈局排版,因為此技術解決了目前智慧型手機及平板電腦瀏覽網頁的不便,所以RWD網頁設計開發技術已成了新一代的網頁設計趨勢。
簡單來說,我們先把各種不同螢幕尺寸的裝置電腦、平版、手機、電視...等,當成各種不同大小的杯子「容器」,接著我們再把網站的內容、圖片...等元素部份當成準備倒進容器的「液體」;當我們在瀏覽網站時,就像把「液體注入容器」那般,讓液體自已填滿容器的空間,自已完成內容排版配置;如果今天我們所用的容器較小時,多餘的液體 ( 資訊 ) 就不會被倒進這容器,讓我們只瀏覽必要、重要的資訊。
這樣的設計方式,讓網站內容、圖片可隨著裝置的螢幕尺寸改變,以一個網頁來適應所有裝置,讓每個使用者都能得到最佳的瀏覽環境,這就是 RWD 設計的基本思維。