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

[Page: ]

網格代碼的迷思

　　作為一個更多注重代碼而不是設計的人，我很迷惑地發現我們的設計是如何拘泥于代碼，我相信是長期的表格布局讓我們畫地為牢（圖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 布局的設計者而言也更直觀簡單。而這種設計也同樣直觀易用且不落俗套。

[Page: ]

展望

　　現代布局技術之美是我們有更多選項可選。使用 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 更完美的容器，因為它對所有瀏覽器的兼容是最好的，它不會坍塌，不會長短不一，它的行為更容易符合預期，最重要的是，它是人們對事物進行組織的一種最直接的方式。

　　本文國際來源：http://www.alistapart.com/articles/outsidethegrid
　　原文作者 Molly E. Holzschlag
　　中文翻譯來源：COMSHARP CMS 官方網站，譯者35公里。