文章

強韌網頁設計—第五章:層次

在史都華.布蘭德(Stewart Brand)的經典《How Buildings Learn》(建築如何自我學習)點出一個由由英國建築師法蘭克‧達菲(Frank Duffy)所提出的一個想法:

一楝建築物由許多不同壽命的層次所組成

達菲叫這些層次做剪切層(Shearing layers),每層皆以不同時間尺度而行,布籣德將此概念擴展,提出六個同字頭的層次:

  1. 地點(Site) - 建築物的物理位置,只隨地理時間改變
  2. 結構(Structure) - 建築本身可維持幾個世紀
  3. 外表(Skin) - 每幾十年外牆會翻新或重新上油
  4. 服務(Services) - 水管電線每十幾年需要重舖更新
  5. 空間規劃(Space plan) - 牆與門的的布局可能偶爾會改變
  6. 攞設(Stuff) - 傢俬擺位可能每天改變

剪切層

剪切層的概念可應用於我們所創造的網頁,網域名就是我們建築所在的地理位置,時間尺度的另一端有網頁內容-「擺設」-可以小時、分鐘甚至秒計的時間被新增更新,這中間的層次有結構、表達、行為:HTMLCSS 和 JavaScript。

這些層次可是以鬆散地耦合,但又不完全獨立。就如建築物裏,不能先有傢俬但沒有房間和牆,一張樣式表同樣需要一些標記內容才可有所作用。結構與表觀的耦合通過 CSS 的選擇器來處理:元素選擇器、類選擇器等等。而 JavaScript 則通過 Document Object Model(文件物件模型),或曰 DOM 的詞彙來處理耦合。

在史都華.布蘭德之後的著作《The Clock of the Long Now》(長今之鐘)應用剪切層-或速度層-的想法到文明發展上。最慢的層是大自然,然後是文化、政府、基礎設施,最後最快的是商業與潮流。以鬆散耦合的方式,每一層都依靠下一層。反過來說,每個連續層次的積累容許一個充滿機會的「臨近的可能」。

相似地,CSS 和 JavaScript 的表達力之可能,建基於 HTML,而其本身又需要可接通的 URLURL 依靠 HTTPHTTP 又建立在 TCP/IP 之上。

每一個網絡的剪切層,都可被剝開見到下層。這個過程的相反 - 依次施加層次 - 是設計強韌網頁的關鍵原則。

漸進增強

在2003年,在德洲奧斯汀西南偏南(South by Southwest)節是音樂與電影人的一個大會,今天其音樂與電影的部份已大大被專為數位事物而設的西南偏南互動(South by Southwest Interactive)所蓋過。在2003年,西南偏西互動只是個小活動,迫在奧斯汀會議中心的一角舉行,給小數網頁設計師、部落客聚在一起分享想法。那年,史提芬‧尚佩翁(Steven Champeon)與尼可‧芬克(Nick Finck)發表了名為《Inclusive Web Design For the Future with Progress Enhancement》(為未來的包容性網頁設計使用漸進增強),他們號召大家裝備:

網頁設計必需成熟,接納多年來發展,捨棄在粗野跌盪 dotcom 年代的排斥態度,認知到未來會有的各種裝置與平台,將語意標記內容,從表觀與行為的邏輯分別開來。

就如添.伯納斯-李,史提芬‧尚佩翁曾經使用 SGML,使 HTML 深受影響的標示語言。他需要令到文件可重新定義不同的輸出,看出將表觀由結構分離開來很有價值。一份被標示了意義的文件,可以通過加入 CSS 和 JavaScript 而有不同展現。

這個網頁的分層次方式可讓許多不同的人得到相同內容,但這不代表他們的體驗會一樣。尚佩翁明白這種關注點的強烈分離,令到我們可依最終用戶所用裝置的能力而採取不同的功能增強。

套卡爾‧馬克思(Karl Marx)的話,漸進增強讓讓設計師可要求瀏覽器各盡所能,讓各裝置各取所需。

網站要在每個瀏覽器看起來都一樣嗎?

一些網頁設計師覺得漸進增強可能會成為創意緊身衣,為最低標準而設計不像是在進步,但這是誤解,逐進增強只是要求設計師由最低標準開始(一份標示良好的文件),但並沒限制此後的發展。

事實上,以一份 HTML 文件穩固基準讓網頁設計師可以試驗最新最好的 CSS,多得波斯特爾定律和 CSS 的寬鬆錯誤處理,設計師可以自由使用一些只有在最新瀏覽器可行的樣式。

