什麼是響應式網頁設計？

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計，這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的體驗，是個移動平台的用戶大量增加而想出的一個對應方法。

移動裝置普及的支持

隨著行動上網的普及，越來越多的人使用手機上網。行動裝置的使用率以及黏著度已經超越桌上設備，成為我們日常生活中最常接觸的3C用品。於是網頁設計產業面對了一個難題，如何才能在不同大小的行動設備上，完美的呈現網頁的內容呢？於是創造了一種網頁設計的技術做法，可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。

移動優先，新網站設計的漸進增強特性

說得簡單一些，透過CSS，可以使得網站透過不同大小的螢幕視窗來改變網頁排版的方式，使得各種裝置的使用者，如電腦、平板、手機、電視都能夠得到最佳的視覺效果，由於是由同一個網頁內容轉變，管理者也就不必大費周章的重複更新網頁資訊。

2012年作為搶先導入此技術的一宇橙，實屬領先標竿。一宇橙走在網路潮流之上，拋棄傳統，善用最新 Flat Design(扁平式設計)、HTML5、CSS3、微互動的感官饗宴，使得每一刻都是精采時刻，讓你僅有一個網站、一個後台管理，就能搞定所有裝置平台的瀏覽。

為什麼你應該選擇響應式網站

1. 開發成本與時間比APP低

APP必須開發iOS版及Android版兩個版本，一個版本皆數十萬元起跳，開發時間加上審核上架時間相當長。

2. 不需下載APP就能使用

這不只是響應式網頁的優點，可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到iTunes、Google Play下載，APP若要更新，必須重新審核過後，再通知所有下載用戶更新。反觀自適應網頁與手機網頁，只要管理者更新網站，每次連上網頁都會是最新版本。免費Wi-Fi熱點越來越多、 3G費率持續調降，即使無法離線瀏覽也不再是問題了。

3. 維護成本比APP低

APP完成之後要不定期需針對新版本測試，才能確定APP在新手機上能運作順暢。以目前新手機上市的頻率來看，這是永遠不會結束的測試地獄。手機版網站等於是另一個用在行動裝置的公司網站，相對地，企業必須花2筆網站維護成本。

4. 可同時適用不同裝置

APP必須開發iOS版及Android版兩個版本。

手機版網站則需要搭配電腦版網站，才能符合多數裝置規格。同時還要安裝偵測使用裝置的小程式，才能讓手機讀電腦版網址會開手機版網頁、 電腦讀手機版網址會讀電腦版網頁…這一串繞口令其實也代表了目前電腦+手機版雙網站介面的內容分享問題，設計自適應網站就完全不會有這個問題。

5. 品牌形象一致

同一個網站適用於各種裝置，自然不需要針對不同版本設計不同視覺效果。

6. 符合使用者習慣

行動裝置的搜尋功能仍是以「搜尋網頁」為主，舉例來說，有人用手機搜尋「飯店」2字時，只會搜尋各家飯店的網頁， 不會搜尋飯店開發或帶有飯店名稱的APP。開發出來的APP必須再花一筆行銷費用大力宣傳，讓使用者知道有這個APP，還要能引起興趣下載、使用。

7. 利於SEO(Google喜歡)

在SEO這一方面除了大勝app外，而相較於獨立網址的手機版網站，自適應網頁可以避免重覆的內容、保持網頁原本的連結，因此自適應網頁設計的原理與使用習慣都有利於於SEO(搜尋引擎最佳化) 詳見《自適應網站設計對SEO有什麼好處?》

自適應(響應式)網頁設計當然也不是無敵的，它的缺點有：

1. IE8以下不支援 嗯…還有人在用IE8嗎？Gmail、Youtube、Facebook…等大網站也不支援IE8囉。 2. 小螢幕尺寸不適合複雜的功能或介面

如果你打定主意要用很複雜的功能，如拍照、定時喚醒、購物…等，只能砸錢開發APP。

如果電腦版必須維持很複雜的介面，手機版則必須大量縮減內容，兩個版本架構不同且差異相當大的話，另外做手機版網站是比較適合的。

3. 載入速度問題

使用同一份HTML及CSS，所以不論在手機上或電腦上，下載的是同一個網站，下載速度也是一樣的，只是網頁偵測到是手機裝置時會隱藏部份元素，事實上載入速度並不會變快。但一宇橙專業前端工程師將會替你維持高效能載入的把關。

需針對手機使用者習慣調整

手機使用者與電腦使用者的網頁瀏覽習慣是完全不同的，要能符合2邊的使用習慣，必須下很大的功夫規劃瀏覽動線。

結論

明眼人一眼就看出大部份的缺點其實是網站公司的功力問題，網站規劃不恰當、功課做的不夠、技術與經驗不純熟、 還是用舊思維設計網頁的網站設計人員，才會讓設計出來的自適應網站產生這些問題。 因此在選擇自適應網頁設計公司時，還是得仔細評估，從網站作品下決定。