甚麼是響應式網頁設計? 響應式網頁設計有甚麼好處?

本文參考來自專業UI/UX設計平台 InVision旗下網站 Inside Design的博客文章 (Fanguy 2018)，介紹甚麼是響應式網頁設計及其好處，並解釋為何RWD是必要的。

好耐好耐以前，大家仍只是用桌面電腦或者手提電腦睇網頁，做網頁設計係好容易既，因為顯示器 (Mon)大約都係16:9或者4:3既比例，但今日已經係Smartphone既年代，人人一部智能手機在手，網頁就要進化，令手機都可以正常睇到網頁。曾幾何時，網頁設計專家有個一次大辯論：應該是分桌面版和手機版網頁(兩個獨立網站，例如www.rthk.hk和m.rthk.hk)，還是能適應不同裝置的網頁。由於獨立手機版網頁常有內容不足的問題，最終勝出既係響應性網站。

延伸閱讀：2019七個現代網頁設計的趨勢

響應式網頁設計 vs 適應式網頁設計

早於大約十年前，網頁專家就有討論過，究竟網頁設計應該是固定長闊(Fixed layout)，還是按比例縮放(Fluid design)。舉個很簡單的例子，在Fixed layout中，圖片大細有固定象素(Pixel)，如果將瀏覽器放大縮細，圖片大細不變，若在較細既Mon上，就不能完全顯示。Fluid design的好處是可以自動調整大細，無論邊種裝置睇到一定可以全部顯示。兩種方法都有其好壞處，例如Fluid design在特別大既Mon上就會變得走樣，Fixed layout就只能在設計時預設的Mon上正常顯示，其他裝置上就會令用家非常不便。不得不提，時至今日仍然有好多人以為網頁設計等同平面設計，這只適合固定網頁設計，下文亦會解釋到為何平面設計技術並不能應用到網頁設計之上。

多謝Steve Jobs，因應智能手機的冒起，固定的桌面電腦版網站不能應付手機的需求，故此網頁設計師要尋找新方法處理。當中有兩家學派走出來，一是響應式網頁設計 (Responsive Web Design, RWD)，另一種是適應式網頁設計(Adaptive Web Design, AWD)。AWD針對不同的裝置(如桌面、平板和手機)作不同的設計，當用戶使用相關裝置睇網頁時，會偵測到顯示器的尺寸，繼而回應相應的網頁版面。由於尺寸是預設的，所以每個版面都要作獨立設計，好處是所有尺寸經已預設，不用再任何響應式設計，但長遠來說就好似要管理幾個Website一樣，導致各版本的網站隨著時間而難以一致。

響應式網頁設計

另一方面，響應式網頁設計 (RWD)不會像AWD般完全控制版面設計，RWD是應用了Fluid Layout的原理，無論在甚麼裝置上都會根據一定的比例去顯示網頁元素。這種方法的好處是能夠大幅減低網頁開發的時間和成本，日後亦只需管理一個版本的網站，令網站維護成本較AWD平好多。網頁程式員在編寫Responsive網站時使用了CSS Media queries技術，響應各種尺碼的裝置，令到網頁在不同的手機、平板以至桌面電腦上顯示時都能正確無誤

RWD會自動將內容恰當地放在瀏覽器上，背後要講究一定的視覺框架。pnetform有時都會遇到很多客人，查詢可否由客人設計網頁，再由pnetform開發，可是一打開設計圖，其實就是一些好似PowerPoint的海報設計，完全漠視RWD的視覺架構 (Visual hierarchy)要求，一個很簡單的比喻，建築圖則是需要考慮物理力學及建築架構的，如果只有一張建築物平面視覺圖，建築公司是不能起樓的呀。完成RWD後，還得進行多番的測試，在不同的手機、平板和桌面電腦上睇睇網頁。RWD對所有網頁設計師來講都充滿挑戰性，往往要考慮N個情況，但最終仍是值得的。

RWD是大勢所趨

為甚麼選擇響應式網頁設計? 首先係令到讀者更方便，無論使用任何裝置都能正確閱讀，AWD網站可能令部份讀者看少一些資訊內容，而且亦不保證所有閱讀工具都能正常顯示。另外，RWD網頁的下載速度比較快，響應式網頁的程式有對應的結構，例如手機版就只會下載相應的JavaScript和CSS，圖片都會是File size較細的手機版本。最重要的是RWD支援未來的裝置，由於RWD原理係響應不同的Device size，所以即使有新款的三星或蘋果iPhone，RWD都可正確無誤地顯示網頁，不會受尺寸影響。

(順帶一提，本文的參考來源InVision正是一個支援RWD的UI/UX平台，香港網頁設計公司pnetform Technology亦使用InVision為客戶設計響應式網站).

總結

講左這麼多，應該都明白甚麼是響應式網頁設計，為甚麼響應式網頁設計是最好的選擇。原因就是用戶體驗 (User experience, UX)、開發及維護成本，以及支援未來的裝置。就連Google也說：為什麼要使用回應式設計

如欲了解更多網頁設計收費及詳情，歡迎聯絡香港網頁設計公司pnetform Technology。