人人都在說RWD網頁設計，到底什麼是響應式網頁RWD ？

隨著智慧型手機的普及網頁技術近幾年來也開始重視手機上的視覺效果了，因此這一項於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)，在2012年後被公認為是日後網頁設計開發的技術趨勢。

RWD (Responsive web design)響應式網站，顧名思義是一種網頁設計的技術做法，透過此方法設計可使網站在不同的裝置（電腦或手機平板等），因應不同解析度瀏覽。自從有了智慧手機之後，除了工作以外，您已經有多久沒打開您的電腦了?使用者習慣大幅度改變的這個現象不只出現在台灣，而是全球皆如此。透過電腦瀏覽網站的人數正在銳減，取而代之的是手持裝置的瀏覽普及，而RWD響應式網站能在在不同的解析度下改變網頁面版的佈局排版，只要做一個版本的設計就能通吃所有大小的螢幕，讓網頁適應不同大小的解析度自動調整排版，提供最佳的視覺體驗。

傳統網站 VS 響應式網站RWD

傳統網站對於行動裝置預覽的解決方案為在電腦版網站外，另外再設置手機板或平板用的網站，也就是說要寫三個不同的HTML5網頁，這樣就會有三個網址+三個網頁內容，大大的增加了維護更新的時間與成本，也會對於SEO收尋排名不利。

而響應式網站(RWD)會自動偵測使用者上網的裝置尺寸，能針對不同螢幕的大小自動調整網頁圖文內容，讓使用者在用手機瀏覽您的網站時，不用一直忙著縮小放大拖曳，給使用者最佳瀏覽畫面。也讓程式設計師不用再設計三種不同裝置的網址、內容，讓更新與維護更加容易，也有利SEO收尋排名。

RWD網站的優點

隨著行動裝置的普及化，台灣使用手機上網人口已到達八成以上，網頁設計也逐漸發展出一種全新的排版技術RWD (Responsive Web Design)，與一般傳統的網頁設計來比較，它具有以下優點：

1.支援任何裝置

這是 RWD 最大的優點，也是它的最重要目的。智慧型手機螢幕尺寸愈來愈大，規格愈來愈多，透過 RWD 可以從此不用擔心不同螢幕尺寸所帶來的各種問題，如果沒有使用RWD網頁設計方式架構您的網站，造成手機瀏覽困難，非常有可能因此放棄消費，因此現在網站幾乎使用RWD網頁設計方式建置。

2.方便網頁閱讀

如果網頁設計時以RWD方式製做，用戶不管是用任何螢幕尺寸來觀看，都是以最適合的方式顯示，不論您的網站是透過桌上型電腦來觀看，或者是用智慧型手機、平板電腦來瀏覽，RWD 已經把所有的網站內容自動重新編排過，所以使用者不會再看到密密麻麻的字，更不需要用手指來把畫面放大，就能輕鬆順暢的瀏覽您的網站內容。

3.降低開發成本

以往為了製作手機版網頁，網頁設計公司還必須幫您另外開發一個手機專用的網站版本或者設計APP，但這樣一個網站有兩個版本，自然就會增加開發費用與維護成本，而且APP曝光方式有限，相較於網頁瀏覽方式，受限幅度較大。所以現在大多採用，RWD響應式網頁設計在製作，製作網頁時只需製作一個，也相對比APP來的快速與便宜許多。

4.提升搜尋排名

如果您的行動版網站是獨立版本，具有不同的網址，那麼就很有可能會分散網站在搜尋排名上的力道，因為同樣的內容卻存在著兩個網址，那麼搜尋排名計分也就被分攤掉了。而Google已經在官方文章中發表過，Google比較建議使用RWD網站來處理行動版網站。此規範表示，GOOGLE極力推廣網頁設計以自適應方式製作，對於關鍵字自然搜尋排序也有加分的。

實際應用

現在網頁大多是採用RWD響應式網頁設計，使用HTML5 + CSS3 動態網頁設計，結合最新Javascript及jQuery技術保留完美動態效果。加上PHP、Myaql輕鬆更新網站資訊，設計出一套像ArkBeez方舟手揪的簡潔風美學網站。

  ArkBeez方舟手揪網站連結:  https://arkbeez.com/