品禾全端網路工作室 | RWD響應式設計與客製化PHP程式開發專家

網站知識庫

一篇搞懂RWD響應式網頁設計

一篇搞懂RWD響應式網頁設計

什麼是RWD響應式網頁設計?

根據維基百科的說明,所謂的RWD是指Responsive Web Design,中文翻譯為回應式網頁設計,或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。RWD響應式網頁設計是一種網頁設計技術,這種設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。

所以RWD響應式網頁設計,主要是為了減少使用者在頁面上進行縮放、平移和捲動這類較為複雜的操作行為。因此在手機上的頁面呈現通常都會偏長,主要方便使用者向下捲動即可獲得所需的資訊。

誰需要RWD響應式網頁設計?

目前由Statcounter的統計資料顯示,全球採用手機上網的比例約有55%而桌機有41%。若將地區改成台灣,根據Statcounter的數據顯示,手機上網比例有53%而桌機有41%,也就是說使用手機上網的比例已經大幅超過桌機的比例,換句話說每兩個人上網就有一個是用手機瀏覽,所以不管是哪一個產業,都需要採用RWD響應式網頁設計。

RWD響應式網頁設計的優勢有哪些?

網站採用RWD響應式網頁設計的優勢有很多,以往的網站都採用固定版面來開發,針對不同平台就會有相對應的版本,所以如果網站想要支援桌機與手機,那至少就要兩個版本的網站,如果後台也是分開的那內容維護上就容易出現資訊落差,但如果採用RWD響應式網頁設計,版面就會像水一樣的符合使用者目前使用的載具,也就是說當他用手機觀看網站的時候,網頁就會符合手機的寬度,而當他改用桌機時就會符合桌機的寬度,因此在可以富有彈性的版面上來說,採用RWD響應式網頁設計只需要一個版本的網站,也就是只需要一個內容維護的後台即可,如此一來就不會出現資訊落差的現象。

因為只有一個版本,所以不管來自桌機或手機的流量都會匯集到同一個網址,對於SEO的操作也會比較容易,而搜尋引擎機器人蒐錄的內容也會是同樣的資訊內容、同樣的HTML5語言,所以針對SEO在網頁上做優化的程序也變得容易讓搜尋引擎親睞。

再者如果與手機APP相比,RWD響應式網頁設計的主機成本、維護成本相對來說都比較低,而且使用者不需要下載,只要透過瀏覽器輸入網址或是搜尋相對應的關鍵字即可找到你的網站,後續使用者如果想要分享,其他網友也可以透過分享的網址進入到同一個頁面中,獲得相同的資訊內容,讓你的品牌形象可以完全一致。

RWD響應式網頁設計有缺點嗎?

RWD響應式網頁設計當然有缺點,例如內容的設計會有一定的順序性,靈活度還是會有一定的限制在,無法做到桌機、手機分兩種版本那樣的完全獨立性,所以在頁面設計上就非常考驗視覺設計師的經驗,對於經驗不多的視覺設計師來說,很容易設計出桌機看起來很完美,但手機上卻操作障礙連連的情況,通常有這樣問題的視覺設計師,品禾會建議從手機開始設計起,也就是採用mobile frist的設計模式,如此一來就可以解決從桌機設計時卻忽略手機操作性的問題。

另外為了讓頁面可以像水一樣有彈性,在網頁開發的過程中就需要使用比較新的螢幕單位,這些較新的單位是舊瀏覽器不支援也無法使用的,所以如果要製作RWD響應式網頁設計,建議忽略IE瀏覽器,而且IE瀏覽器目前連微軟都宣布不支援了,各大知名網站也在前幾年都率續宣布不自支援IE瀏覽器,因此採用RWD響應式網頁設計建議以最新版本的瀏覽器為準。現在較新版本的瀏覽器都內建自動更新功能,可以符合最新的網頁語言標準,降低各品牌或各作業系統的瀏覽器差異。

RWD響應式網頁設計最需要注意的部分是哪些?

在開發或維護RWD響應式網頁設計,最需要注意的是圖片與影片這類的多媒體素材,因為圖片或影片都有固定尺寸,為了讓頁面可以有彈性,所以這類的多媒體素材多數都會採用百分比作為寬度,所以在比例上的拿捏就顯得非常重要,再者手機上的版面寬度較窄,不建議採用文繞圖的方式(例如左圖右聞或右聞左圖的排列方式)做內容維護,這樣的的維護方式很容易造成版面上的破版。所謂的破版就是頁面的內容超出頁面限制的寬度時,頁面會出現橫向捲軸,造成使用者在手機上需要平移才能瀏覽網頁,像這樣造成版面出現瀏覽問的狀況時我們就稱呼為破版。

除了破版的狀況之外,還有網路速度問題,桌機版本通常使用的圖片檔案較大,若沒有針對各種平台上做圖片壓縮,很容易在手機上下載桌機檔案較大的版本,加上行動網路速度不穩定,很容易造成網路過慢、lag,導致頁面開啟超過3秒還無法瀏覽頁面內容,而當頁面開啟速度超過3秒,使用者就會傾向離開頁面,造成瀏覽率下降的情況,所以針對各種平台做多媒體的素材處理還是很重要的一件事。

如果是影音類的素材,建議放置在Youtube上,一來是可以減少主機流量的消耗,二來是Youtube本身會針對使用者的網路狀況判斷該給予下載的影片檔案,可以優化使用者在影片上瀏覽的狀況,而且如果用手機瀏覽影片,目前預設都會開啟Youtbue APP,可以跟使用者的Google帳號做一個整合,後續如果要做廣告投遞,不管是SEM或再行銷,都是非常有幫助的。

顧問級RWD響應式網頁設計服務

RWD響應式網頁設計從2011年開始發布,而品禾也從2013年開始在台灣協助推廣RWD響應式網頁設計,除了出版RWD響應式網頁設計書籍以外,也與Yotta合作開設線上RWD響應式網頁設計課程,對於RWD響應式網頁設計的開發經驗更是從形象官網到電商領域皆有,透過我們扎實的經驗可以協助你在網站改版的過程中,無痛導入RWD響應式網頁設計。

品禾團隊成員最少擁有6年以上RWD響應式網頁設計開發經驗,也曾任國發會全台巡迴講師、參與資策會人才培育並協助多家企業導入RWD響應式網頁設計模式,如果您對RWD響應式網頁設計有任何的需求或疑問,非常歡迎與我們聯繫

分享到facebook