41 Some interesting thoughts, but...

I understand the frustration of some who feel constrained by tables, grids, and [em]boxes[/em]. Life goes around in circles; the web cannot. And that is what I believe is frustrating to the author.

Yes, CSS allows to break out of the table enclosure but it is still a grid based system. CSS with DIV tagging can only give us a little more freedom of placing elements on the page. Even if it is asymetrical, it is still a grid.

Unfortunately the city analogies are not as effective to this article as they should be. London is almost [em]two thousand years old[/em] while Tucson (based upon the fort) is only two hundred and twenty five years old. If you want to be even more esoteric, Tucson only has three “hyperlinks” (one highway, one rail, and one airport) to outside traffic, London has 15.

London was built as an accretion of decades human traffic and methods of transportation. London is a “website” that has no central methodology for expansion and has grown beyond just one plan. It is unmitigated growth. While serendipity may bring you to something unseen, unexpected and pleasing – you should know it exists or have access to it in the first place.

But going back to the main point, this topic should have more depth. CSS is just one component to breaking up the assumed grdi within a website. The most important item, for me, is the idea of struts. The space between elements is the most difficult programmaticaly but the most rewarding in terms of breaking up the grid. Which goes back to the discussion of the DIV tag. The margins called within the tag does not have the same constraints as the table tag. All four sides can be defined whereas a table has just one [border].

Within our current constraints of page layout, the only way to go beyond would be to employ simple fractal design through four-sided plane, right angled planes [rectangles]. With enough rectangles, you can give the appearance of extra angular and non-angular shapes (octogo and circles, for example). However, what is the practicality of such a layout?

But all this discussion is moot when applying it towards Section 508 standards. The web is moving from just the visible. When we design a site it must be usable to all, including the site impared. Does this mean that we go back to two sites like we did for IE and Netscape? Except now we have two sites, one without disabilities and another just for the reader-based browsers? I cannot answer that but it does seem to go that way.

This was a good conversation starter. Thank you, Ms. Holzschlag.

posted at 04:27 pm on December 21, 2005 by Thom Wiley

42 Warp the Grid

Regarding planned vs. organic cities; Chicago exists on a well-planned grid, with north-south streets, east-west streets, and a handful of predictable diagonals. However, there are a wide range of cultural “centers” scattered throughout the city, and Chicagoans frequently roam between these centers. As a result, Chicago is both easy to navigate and culturally rich… like a good website.

As for layouts… some others have pointed out that grids are as old as design itself, and have persisted because they work. Grids help create visual hierarchies and compositions to aid the eye in moving through content, and ultimately to deliver the message more effectively. The benefit of CSS in this context is that it more readily allows one to warp the grid – to create diagonal space without bandwidth-sucking images – but eliminating the grid entirely is ill-advised.

posted at 05:50 pm on December 21, 2005 by Zackary Webb

43 Re: Warp the Grid

The benefit of CSS in this context is that it more readily allows one to warp the grid – to create diagonal space without bandwidth-sucking images – but eliminating the grid entirely is ill-advised.

Agreed. “You’ve got to make the grid before you can break the grid,” I remember as the mantra of one Design instructor.

posted at 06:40 pm on December 21, 2005 by John Lascurettes

44 Tucson vs. London

London is more fun, Tucson is easier to navigate. If I’m looking for data I want Tucson. If I’m looking for recreation I want London.

posted at 08:15 pm on December 21, 2005 by Raanan Avidor

45 Give me a circle

Tables-based vs CSS box layout – it’s all the same. Design should precede implementation and the technology shouldn’t limit the design. CSS is quicker, cleaner and easier to maintain, that’s the difference I know.

Give me a hexagonal element inside a triangular browser on a circular monitor and we can discuss revolution.

posted at 11:41 pm on December 21, 2005 by Simon Hobbs

46 Rare Is The Site That Deserves Such Treatment

