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