何謂「嚮應式網站」?

a pen writing on paper
香港八方編輯

「嚮應式網站設計」(Responsive Web Design)是經常被提及的一個名詞。實際上它指的是什麼?

先談一談為什麼要有「嚮應式網站設計」。在智能手機初出現的時候,用手機上網常感不方便,因為多數網站還未跟上,網頁就像把整個桌面電腦塞了進去手機一樣,頁面縮得很小,必須用手指放大畫面,再移左移右才可看到當中的文字和內容。

在一段過渡時間內,有些網頁會曾做兩個版本,一個桌面版,一個手機版。但後來,電子裝置的大小尺寸越出越多,有不同大小的電話,也有平板電腦等,兩個版本根本不足以滿足要求。

而且,有兩個版本,等於各種工作都要做雙份。不論是改內容,還是做維護,都要做兩個版本。不化算啊!

在這背景下,「嚮應式網站設計」的出現和盛行,似乎是必然的了。現在它已成為了做網業的標準模式。

所謂「嚮應式」,就是它會因應使用者的屏幕大小,來決定頁面的編排。例如大屏幕上橫排的三張圖片,到了手機屏幕可變成直排;又如大屏幕上大大張的橫向圖片,到了手機變成直圖⋯⋯

嚮應式網站設計的特點

  • 字體的可讀性:不論屏幕大小,字體大小和行距都始終是適宜閱讀的。
  • 網站導航的適應性:大屏幕上的網站選單,到了小屏幕可能變成「漢堡式」按鈕選單。
  • 媒體的彈性:圖片或媒體檔案,是橫是直,可以按屏幕大小而決定。
  • 流動式佈局:排列的方向、次序,都可以因應屏幕大小而變動。
  • 一個版本,方面管理:不論網頁的頁面有多少變化,它始終是同一個頁面,方便管理和維護。

但這也令網頁的設計工作變得較為複雜,並且增加了測試和除錯的時間和難度。