RWD響應式網頁設計 優/缺點 限制

「RWD響應式網站設計」近幾年已成為網站開發的熱門技術,
雖然它解決許傳統網站在多尺寸螢幕相容問題,
但它也有著一些你不可不知缺點存在,
為幫助大家能更進一步掌握RWD技術,以下我們來討論它的優點及缺點。

RWD響應式
網頁設計

適用所有螢幕尺寸、裝置
採用「CSS3」的 media queries (媒體查詢) 技術,面對不同螢幕尺寸能自動調整網頁版面寬度、操作介面、內容排版、圖片大小...等,電腦、平版、手機、電視...都能順利瀏覽,且不用為某個裝置另外製作網站,僅用一個網站、一個URL(網址)就能解決螢幕尺寸問題,就算未來有更大或更小螢幕尺寸的的裝置,也不用擔心無法順利瀏覽網頁的問題。
降低網站開發成本
以往傳統網站開發為了給使用者最佳的瀏覽環境,會開發電腦版及手機版網站,但這在製作上等於一個網站要做二次;而RWD只需製作一個網站即可,有效的降低網站的開發成本。
利於SEO(搜尋最佳化)經營
「One Web & One URL」概念下,一個網站使用同一個網址,不會因為電腦版、手機版多個網址來分散SEO成效,Google也在「行動版網站搜尋引擎最佳化設定」指南中建議使用RWD技術來開發網站,有此可見「RWD響應式網頁設計」利於SEO,讓網站能取得更好的排名。
利於分享網頁
當使用者分享網站文章時,常常因為另一個使用者開啟網址的裝置不同,而得不到好得瀏覽效果,有時還會因為網站的裝置判斷而導進首頁,而無法順利觀看到文章,文章的按讚數、流量分析也容易被分散;RWD只有一個頁面,分享出去的網址也只這一個,就不會有這些問題產生。
網站營運維護
在沒有後台管理系統前題下,靜態網頁頁面的更新維護需要電腦版、手機版各做一次,不僅麻煩且容易出錯,RWD則只需更新一次即可,不會有不同步的問題。

RWD響應式
網頁設計

手機尺寸不適合複雜的功能或介面
這是所有小尺寸螢幕共同的缺點,礙於螢幕空間有限、行動裝置只有觸碰功能…先天限制,因此較不易將RWD拿來開發某些適用於「桌機或筆電」的網頁功能(例如拖曳、按右鍵、連點2下…等);但如果僅部份系統、頁面有此需求,可考慮放棄小螢幕尺寸,或改用「電腦版+手機版」的設計模式,將不同瀏覽者族群分開使用個別的網站。
網站載入時間較長
比較起純手機版網站,因RWD載入的內容是完整電腦版的網站,在手機瀏覽時是將多餘的內容資訊給隱藏起來,因此網站載入所花費時間較為長,手機使用者感覺更是明顯;但這問題在開發人員努力優化下,及行動裝置、網站速度進步下,相信這問題已慢慢被解決。
開發工時較久
RWD網站在開發上需對多種尺寸裝置進行調校,且要以一網站來呈現,所花費的時間自然比起傳統網站來的長;但比起開發多種版面網站,整體開發時程還是快許多。
瀏覽器相容
RWD採HTML5架構,因此有些較舊的瀏覽器可能不能相容,會出現與設計不同或破版問題;不過這問題隨著微軟放棄IE10以下版本而得到了解放,現在多數的瀏覽器都已支援HTML5,如有不相容問題出現,可以建議使用者升級、更新瀏覽器。