Just read a very inspiring article at A List Apart:
Thinking Outside the Grid by Molly E. Holzschlag
This article highlights the possibility that CSS can enable web page layouts that do not follow the standard table-like grid that is traditional for this media. This is really inspiring, partly because most work around CSS-layouts has been focused on getting it to behave the way we are used to tables behaving. It is an excellent point that we all apparently needed to be reminded of: CSS is not tables. We never expected CSS to function like them, so why have we been so determined to make it behave like them.
This is also inspirational because it means there are many more possibilities for layout I would have never considered before, given the free-flowing independence of boxes in CSS. Nevertheless, I was disappointed by many of the examples shown in the article of "non-grid" layouts. One of them is even based on table tags! Oh well, it's the product, not the process she is primarily arguing. Also, many of the other examples are somewhat garbled and, I find, difficult to read and extract information visually. They are visually interesting, though the novelty accounts for most of the appeal, but not terribly useful, or user-friendly.
Is the grid the ultimate layout scheme for usability? Molly Holzschlag does acknowledge that a grid has been the meat-and-potatoes of layout schemes for the web (and, in fact, most text-based media) precisely because they lend themselves to being easy to navigate, and predictable, thus making it easier for users to get to the content they want. And the customer, or user, is always right. However, I also envision non-grid layouts that can be both visually interesting and functional for users.
I haven't the time to fully illustrate or explore them, but here are some descriptions of what I envision:
- Elements positioned in regular patterns that are not grids. For example:
- list elements in a circular, or hemispherical pattern, within a block on the screen. Not cheating, the way one might using tables in the old days, but actually using the
position: absolute(or relative) attribute to place things where they ought to be. A specific case would be to take an ordered list (1-12) and place each item in a circle, forming a clock. The order of each item is maintained by the markup, but the spacial arrangement is provided by CSS. - elements staggered in a regular way, such as diagonally down a page, or creating a wave effect (horizontal, or vertical)
- Since I'm lazy, I could even see JavaScript being used to calculate positions of elements in such a scheme automatically, or more accurately, mathematically. Maybe even randomly. Woah, that one might need to be constrained or managed to some degree to prevent unreadable layout.
- list elements in a circular, or hemispherical pattern, within a block on the screen. Not cheating, the way one might using tables in the old days, but actually using the
- Dynamic layouts (possibly grid-based, but not necessarily), that react to user "behaviour". Some might argue this is best left to javaScript. Nevertheless, this is already common to some extent, especially with navigating menus; the kind of thing that used to be done with javaScript now works even better with CSS. An idea I remember from a very early project in the 90s was something like a bunch of cute-looking bubbles on the screen that expanded to reveal their contents when the cursor moved over them, and retracted when the cursor leaves. This is easy to apply in CSS (using the
:hoverpseudoclass), but could never be accomplished with tables. I've already seen a variation on this idea. - Is there a way to rotate elements in CSS? Or the text inside them? This would be another way of breaking out of the grid, and could actually be useful in tables with long column headings.
- And, of course, there's always the extreme versatility CSS allows, enabling styles to be changed, and be even more dynamic than a table ever could, but that's nothing revolutionary.
- That's all I can think of right now.
For now, I also have to agree with many others that really interesting and novel-looking pages are ones that can also break out of the rectangle, as well as the grid. A page doesn't have to look like Lego blocks. Non-rectangular elements are, naturally, the next step.
