RWD響應式網頁設計
最近有許多的客戶常常會詢問什麼是響應式網頁設計呢? 那麼,響應式網頁設計跟一般網站有什麼差異呢?

響應式網頁設計是一種相對較新的網站設計新技術,可確保用戶無論使用何種類型的裝置都能獲得良好的視覺體驗。隨著越來越多不同規格的行動裝置以及電腦版的尺寸,這在過去幾年也開始重視個裝置的視覺效果了。

是不是常常聽到RWD這個詞呢?其實就是響應式網頁設計簡稱(英語:Responsive web design,通常縮寫為RWD)或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。是一種網頁設計的技術做法,該設計可使網站在不同的裝置 對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。

早期開發方式,必須拆開來製作,製作電腦版網站接著再製作手機版。 若是舊式網站的開發,而沒有整個重新製作,就會導致管理者若要更新網頁內容時就必須要更新兩次,尤其是早期網站沒有後台管理系統又委託給不同設計公司作電腦版跟手機版網站時,資料更新就更麻煩了,必須每個版本調整,不小心沒有更新到時,常會引起不必要的客訴,若網站需製作多語系版本,又沒後台,光是想到要改網站內容就會浪費更多不必要的時間。

Responsive Web Design (RWD) 此概念於2010年國外著名網頁設計師Ethan Marcotte所提出。 採用 RWD 設計的網站使用CSS3 Media queries,即一種對 @media 規則的擴充功能,以及串流的基於比例的網格和自適應大小的圖像以適應不同大小的裝置 在2012年後,被推廣為日後網頁設計的趨勢。在網頁中使用CSS,以百分比的方式及彈性的畫面設計去呈現。因此,GOOGLE宣布行動裝置時代的到來(Mobilegeddon)2015年,在其搜索結果算法中通常優先考慮適合移動設備的網站,透過使用響應式設計,讓您的網站針對移動設備進行優化至關重要。

