舊網站如何轉換成響應式 ?

舊網站如何轉換成響應式 ?

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

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

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

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

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

優點:

1. 一個網站適用各種裝置

不論是手機、平板、筆電、PC、甚至電視螢幕,只要一個網站就能滿足各種螢幕解析度的需求。

2. 資料維護方便

因為只有一個網站就可以滿足所有裝置的需求,所以只需要維護一個網站。

3. 製作成本相對低廉

響應式網頁,大多採用「內容管理系統 ( Content Management System,簡稱CMS )」來製作網頁模板,由於 CMS 的核心程式大多是免費的開源軟體,並且已內含完整的後台管理系統,因此整個網站設計工作只剩下前台的網頁模板,開發成本相對低廉。

缺點:

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

二、另外製作手機版網頁

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

優點:

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

缺點:

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

三、開發 App 應用程式

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

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

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

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

「舊網站如何轉換成響應式 ?」 有 1 則留言

  1. 徐新榮 2017-11-1122:32:45

    我們想將上列網站改版成響應式網站,可請提供報價謝謝!!

我要留言

* 為必填欄位

  • 5 + 6 =