什麼是響應式網站?
RWD網站就像是水 (Fluid Layout),而電腦、手機等裝置螢幕就是容器,水可以裝在各種容器裡,水也能自行去適應容器的大小尺寸
原圖文出處:http://www.netblade.co.in/blog/responsive-web-design-from-future-standpoint/
原圖文出處:http://www.netblade.co.in/blog/responsive-web-design-from-future-standpoint/
RWD響應式網頁就像水一樣,可以讓網頁裝在多種容器裡面
「響應式網站」這名稱聽起來有點抝口,他的英文是「Responsive Web Design」簡稱「RWD」,中文又稱自適應、適應性或響應式網頁設計,會有這麼多不同的中文名稱,是因為Responsive Web Design是因應智慧型手機及平板而大量運用的優勢技術,國外已經非常習慣用RWD技術設計網站。在2015年開始,我們也開始陸續接到客戶主動來電告知要製作RWD網站的需求,看來RWD的魅力終於要在台灣生根了。
響應式網頁是要「響應」什麼呢?簡單來說,響應式網頁設計就是透過CSS3+JQuery網頁技術,讓手機、平板、電腦網站使用同一網站的圖文內容及資料庫,在不同尺寸或解析度的設備或螢幕上,網頁程式會根據使用者的裝置,以符合版面大小的樣式來顯示網頁的內容。更簡單地說,RWd網站技術讓你可以只花一個網站的費用,讓電腦、手機、平板都可以正常瀏覽同一個網站,再也不需要用手指在面板上放大、縮小。
以愛貝斯的網站為例,若您是使用電腦瀏覽網頁,您看到的畫面如下:
▼螢幕解析度寬度在1024像素以上的畫面,可以呈現網站完整資訊
如果您用的是iPad,橫放跟直放會稍有不同變化:
▲螢幕解析度在768像素以下,原先的4張banner會自動縮成1排,單元改成下拉式選單
如果您用的是手機,則原本左右編排的版型都會變成直條狀,以便手機閱讀。
螢幕解析度寬度在400像素以下
所以不管螢幕解析度變化如何,響應式網站都可以很靈活呈現,同時也讓使用者在瀏覽網站時減少縮放、移動動作。
為什麼要做響應式網頁 Responsive Web Design?
因為越來越多人要用手機、平板瀏覽網頁。行動上網的比例越來越高,這個現象不只出現在台灣,而是全球皆如此。 而以目前主流裝置的解析度來看,就有8種尺寸範圍,因此要讓每種裝置都能順暢瀏覽,不只考驗工程師的功力,也非常考驗前端網頁設計的視覺美感,與後端多螢測試的耐性。
以上圖片來源:Today Show
Instagram / Todayshow ‘05及’13年梵蒂岡教宗發表演說的畫面比較
配合全球使用者習慣,就是RWD網站最大的優點!