他就像水可以容納在不同容器一樣,在不同的解析度自應下符合各種行動裝置設備寬度,透過百分比自動改變網頁的排版,讓不同的裝置都可以正常瀏覽網頁,提供良好的視覺體驗。 基於以上敘述,許多網站也都開始使用RWD去設計網頁。然而這種設計方式比較複雜,需要較多的時間去撰寫與調整。
您為什麼需要一個RWD網站?
先立即進行Google響應式測試,自我檢測看您的網頁是否符合行動裝置。
測試您的網站
你有綠燈嗎?很棒,您的網站通過了Google響應式測試。您可能已經知道為什麼響應式設計對您的網站用戶很重要。
看到大紅色的X?開始採取針對在線戰略的步驟,其中包括針對移動用戶的優化體驗。請記住,Google和響應式設計的更改目前不會影響平板電腦,但通過響應式網頁設計,您可以在遊戲時領先於遊戲!
1.用手機方式搜尋已經成為主流
目前台灣使用手機上網人口已到達八成以上,而目前至少有六成以上網友有手機消費經驗,也就是說二個人就會有一個以上在網路上消費的可能性,且不包含看到網站後,直接去實體商點購買的人數,由此可見行動商機是非常龐大的,如果沒有使用RWD網頁設計方式架構您的網站,造成手機瀏覽困難,非常有可能因此放棄消費,因此建議商家使用RWD網頁設計方式建置。
2.移動裝置皆可使用RWD
目前市面上各種品牌手機琳瑯滿目,加上平板與筆記型電腦使用率也是逐漸上升,商家各自推出自己的螢幕尺寸,導致目前螢幕尺寸已經無法統一規範,因此傳統網頁設計方式已無法因應目前多螢幕尺寸的需求,因此使用自適應RWD網頁設計方式,可以讓網頁內容隨著螢幕大小,伸縮、變化,隱藏、移動,使用小螢幕的智慧型手機時,也會隨著裝置縮放,而主選單也可透擴隱藏下拉方式展開使用,可適度隱藏較不重要的內容讓瀏覽上可以更簡潔明瞭。
3.開發成本與時間比APP低
許多商家會選擇使用APP來作為手機曝光方式,RWD響應式網頁設計在製作方面相對較於APP來快速與便宜許多,並且APP曝光方式有限,相較於網頁瀏覽方式,受限幅度較大。
4.GOOGLE比較喜歡 RWD 網站
Google在網站管理員的行動版網站指南中做了聲明:
GOOGLE官網公布訊息:https://developers.google.com/webmasters/mobile-sites/
行動裝置相容性測試網址:https://www.google.com/webmasters/tools/mobile-friendly/
行動裝置是您工作上不可或缺的利器,勢必也是未來趨勢。因此,確保使用者透過行動裝置瀏覽您的網站時獲得良好的使用體驗,才是真正的成功之道!
5.節省網站開發費用
早期開發響應式網頁都是以手機板為替代方案,必須透過程式判斷螢幕尺寸來轉向一般網站或是手機版,不過主網站與手機板是屬於不同網域,如果同時使用2個,勢必要花二倍時間與金錢管理維護,如果使用RWD自適應網站則可以避免這種困擾。
RWD網頁設計的缺點
1.內容影響整體閱讀,不適合過於複雜的排版與內容
規劃RWD設計時通常還是會針對手機版而外做規劃,畢竟手機的螢幕寬度有限,比較不適合把所有東西都塞在一個頁面裡呈現。
2.舊瀏覽器⽀援度⽐較差 (不支援IE8 以下的瀏覽器)
規劃RWD設計方式是使用目前最新的HTML5 + CSS3 的技術來撰寫網頁,版本太老舊的瀏覽器並沒有完全支援這些技術,所以瀏覽起來會有破格或是無法點擊頁面的情況發生,網路速度與軟硬體規格技術每天都一直在的進步,因此不久將來問題也就變小了。
3.開發時間較傳統網頁設計需較多時間
RWD網頁是在後續維護比較省時間(因為只要更新一份html),但開發可就不是這麼一回事,在製作過程需要一直比對各載具的相容性(版面、效能),所以開發時間可不是兩個平台就兩倍時間這麼簡單的事情。
您可能有興趣的作品
  • 台北南港展覽館2館網站建置招標案
  • HTML X CSS X Art Concept X RWD
  • 艾訊科技 AXIOMTEK
  • Art Concept X HTML X CSS X System Programing X RWD
  • 科技觀光得塔推進賽
  • HTML X CSS X Art Concept X RWD
  • 中華民國對外貿易發展協會
  • HTML X CSS X Art Concept X RWD
  • 光泉保久乳飲-阿公阿嬤照片選拔活動
  • HTML X CSS X Art Concept X RWD
  • 光泉我的閨蜜情話-發票抽獎及徵選活動
  • HTML X CSS X Art Concept X RWD
  • 光泉KUANG CHUAN-金喜連連
  • HTML X CSS X Art Concept X RWD
  • 光泉KUANG CHUAN-愛配在一起週週抽現金
  • HTML X CSS X Art Concept X RWD
  • 財團法人台灣癌症基金會
  • Art Concept X HTML X CSS
  • 台灣書院 TAIWAN ACDEMY
  • Art Concept X Flash X Motion Design X HTML
  • 台灣中油全球資訊網中英文版網站改版與維運案
  • Art Concept X HTML X CSS
  • 中小企創新法規沙盒案件申請平台
  • HTML X CSS X Art Concept X RWD
  • 臺北流行音樂中心網站改版擴建及維護案
  • HTML X CSS X Art Concept X RWD
  • 東北角響應式網站改版暨維護案
  • HTML X CSS X Art Concept X RWD
  • La Pasta
  • HTML X CSS X Art Concept
  • 臺中市屯區藝文中心整合資訊網站建置計畫案
  • HTML X CSS X Art Concept X RWD
  • 士林電機
  • HTML X CSS X Art Concept X RWD
  • 民視企業官方網站改版提案
  • HTML X CSS X Art Concept X RWD
  • 台北雙年展網站製作案
  • HTML X CSS X Art Concept X RWD
  • 苗栗縣政府文化觀光局標案
  • HTML X CSS X Art Concept X RWD
  • RHYTHM CRUSHER閃靈網站
  • HTML X CSS X Art Concept