廣義的 Responsive Design

Responsive 就字面上的意思來看是指「有反應的」，而 Responsive Design 即是指「有反應的設計」。先前本站介紹過的相關文章中，將 Responsive Web Design 譯成「自適應網頁設計」，一直到現在都覺得這樣的譯法怪怪的，原因是「自適應」字面上感覺是針對「顯示設備」的解析度，自我適應其解析度，讓網頁呈現適當的版面樣式。但就現在看來，不免有點太過狹義。

這樣的譯法挶限了 responsive 的意涵，如果是比較本質性的討論什麼是「有反應」的網頁設計，就會發現「速度」是一個主要的關鍵。廣義的討論什麼是 Responsive Web Design，可以先看看GitHub的設計總監 Kyle去年發表的這篇簡報：http://warpspire.com/talks/responsive/。

如此就不難發現為何node.js這類server端的js技術為何在近幾年變得火紅，原因就是「非同步」帶給使用者「感覺比較快」(feels faster) 的體驗，而不像PHP這類技術，一遇到問題就容易卡住，變得「沒反應」。

除了速度還有URL的設計，這裡kyle提到HTML5 History API。History API是可以讓開發者自訂網頁「瀏覽歷程」的API。在無法自訂「瀏覽歷程」的情況下，使用javascirpt進行非同步資料存取時，使用者感覺好像進行了很多頁面的操作，但URL本身不會改變，這時若使用者按了「上一頁」，通常就會破壞他心中建立的歷程模型了。其實，不只是「上一頁」或「下一頁」的問題，還有重讀以及分享網址的問題，都會影響使用經驗。

不過其實國外很多文章都把 responsive design 當成「自適應」的意義來使用了，因此狹義的用法也已被大眾接受，甚至出現專有名詞的感覺。不過思考一下原來的字義，會發現「有反應」的設計思考比起「自適應」的部份來得更加多元及有趣。

標籤：responsive design, 網站設計

分類：學習資源, 網站設計

本文作者是Audi Lu