網頁設計小知識:什麼是RWD 響應式網頁設計?
在2007年第一代的IPHONE由賈伯斯發表之後,行動裝置的普及率在接下來的二、三年當中大爆發,這個跨世代的發明不僅僅是硬體上的大躍進,也改變了人類在日常生活當中許多的使用習慣。
以往查資料、做報告、玩遊戲都是坐在座位上敲打著鍵盤,眼睛對著螢幕,在行動裝置普及的今日人手一機,不論是坐車,走路、上廁所無時無刻的都在網路上進行活動,舊時代的網頁設計方式顯然已不符合現在行動裝置網頁設計的需求了,於是在2010年5月國外著名網頁設計師Ethan Marcotte提出了響應式網頁設計(英語:Responsive web design,通常縮寫為RWD)的概念,採用RWD網頁設計的網站是使用了CSS3規範中的media queries語法來為不同尺寸的載具定義了呈現樣式,也因此使得網頁可以在各種尺寸的載具中如桌機、平板、行動電話等呈現符合尺寸的畫面。
使用RWD網頁設計的網頁有哪些優缺點呢?
優點
維護方便
當頁面有修改時或是經由管理介面維護資料時只需進行一次的操作。
符合各種載具
不論是大尺寸螢幕或是小小的手機分可呈現符合的樣式
提升網頁排名
Google在2018年3月開始 mobile-first indexing行動網頁優先並不代表僅限於行動設備哦,在google的排名索引當中仍然是只有一個索引,所以不論是行動版網頁或是桌機版網頁都是以行動版網頁的排名為基準哦。
缺點
製作成本較高
雖然省去了製作手機版網頁的費用,不過為了符合各種尺寸的載具因此也比單製作電腦板的網頁來的秏費時間及人力
舊的瀏覽器不支援
雖然目前IE已演進到EDGE,不過有少數的企業內部為了配合內部軟體的使用因此還停留在舊的IE版本,在舊的瀏覽器上是無法支援由HTML5+CSS3建構成的RWD網站
參考資料:維基百科