人手一機的時代,一成不變的網頁落伍了! RWD響應式網頁帶你走上世界前端
瞬息萬變的網路世界,加上科技的日益發展,全世界越來越多人使用手機來上網。根據研究數位Digital Report調查指出,2021年全球有66%的人使用手機,且網路的使用者有60%。其中從手機上網的族群佔55.7%、電腦則佔41.4%。從以上資訊我們可以歸納出一個結論:全世界喜歡使用手機上網的用戶已佔大多數,且勝過電腦。 此時是否突然想起一個問題,公司網頁是依照電腦尺寸去打造,還是手機尺寸?是否有看過某些網頁,在手機上所呈現的畫面內容是需要動動手指,把畫面往左往右滑、放大縮小來閱讀,甚至畫面被卡一半,找不到內容資訊。而有些網站頁面不管在手機或是電腦的畫面,都是完整完好的呈現。這之間的差別,就在於有沒有使用RWD響應式網頁。 什麼是RWD響應式網頁 響應式網頁Responsive Web Design,簡稱RWD,又稱回應式網頁,是一項透過CSS3+JQuery網頁技術,讓「一個網頁」的圖文資訊內容,能夠以最佳畫面呈現在「多種尺寸、解析度的螢幕」。一般來說,手機裝置尺寸:320px ~ 720px、平板置尺寸在720px ~ 1024px、電腦裝置尺寸在1024px左右。一個響應式網頁設計會依據使用者的裝置設備(電腦、手機或平板),來適應、符合該裝置的格式來顯示網頁的內容。 RWD響應式網頁的好在於它百搭!一頁解決多種裝置顯示問題! 簡單來說,響應式網頁猶如基本款白上衣,搭上牛仔褲會有自然風;配上西裝外套表現利落都會風;穿上運動褲又會有休閒風。白上衣與各樣式衣服都能搭配,任何風格都能駕馭;這樣的效果就是響應式網頁的特點,不管消費者是使用手機或是電腦,響應式網頁都能符合相對應的格式。 以視覺方面來說,對於公司品牌來說,能夠完美、完整呈現資訊內容,提供最佳的視覺畫面,當然是做網站的宗旨。對於消費者來說,更是喜歡用最便利、最輕鬆的方式閱覽網頁。統計調查,網路使用者上網時間大約7小時,在長時間觀看螢幕之下,更傾向選擇能讓閱讀上舒服的網頁。 在Google的幫助中心中就有提到關於RWD響應式網頁的一些規則: 為什麼要使用回應式設計 我們建議使用回應式網頁設計的原因如下: 使用者可以使用單一網址,以更輕鬆的方式分享及連結到您的內容。 可協助 Google 的演算法為網頁正確指定索引編列屬性,不需要發送訊息指明既有的相對應桌面版/行動版網頁。 無需維護多個內容相同的網頁,減少工程