何謂RWD自適應式網頁設計?

自適應式網頁設計的主要技術

RWD 自適應式網頁設計的主要核心技術即是透過 Html5＋CSS3 中的 media queries，根據不同類型的媒體條件設置相對應的樣式表，讓網頁內容可以自動依照使用者的瀏覽裝置大小而自動調整，讓使用者能自在的閱讀網頁。

自適應式網頁設計的優點

貼近行動裝置使用者

隨著行動裝置使用及行動上網普及，過時的老舊網頁已無法符合行動裝置的瀏覽顯示，降低了行動用戶上網瀏覽網站的意願；自適應式網頁設計的最大目的，就是讓不同行動裝置的用戶在瀏覽網頁上，都能得到最佳的顯示效果，抓住行動用戶的目光。

開發成本、時間及維護比APP低

為適應各行動裝置，APP 必須開發 iOS 版及Android 版，單一個版本的開發費用就需數十萬元起跳，從開發到審核上架花費的時間相當長。完成後，更要不定期針對新版本作測試及更新，才能運作順暢，且一旦更新，又須重新審核上架，這是永不結束的輪迴。

網站只有一個URL利於分享

不論 APP 或手機版分享網址，若偵測到是手機開啟，分享的網址通常是手機版網址，若使用電腦開啟，不見得會轉回電腦版；自適應式網頁無論是使用手機或電腦，分享出的都是同一網址與內容，不分散社群分享數，更增加流量及停留時間，以提高搜尋排名。

增加搜尋引擎曝光度

隨著行動上網族群的增加，搜尋引擎也早已優化了搜尋功能，提供最佳的行動上網使用經驗。當客戶使用手機搜尋資訊時，搜尋引擎會優先將響應式網站排名提前，如果您的網站使用的是自適應式網頁技術，網站能見度將會更高，比其他競爭對手更具優勢。

自動調適型網頁設計的缺點

比不上手機版網站

自適應式網頁設計必須考慮不同裝置上的運作，為了讓程式碼適用不同裝置，必須捨棄某些複雜的功能和介面，難免比為了專為手機版而設計的網站來得遜色。

載入速度問題

由於所有裝置共用同一份 HTML 及 CSS，不論是透過電腦、平板或手機上，因為下載的是同一個檔案，都會一併讀取其他裝置設計的內容，難免影響頁面讀取速度。

時間花費

開發自適應式網站是一項耗時的工作，若為了滿足各個裝置瀏覽，需要花大量的時間進行網站的設計及測試。

IE 8以前版本無法正常瀏覽

自適應式網頁設計是使用 CSS3 中的 media queries 來調整版面，但 IE 8 等較舊的瀏覽器並不支援 CSS3，會無法顯示這類型的網頁。

什麼樣的網站適合RWD？

要評估一個網站是否適合 RWD 設計，必須有基本的網站企劃內容，尤其是網站架構圖，透過網站架構圖我們可以清楚了解整個網站的架構有多大、選單數量及層級，進而推算出網站的資訊量多寡，更能準確評估該網站是否適合 RWD 設計模式。
總而言之，選單架構及資訊單純的網站越適合 RWD 設計，沒有過多複雜的操作或看不完的網站內容，但架構龐大的網站並非無法採用 RWD 設計，只是在選單設計上就必須加以用心處理，否則容易因選單分層過多，除了在手機上操作不易，也會導致使用者在網站中迷路，相對地網站資訊量過多，除了會受頻寬影響決定網站開起速度，無法達到響應式網頁設計的理想要求外，也會影響使用者花時間瀏覽網頁的意願，進而造成使用者跳出率的提升。

一般網頁與自動調型網站的設計流程差異

設計流程	RWD 網站	一般網站
接觸 (業務階段)	當客戶指明 RWD 設計，須讓客戶充分瞭解RWD 設計的優缺點	開發與接觸有網站設計需求的客戶
需求 (業務+企劃階段)	除了既有的需求分析之外，必須確認此網站專案是否適合採用 RWD 設計，如不適當，需儘速與客戶溝通，尋找其它方案滿足客戶需求	針對客戶需求製作需求分析，透過需求分析了解網站相關設計及功能，分析完成後，訂定詳細規格表與預期工作天數
規劃 (企劃階段)	除了整理網站相關的資料，需與客戶仔細核對內容企劃資料及確認所有網站細節，降低後續修改風險	整理出網站企劃書（網站架構圖、網站草圖等）以及後端功能清單等等相關資料
設計 (設計階段)	客戶需求外，亦需考量 RWD 網站各元素寬度的彈性，視覺元素處理上越單純，在頁面製作中，越能達到正常流動或縮放。	視覺設計，客戶確認定案視覺設計，轉化成實體網站
上線	RWD 應用主要多於前端設計，對於後端開發引響不大	網站動態語言及後端程式開發

RWD客戶網站實例