這意味著並非每個人都會體驗到同一個視覺設計,這不是一個臭蟲,而是 Web 的功能。新舊瀏覽器、黑白彩色顯示、快慢連接、大螢幕、小螢幕、沒有螢幕的,都能拿到你內容。這內容是理應在如此多變的環境下看起來不一樣的。如果一個網站在一個十年前的瀏覽器和新瀏覽器上看起來都一模一樣,那這網站大概沒有利用網絡的極大的靈活性。

丹‧錫德霍姆(Dan Cederholm)為強調此而做了一個網站以回答此問題:「網站要在每個瀏覽器看起來都一樣嗎?」你可以在這在 URL 找到答案:

dowebsitesneedtolookexactlythesameineverybrowser.com

可能掃大家的興,答案是一個響亮的「不!」如果你訪問該站,就會自豪地展示這答案。依你的瀏覽器能力,你可能會見那個單字答案上有某些風格裝飾。而就算你完全看不到任何修飾,你仍能得到具語意的 HTML 所標示的內容。

達至標準

將結構與外表分離是相對容易的,你可以宣告任何樣式,而放心瀏覽器會忽略不明白的部份。將行為與結構分離卻不容易,如果你給瀏覽器它不明白的 JavaScript,它不單會不加入該行為,而且還會停止解析所餘下的 JavaScript。

在你使用某 JavaScript 的功能之前,值得先試一試該功能是否已被支援。這類功能偵測可免得你的網站訪客因為某不被支持的功能而落得爛體驗。如果你想使用 Ajax,先試試瀏覽器是否支持你將會用到可支持 Ajax 功能的物件。如果你想使用地理位置 API,先試試瀏覽器對此的支援。

BBC 新聞網站的開發團隊將此功能偵測稱為「達至標準」(Cutting the mustard),可達標準的瀏覽器就能得到增強體驗,不達標準的則仍可取得內容,只是沒有 JavaScript 的增進。

功能偵測、達至標準,無論怎麼叫,都是一個蠻直接的技巧。舉例說你想使用 querySelector 來橫走 DOM 和使用 addEventListener 來在某文件節點掛事件,你的達標邏輯會看似:

if (document.querySelector && window.addEventListener){
    // Enhance!
}

這裏有兩個重點:

  1. 這是功能偵測,不是瀏覽器偵測。比起問「你是甚麼瀏覽器?」然後推斷其支援的功能,問「你支援此功能嗎?」比較安全簡單。

  2. 這沒有 else 陳述

侵略式增強

回到以前當網頁設計師對瀏覽器試施加如對印刷般的控制之時,設計成功與否以像素完美為量:網站在每個瀏覽器看上去都一樣嗎?

除非所有瀏覽器都支持該功能-例如說 CSS 的圓角效果,否則就不用考慮那功能了,但設計師卻以額外的標示碼和圖片去扮成該功能,結果網站在結構上不誠實,這不僅浪費設計師的才能與功夫,也浪費了現代瀏覽器的能力。

流動裝置、平板、響應式設計的掘起幫助鬆綁這種限制思維,期望跨裝置與瀏覽器可以像達像素完美已不切實際,但你仍會聽見網頁設計師哀嘆他們仍要支援某老舊瀏覽器,因為他的觀眾群仍有部份人在用。

這絕對沒有問題,任何使用老舊瀏覽器的人應當可以取得跟使用最新最好的瀏覽器的人取得相同內容,但這不代表他們都得有相同體驗。如布里奇‧沃特(Brad Frost)說:

支援跟優化並不相同

支援所有瀏覽器...但不為誰優化

有些設計師誤解漸進增強是要為所有人提供所有功能,相反地,漸進增強是為所有人提供核心功能,此後各瀏覽器就自己顧自己了。這遠非限制你可選用的功能,漸進增強為網頁設計師提供安全之法去使用最新最好的功能,而不用擔心老舊瀏覽器。Filament Group 機構的史葛‧耶赫爾(Scott Jehl)簡潔地說:

漸進增強解放我們,使我們可以專心在現代瀏覽器上創建功能,而不用擔心漏掉誰。有了強力而合格的程式碼庫,對老舊瀏覽器的支持幾乎是免費的。

一個使用漸進增強的網站,若某功能不被支持或載入不到沒有關係:Ajax、地理位置,諸如此類。只要核心功能仍然可用,網頁設計師不用為了使舊瀏覽器支持新功能而扭盡六壬。

此外網站也會對 JavaScript 的錯誤處理更有韌力,馬特‧馬奎斯(Mat Marquis)連同史葛‧耶赫爾打造了波士頓環球(Boston Globe)的響應式網站,他說:

波士頓環球網在沒有 JS 時很多酷功能會失效,但「讀新聞」並非其一

重點是認清何謂核心功能,何謂增強。

參考


本文是《Resilient Web Design》繁體中文翻譯的其中一部份,以該書的相同的姓名標示-相同方式分享 CC 4.0 國際授權

*