跳至主要內容區
:::

舊網站如何轉換成響應式 ?- 響應式網頁設計

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

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

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

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

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

優點

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

缺點

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

二、製作手機版網頁

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

優點

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

缺點

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

三、開發 App 應用程式

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

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

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

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

Top
改變字體大小
調整背景顏色