11月的一個深夜，我飛臨我的故鄉亞利桑那Tucson 的上空，我為這個城市網格式的佈局所打動，Tucson 是美國通過規劃而建造的城市之一，從上空看，這個城市的所有東西都被設計者精心佈置（圖1），我剛從倫敦回來，倫敦正好相反，倫敦的城市佈局（圖2）曲裡拐彎，看起來更像是出之天然。
圖1：亞利桑那的Tucson
圖2：倫敦
我構想這篇文章已久，這兩個城市的俯瞰圖讓我聯想到Web 設計，當今的技術可以讓我們自由實現網格式設計，或者完全跳出網格之外，這種選擇對Web 設計師的推動是毫無疑問的，然而真正的挑戰是，我們該如何放棄那些閉塞的思想而跳出網格之外思考。
城市的感覺
將城市規劃推之Web 設計，二者之間的相似之處很有趣。網格佈局非常適合創建可預見的，易於導航的網站，網格可以很好地幫助設計師進行規劃，讓使用者易於存取（圖3）。
圖3： Ryan Brill
從正面意義上看，Tucson 這個城市當然很容易訪問，一點方向感或一張街道圖就足夠了，居民向別人指示自己的方位，只需說，我在Campbell Avenue 和Prince Road 交叉路口的西南拐角處就可以了。大眾運輸都是正南正北或正東正西，辨路是很容易的。
而從另一方面來說，Tucson 的設計者最初的規劃只考慮到有限的擴張，當城市發展到規劃之外的地方，問題就出現了。 Tucson 網格化的限制阻止了不同風格社區或鄰裡的出現，許多Tucson 的居民覺得這個城市缺乏一個充滿活力的市中心或眾多有個性的社區，結果，即使這樣的區域出現了，也容易前往，他們也懶得去找。
倫敦卻不同，它簡直是個迷。我知道倫敦人自己也要靠城市指南才可出遊。這個城市的交通系統充滿挑戰，那些計程車司機需要通過專門的考試才能上崗。這個城市的自然成長並沒有讓它成為一個容易出行的地方。
然而在倫敦，精彩的城區與口味獨特的鄰裡到處都是，文化聚集區以及奇趣社區也不一而足。雖然更難出行，因為口味紛呈，人們反而更樂意置身其中。
這個隱喻也適合那些趨向自然的Web 設計，人們如何輕鬆地在那些曲裡轉彎的巷子中穿梭？從另一個方面說，漂亮的設計可以透過打破我們所一直遵從的條條框框而實現。圖4中你可以看到，突破網格設計的規則如何讓設計既保持易用性，又看起來與眾不同。
圖4： AIGA Los Angeles
網格程式碼的迷思
作為一個更注重程式碼而不是設計的人，我很迷惑地發現我們的設計是如何拘泥於程式碼，我相信是長期的表格佈局讓我們畫地為牢（圖5），聯想到最新的CSS 佈局，很容易知道這是為什麼。
圖5： k10k
表格佈局很適合網格設計。表格的程式碼本身就是重現一個網格，我們只是在單元格中填入圖片，文字，介面元素來完成我們的設計（圖6）。如果我們想要實現複雜的非結構化設計，就需要在文件中運用大量圖片，導致整個文件的臃腫。
圖6： Weightshift
表格佈局有一些優勢，然而跟城市規劃一樣，優勢有時候也可以變成劣勢。基於表格的網格保證它裡面的所有單元格規規矩矩，要讓所有的列擁有相同的寬度？太簡單了，表格的天性是如此。讓單元格之間保持一致的間隙？也是小菜一碟。然而，如果你不想要這種整齊劃一的結構怎麼辦？很不幸，你做不到。
CSS 改變了這一切，這是我認為我們還未學會為Web 而設計的理論基礎。我們，尤其是那些從長期的表格佈局轉到CSS 的人，剛開始明白CSS 的視覺模型對打破網格設計的陳規有多麼有幫助。 CSS 佈局完美嗎？並不，在CSS 帶來的好處之外我們還失去了一些東西。整列擴展對CSS 設計來說是一個很大的問題，單元格的間隙問題也是。
CSS 無非是邊線與盒子，網格中也有，然而二者的本質區別是，CSS 允許我們將一個盒子從其周圍的環境中獨立出來任意處置（圖7）。
圖7
我們可以使用position 或float 屬性定位，我們可以用輕量級圖片作為背景，因此使用Box 的時候我們既可實現網格佈局，也可以更有效的實現非網格佈局，你可以在Dave Shea 的Blood Lust 中看到這個例子，這是他在CSS Zen Garden 中使用的眾多設計之一（圖8）。
圖8： CSS Zen Garden： Blood Lust
圖9展示了Blood Lust 中運用的基於BOX 的非結構化設計，也展示瞭如何使用CSS 和BOX 實現相互獨立的非結構化網格。
圖9
一旦我們明白了BOX 的能力，我們就可以輕易地突破網格的束縛。圖10中展示了一種高度非結構化，甚至是自由的設計。
圖10： Kutztown University： Communication Design Department
這些BOX 使用CSS 定位：
圖11
不僅程式碼變得更乾淨，對熟悉CSS 佈局的設計者而言也更直覺簡單。而這種設計也同樣直覺易用且不落俗套。
展望
現代佈局技術之美是我們有更多選項可選。使用CSS 我們可以創建易於管理，輕量，視覺豐富的設計，如果樂意，也可以是網格設計，同時，我們也可以輕鬆打破或解除這個網格。
這為當代Web 設計帶來更多機會，我們不應因為對網格設計更熟悉而重蹈覆轍。
對於我們這些長期耽於表格佈局的人來說，面臨的困難尤其大。對多年的Web 設計者，這意味著同一直使用的東西決裂，有些人也許並不覺得難，然而絕大多數人會心存畏懼。我們需要學習CSS 模型的工作原理，還要勇於同陳規告別。
有一些新人，他們從未從事過表格佈局設計，對他們來說，我們過去的方法既奇怪又死板，正是從這些人中，我們有希望看到更多對設計陳規的突破。
Web 正在走向成熟，我們設計方式也在改變，我們的面前有更多的創新與創意。我們不會拘泥於被規劃的城市，我們可以實現獨特的設計，我們這些老設計師，聯合當今的新人會讓Web 日新月異。
本文作者：
Molly E. Holzschlag 是一位知名的Web 標準倡導者與傳授者。她的30多本著作中最暢銷的是她與Dave Shea 合寫的The Zen of CSS Design （禪意的Web 設計）。 Molly 是W3C 工作小組受邀專家，也是Web 標準專案小組（WaSP）的前主管。 Molly 同設計者，開發者，執行者與決策者一起，為實用的，漂亮的，有意義的Web 提供推動力。
譯後記
這是一篇發表於A LIST APART 的2005 年的文章，2005年，CSS 佈局還不像現在這樣普遍，而表格佈局已經讓很多人不堪其重，作為Web 領域資深的專家，作者Molly E. Holzschlag也是表格佈局的長期使用者，當CSS 接近成熟，基於CSS 的佈局讓人耳目一新的時候，她對基於表格的網格設計的心情是複雜的，從文章中可以看出。
然而時間到了2009年，當CSS 已經無孔不入，CSS 佈局也變得爛熟的時候，我們很有必要再次對網格設計進行思考，網格死了嗎，或者說表格是邪惡的嗎？答案並不那麼簡單，當今的Web，無論怎樣變化，它的宗旨是永恆的，除了Web 應用，Web 永遠不變的使命是表達和傳遞信息，如果你是一個文人，你會愛上倫敦，然而如果你是郵差，你會選擇Tucson。因此不管是網格設計還是自然設計，並沒有絕對的優劣，網格設計更清晰整潔，自然設計更優雅精進。
而表格，也不不如很多人說的那麼邪惡，須知，現在的表格已不是昔日的表格，BOX 可以結合CSS，表格也可以，完全使用CSS 進行修飾的表格就像一組有機組合併互動的BOX，當你並不需要其中的單元格精確定位的時候，表格是一種比BOX 更完美的容器，因為它對所有瀏覽器的兼容是最好的，它不會坍塌，不會長短不一，它的行為更容易符合預期，最重要的是，它是人們對事物進行組織的一種最直接的方式。
原文作者Molly E. Holzschlag
中文翻譯來源：COMSHARP CMS 官方網站，譯者35公里。