早期的網頁設計，只需要專注在單一尺寸的電腦螢幕上，不但網站的格局安排都採固定式的設計，並且更大量的使用圖片、製作酷炫的 Flash 動畫效果，以達到最佳的視覺設計。這種固定寬度的網頁佈局，在手機或平板上瀏覽時，會造成閱讀上的困難。

隨著上網方式的多元化，現在已經有超過 50% 以上的使用者同時使用「電腦 + 手機」上網，網路流量中超過一半以上都是來自行動流量，其中更有 74% 的移動用戶會離開無響應式的網站。因此網頁內容的安排，就必需同時兼顧 PC、筆電、平板、以及手機的螢幕解析度。

要將一個傳統舊有的網站轉換成響應式網站，可考慮下列三種方式：

一、直接將網站改版成響應式

這是最常使用的方式，也是最符合經濟效益的做法，因為網站的整體功能與內容都已具備，只需要將內容重新規劃整理，然後製作一個響應式網頁的模板加以套用，整個網站就可以改版成響應式。

優點

• 一個網站適用各種裝置
  不論是手機、平板、筆電、PC、甚至電視螢幕，只要一個網站就能滿足各種螢幕解析度的需求。
• 資料維護方便
  因為只有一個網站就可以滿足所有裝置的需求，所以只需要維護一個網站。
• 製作成本相對低廉
  響應式網頁，大多採用「內容管理系統 ( Content Management System，簡稱 CMS )」來製作網頁模板，由於 CMS 的核心程式大多是免費的開源軟體，並且已內含完整的後台管理系統，因此整個網站設計工作只剩下前台的網頁模板，開發成本相對低廉。

缺點

• 整個網頁要「塞」進手機，可能會造成手機開啟網頁的速度較慢，如果網頁設計師的經驗不足，也可能發生跑版的情況。
• 手機沒有滑鼠的裝置，因此許多滑鼠才有的功能 ( 如 Mouse hover )，在手機上也完全不發生作用，甚至會造成使用者在操作上的困擾。

二、製作手機版網頁

對於一些內容過於龐大且複雜的網站，網頁改版不易，這時就可考慮另行製作手機版網頁，只將一些重要的資訊放入手機版網頁中。手機版網頁的製作過程，跟電腦版大致相同，也是以 HTML5 和 CSS3 製作網頁內容，只是網頁的佈局會依據手機的特性限定螢幕尺寸。

優點

完全針對手機特性量身打造，操作介面符合手機使用者的習慣。沒有大型圖檔需要下載，也會加快網頁開啟的速度，減少手機網路的負擔。

缺點

手機版網頁所需的內容，無法和電腦版共用，因此會產生二個網站、二套內容需要維護。

三、開發 App 應用程式

如果網站本身有特殊需求，才需要開發 APP 程式，例如購物網站會針對線上訂購另行開發 APP 程式；飯店旅館業也會針對訂房、訂位系統另行開發 APP 程式。

開發 APP 程式除了成本高之外，還會遇到一個門檻：使用者必需先下載，才能使用。

要將網站改版成響應式，還是另行製作手機版網站 ?

這沒有絕對的答案，完全要視網站的內容與用途而定。但不論哪種方式，最終的目的都一樣：讓使用者有最佳的操作和使用體驗。