It is a rare site that when I, as a user, visit am interested in spending extra time attempting to figure out navigation or make sense of the content. I expect and value this only on the extremely unlikely event that I am visiting the website of a band that I like where the site is designed to be interesting enough for the user to invest mental effort into de-encrypting and is built in Flash. If you take the city analogy and change it to books you get a different take entirely. The “London” style books belong on coffe tables and in Lobbies while the “Tucson” example is what is lining the walls of any library and is on the nightstand by most beds. When someone wants information or entertainment from books they don’t want to have to work very hard for it. They expect the text to start at the upper-left and run to the right. They expect that there will be paragraphs and indentation at appropriate intervals. They count on their diagrams and grids to look relatively the same. They expect page numbers and chapters and when they don’t get it they get frustrated.

Simply put, when people are after information and usually even entertainment they will read “Tucson”. When people are after an innovative and different sort of experience they read “London” (no offence to any Brittish in the audience) and this is because they are board in a waiting room or conversation at the Smith’s has turned the topic of web programming. :)

posted at 04:50 am on December 22, 2005 by Andrew Branch

47 Hybrid solution optimal

Many people have posted comments that scorn the whole “abandon the grid” idea, while others have preached that Molly’s “gridless” examples should be the benchmark for many more websites out there. It troubles me that so few people have acknowledged that neither of these extremes is optimal (in most cases – there are always exceptions). A balance between a basic grid layout – with elements such as header, footer, and 2-3 colums – and between truly creative elements that break this layout, is much more desirable.

It’s also interesting to note that even Molly’s supposedly “gridless” examples exhibit this hybridness. The Zen Garden Blood Lust design, for example, still uses a traditional side navigation block, and a top header block, even though its content area breaks conventional rules. The same can be said for the Kutztown University example, which has four basic linear blocks down the page, with the navigation menu arranged in a more unique way.

Innovative layout techniques have their place, but for the vast majority of sites, it is not practical to have a master template that completely abandons the basic grid in favour of haphazard absolute positioning and a glut of CSS background-image: overuse. A master template must be able to accomodate (as a common example) thousands of different articles, all with different lengths, different paragraph sizes, and different embedded elements, such as images and blockquotes.

Take Blood Lust: this kind of layout, that absolutely positions all the content within the page, is completely impractical as a generic site template. CSS-based grid layouts have been perfected to a level where they accomodate varying content extremely well. Other layouts are simply not cut out for it at this point in time (if ever they will be).

posted at 06:20 am on December 22, 2005 by Jeremy Epstein

48 The grid IS design, not the poorly concieved mess

Oh dear. Another half -baked article by a techie wandering even further into the world of design and destroying yet more of its basic foundations. When oh when are the designers around here going to cop on that techies want nothing more that to eliminate design from the whole process altogether. Seperate content from design? great idea. CSS ? what a totally rubbish coding solution. CSS has thrown out one of the basic fundamentals of design, the grid, so now the techies are saying “well the grid wasn’t up to much anyway”. Get a grip folks!
How much more of this are designers going to put up with before design is totally eroded from the picture altogether? and every website looks like a blog. Websites that use well written table layouts work perfectly for accessibility. Do not be fooled by yet more of this desperate hankering for the poorly written code that is CSS. Design IS important. Do not sell it down the swanny.

posted at 09:05 am on December 22, 2005 by dave arturs

49

A wonderfully written and design provoking article…

But as I look at my monitor I can’t help but agree with all the comments on how hard it would be to truly escape the grid. My taskbar (even with it daringly draped down the right hand site of the screen), the status bar, my Firefox tabs, my quick launch icons, the address bar, even the very edges of the monitor itself, everything in front of me screams ‘GRID!’.

It strikes me that grids form the basis of the computational interfaces we (or am I alone here?) are comfortable with. Until user interfaces manage to break through that barrier then web sites will always be ‘inside the box’ no matter how much they try and break out of it, and from my experience of trying to use non-grid-based Winamp skins within my nice grid based desktop they just look, and feel… wrong.

posted at 09:48 am on December 22, 2005 by Rob Swan

50 Flash?

Interesting article…Perhaps a mention for Flash websites that have been potentially free from boxy constraints for years?

I think grids benefit usability(not to mention the obvious angular impositions forced by the shape of screens/monitors) and so will always have a place. The examples given in the article were great – it’s always good to see different things being tried and implemented

posted at 12:21 pm on December 22, 2005 by Richard Clarke