設計令內容更清晰，設計師使用顏色、排版、層次、對比和他所擁有的工具，來將混亂無序的資料化成易用易看的東西。正如生命一樣，設計可在對抗宇宙的熵上取得小勝，在混亂的原料中創造秩序。
凱爾書是本在1200年前制作的美麗手抄本，與其說它是藝術品，不如說是件設計精品。這書的目的是為傳基督宗教的福音訊息，通過插圖和書法，在吸引人的背景下，使人賞心地接收這訊息。
設計在約束環境下運作，哥倫比亞僧人製作凱爾書，在牛皮製成的卷紙上使用四色墨，料物很簡單也很明確，修士設計師了解墨水的顏色、卷紙的重量，更重要的是每頁的尺寸。
印刷與革命
物料與製作過程在過去千多年變化與演進著，古滕堡發明的活字印刷是生產技術上的革命，製作第二本凱爾書需要同樣長的時間，但製作多本古滕堡聖經所需人手則少得多。即使如此，泥金裝飾手抄本時的一些設計模式如字首、欄位等等仍照被移植，基本設計過程仍然是：得知頁的長闊尺寸，編排各元素使之悅目。
印刷設計師的技術在20世紀隨著瑞士風格達到高峰，在設計師如約瑟夫·米勒-布羅克曼(Josef Müller‐Brockmann)和揚·奇肖爾德(Jan Tschichold)的作品裏充分體現當中的結構排版與清晰字型運用，他們制定網格系統和字型規模，依循著上個世界的設計。
知道頁面尺寸比例，設計師可以最有效方式擺放元素。在一頁紙的約束環境裏，網格系統是引入秩序之法。
將你的才能帶到網頁
網頁在1990年代開始佂服世界，設計師由紙張移師到像素。大衞‧席格的《Creating Killer Websites》來得正合時，聰明使用 TABLE 與 GIF 的黑技讓設計師可以重現在印刷頁面上的相同排版。
那些 TABLE 排版後來變成 CSS 排版，但當中基本思維沒變：瀏覽器視窗─就像之前的頁面─是約束環境，設計師在當中加入秩序。
但這個方法有問題，一張紙或一捲皮有固定比例，瀏覽器視窗卻可是大小不一，設計師無從事先得知任何一個人使用的瀏覽器視窗的大小。
設計師慣了知道他們要設計在甚麼大小的長方格上，而網頁卻移除此限。
若非固定，就別搞了 (1)
沒有甚麼比未知更令人恐懼了，前美國國防部長唐納德·倫斯斐(Donald Rumsfeld)所言應該更可怕(雖然當時一般認為這聽起來像廢話)：
有些東西是「已知的已知」，也就是我們知道我們知道的，有些東西是「已知的未知」，是我們知道我們不知道的，有些東西卻是「不知之不知」，我們不知道我們不知道。
瀏覽器視窗比例正是網絡上的不知之不知，最簡單的應對之法是使用彈性單位排版：用比率，而非像素。但設計師卻假裝視窗大小是已知的已知，只為某一視窗大小做固定闊度的排版。
網頁的早期，大多數人使用640像素大小的螢幕，網頁設計師就設計640像素闊的排版，然後更多人使用800像素闊的螢幕，就更多設計師轉向800像素闊的排版，一些年後又變成1024了，在某一時間上，設計師就定下使用神奇數字960作為理想闊度。
就像網頁設計社群在產生一個共同幻覺，不去承認瀏覽器視窗的彈性本質，而選擇定在某一理想闊度，而這闊度每幾年就會轉一次。
不是所有人都喜歡這網絡通則。
道不道
在2000年在連雜誌A List Apart發表一篇文章《網頁設計之道》(A Dao of Web Design)，其內容歷時不衰。
文章中，約翰‧阿爾索普(John Allsopp)指出新媒介總以舊媒介的比喻作始，史考特‧麥克勞德（Scott McCloud）在他的書《Understanding Comics》(理解漫畫)中提出相同的要點：
每個新媒介開始時都是模仿舊媒體的，很多早期電影都像舞台劇，很多早期視視都像有圖的收音機或省略版的電影
得知這一點，就不難想像為何網頁設計開始是總是重塑印刷世界裏設計師所熟識的排版方式，約翰如此說：
「殺手級網站」通常為馴網絡之野性，將其如紙張般設限 ─ 網頁的桌上出版
網頁設計得益自多年來印刷設計所積累的知識。馬西莫·維涅里(Massimo Vignelli)的作品反映著瑞士風格，其著名的《設計的準則》(The Vignelli Canon)一開頭表列一些無形因素如紀律、適當性、永恒性、責任等，這些都可應用在網頁設計，也表列一些有形因素，第一個就是紙張大小。
網頁不是印刷品，紙張之限─長與闊─根本不存在，網頁不受任何預定尺寸所限。約翰‧阿爾索普在《網頁設計之道》中促業界對此有所體認：
設計師所知對印刷媒介的控制，也想應用在網頁媒介裏，但這不過是印刷頁所限制的功能。我們應擁抱一個事實，網頁並無此限，並為這彈性而設計。
這呼籲並不受歡迎，設計師留在他們如母體的共識幻想中，當所有人的瀏覽器都有同等闊度。這並不難明，相信一個令人放心的幻覺叫人寬心，尤其當這給你控制的幻覺。
另一叫設計師墨守固定闊度的原因，是因為設計工具鼓勵使用紙媒方式設計網頁。
一屋工具
差工匠愛怨工具，但確實工具的選擇影響著每個工匠。馬歇爾‧麥克魯漢的同事約翰·克金(John Culkin)說：我們打造工具，然後工具打造我們。
網頁設計學初起，並無視覺網頁排版的軟件，設計師湊著用現成的工具。
Adobe Photoshop 原是用來處理圖像、修相片、加瀘鏡、砌圖層等等工作，在九十年代中成為圖象設計師不可或缺的工具，這同一班設計師開始做網頁設計，於是繼續使用他們熟用的工具。
有用過 Photoshop 的都知道當你新增檔案時，你必需為你的工作環境輸入固定的大小值。在你加入第一個象素之前，一個根本的設計決定已定，增強無彈性網頁的共識幻想。
定闊思維不能全怪於 Photoshop，始終它不是用來設計網頁的。終於，有設計網頁專用軟件出現，早期例子有 Macromedia 的 Dreamweaver，只可惜它的運作理念是 WYSIWYG: What You See Is What You Get (所見即所得)。
的確，用 Dreamweaver 設計你所見的的確是你所得的，但在網絡上卻沒有保證人人都能見你所得，再一次，這讓網頁設計師誤入控制假像，而非面對所用媒介的所固有不確定性。
對抗工具如 Photoshop 或 Dreamweaver 的內建偏見是可能的，但不容易。我們總以為能控制工具，隨心所欲，但事實是所有軟件都帶有意見，如未來學家吉米斯‧卡西奧(Jamais Cascio)所說「軟件，就如所有科技一樣，都有政治」：
程式碼無可避免地反映創造者的選擇、偏好和渴望
當設計師使用他們的工具建立網站時，難免就會反映工具內建的假設─假設它有能力控制和馴服萬維網這已知的不知。
現實反噬
第廿一世紀頭十年中，網頁設計界由幾個假設支撐：
- 人人都有足夠大的屏幕去看960像素闊的排版
- 人人都有寬頻連接，這免去優化網頁上圖像數量與大小的工作
- 人人都使用新瀏覽器，並已安裝最新插件
仍有少數派網頁設計師央求大家使用彈性排版，包括我。大家都容忍我們，視我們如悲觀論者在街角身穿著寫著「末日近了」的宣傳板般，一個麻煩但無害的旁騖。
當時甚至有設計師提出 Photoshop 未必是網頁的最好工具，而我們應直接在瀏覽器裏使用 CSS 和 HTML 作設計，但被評為太過綁手綁腳。由此可見，Photoshop 自身的約束已被設計師所內化，至使他們安於使用其工具而不見當中缺點。
有關用 Photoshop 還是用瀏覽器做設計的討論大都是學術性質，直至一件事震動了使網頁設計的世界。
困於流動
一個iPod，一個電話，一個互聯網通訊器。一個iPod，一個電話… 懂了嗎？這不是三部個別的裝置，這是一部裝置，我們稱之為：iPhone
說於 2007 年，史提夫·賈伯斯(Steve Jobs)展露了一個流動裝置，它可以用來瀏覽萬維網。
能連上網絡的裝置早於 iPhone 便有，但大都限於顯示一種流動專用的檔案格式 WML，很少裝置能夠顯示 HTML。隨著 iPhone 與其競爭者，手提裝置內建現代瀏覽器，成為網絡的第一等公民。這在網頁設計界引來一番動盪。
整個工業所假設的基礎，現在成為疑問：
- 怎知道人們是用擁有闊螢幕的桌面機，還是窄螢幕的手提？
- 怎知道人們是用家裏的高速寬頻，還是慢速的流動網絡？
- 怎知道某裝置是否支持某技術或插件？
流動裝置的流行使網頁設計師得面對網絡的真實面貌，一個彈性的媒介，充滿未知。
這個真相最初被揭時，最初的回應是分割。不去為現有為桌面優化的網站再構想，而是流動裝置可否被分流到另一單獨網站？這流動貧民窟通常落在「真實」網站的子域上：m.example.com 或 mobile.example.com。
這個分割策略被宣傳為「流動網」，但其實是「流動裝置上看到的網頁」，基於共同幻覺的傳統，網頁設計師將流動和桌面的劃分不單單是裝置，而是完全不同的網站。
決定裝置要去那個子域，需要在瀏覽器加上 user-agent 字串檢查配對上一路增長的所知瀏覽器，保持更新是一場紅后競賽。既易出錯，也蠻隨機。iPhone 是流動裝置，但之後的分類會越來越難。有了平版電腦如 iPad 後，開始不清楚是否該分流到流動網站。或者我們可以再開子域，例如─ t.example.com 或 tablet.example.com，配以新叫法「平版網」，但「電視網」呢？或者「可上網的雪櫃網」呢？
我們是一體的
為不同裝置設置不同網站的方法無法規模化，也違反長久以來的「一網通用」(One Web)想法：
「一網通用」就是在合理範圍下，不論用戶用甚麼樣的裝置，都可取得同樣的資訊和服務
但這不代表為大螢幕所設的網頁排版也得送到螢幕小的裝置上：
然而，這不代表在不同裝置上，相同資料都得使用相同表達
若網頁設計師想忠於一網通用的精神，他們要在任何裝置上，於同一 URL 上提供同樣的核心內容，同時需要為不同螢幕大小而排不同的版。
一個尺寸通用的共同幻想開始破滅，取而代之的是接納網絡多變流動的本質。
正面回應
在2010年四月，做網站的人於 An Event Apart 西雅圖聚首一堂，伊桑.馬科特(Ethan Marcotte)站在講台上，講一個在建築界的有趣學派：響應式設計，其意念是建築本身可以改變與適應當中人們的需求。他解釋，這方法也可以來做網站。
一個月後他將此想法寫成一篇文章《響應式網頁設計》(Responsive Web Design)在 A List Apart 發表，也就是約翰‧阿爾索普在十年前發表《A Dao Of Web Desgin》的同一個網站。伊桑的文章與約翰的早期呼喊有同樣的精神，在文章開始時引了《網頁設計之道》。
兩篇文章同樣擁抱一網通用的想法，只是《網頁設計之道》被當時使用 WYSIWYG 工具的設計師所嫌棄，而《響應式網頁設計》則找到一班想解決流動裝置難題的觀眾。
臨近可能
作家史蒂文·約翰遜(Steven Johnson)記錄過發明和創新的歷史，在他的著作《Where Good Ideas Come From》(好意念何來)，他探討「臨近可能」：
在長久擴展生物圈時間上，每一刻都有一些未能打開的門。在人類文化中，我們常以為突破的想法是時間線上的突然加速，天才比其他人跳前五十年，發明一些被困在現在的人們想不到的東西。但真相是技術(與科學)的進步很少大於臨近的可能性，文化進步的歷史無一例外地，是個一道門走到另一道門的故事，每次只探索宮殿裏的一間房而已。
因此中世紀法國是不可能發明出微波爐，前面有太多需要的步驟─生產、能源、理論─才可跨此一步。Facebook 之存在需要萬維網，其存在又需要互聯網，其存在又需要電腦，如此類推，步步皆依靠前面積累的層次。
在伊桑提出響應式網頁設計之時，數項科技進步都就位了。我寫給伊桑的下一本著作的序中說：
所需科技已備：流動網格(fluid grids)、彈性圖像(flexible images)、媒介查詢(media queries)，伊桑將此納入同一體系，改變我們對網頁設計的想法
- 流動網格，使用比率而非象素早於
TABLE排版時代已可行 - 彈性圖象，理查‧魯特(Richard Rutter)研究發現瀏覽器變得越來越壇長縮放圖象，因此圖象本身尺寸不是限制因素
- 媒介查詢，由於 CSS 的錯誤處理模式，瀏覽器一直在增加功能，其中之一就是 CSS 媒介查詢─可在某指定參數下，例如瀏覽器尺寸，定義指定樣式。
此三層次皆在位，改變的渴望─流動平台的無情掘起─也就位，我們需要一個口號讓事情聯合在一起，也就是伊桑的「響應式網頁設計」。
改變思維
響應式設計的初期實驗主要是將現有桌面向的網頁改造：轉像素為比率，加入媒介查詢為小螢幕去掉網格，但這反應式作法不能提供堅實基礎，幸好有另一個口號包羅了一個更強韌的方法。
回應流動裝置的優勢，路克‧瓦波斯基(Luke Wroblewski)提出「流動優先」的概念：
失去八成螢幕空間迫使你專注，你必需確保留在螢幕的都是對你的客戶和生意最重要的功能，根本沒有空間容納介面碎屑和未必有價值的內容，你必需要知道何為最重要。
若你為內容排優先次序，並使之能顯示在小螢幕的有限空間上，你就有了一個堅實、強韌的基礎，可以在此上建立更大螢幕的設計。
史提芬妮與布萊恩‧列格(Stephanie and Bryan Rieger)總結流動優先為：
你的第一條媒介查詢就是沒有查詢
在此，流動優先其實關於專注於內容與工作的優先次序，而多於流動裝置，它不鼓勵假設。以前網頁設計師誤墮毫無根據的桌面機假設，現在同樣重要地我們要小心避免關於流動裝置的假設。
網頁設計師不再為螢幕大小、頻寬或瀏覽器能力做假設，剩下他們真正可控制的東西：內容。
回響著《網頁設計之道》，馬克‧博爾頓(Mark Boulton)將此法納入歷史背景：
擁抱網絡之流動，設計可面對任何環境的排版系統，只有去除思維方法上的枷鎖，這些都在拖我們後腿。由內容開始設計，而不是由版面入手。
這種以內容開始的思維，截然不同於可追溯到凱爾書的的版面入手方式，要求網頁設計師放棄控制的幻覺，為萬維網建立物料誠實的規範。
放棄控制不意味放棄品質，相反地，承認在設計網頁上的許多未知，設計師能以有韌性彈性的方式建造，忠於其媒介。
德州設計師特倫特‧沃爾頓(Trent Walton)最初對響應式設計持審慎態度，但之後就了解到比起在 Photoshop 做定寬模型，這是更誠實、真確的方法：
我愛響應式的中心思想，即網頁會滿足任何地方，由流動到桌面。
多年來，網頁設計由設計師所主宰，用戶並無選擇，得遷就網站所要求的螢幕大小或連線速度要求。如今網頁設計可以是用戶和設計師之間的對話。如今網頁設計可反映網絡的基本運作原則。
在萬維網的十二周年之時，添．伯納斯－李在一篇寫在《科學美國人》的文章上重伸這些基本原則：
網絡之用處與成長的基本設計原則通用性，應要殘疾人士可用。要適用於任何不管是文件或單點資料的資訊形式，和任何由傻瓜推到學者文章的質素資訊，而且要能被所有硬件經互聯網所存取得到，管它是靜止或流動，螢幕大或小。
譯註
(1): 此句是 If it ain’t broken, don’t fix it 的前後對掉
參考資料
- A Dao of Web Design by John Allsopp
- The Vignelli Canon by Massimo Vignelli
- Openness and the Metaverse Singularity by Jamais Cascio
- One Web by Jo Rabin and Charles McCathieNevile
- Responsive Web Design by Ethan Marcotte
- A Richer Canvas by Mark Boulton
- Fit To Scale by Trent Walton
- Long Live the Web: A Call for Continued Open Standards and Neutrality by Tim Berners‐Lee
本文是《Resilient Web Design》繁體中文翻譯的其中一部份，以該書的相同的姓名標示-相同方式分享 CC 4.0 國際授權。
Originally published at 網絡暴民 Jacky’s Blog.
