One of the latest articles on A List Apart has me scratching my head. The author, Molly E. Holzschlag, makes the case that web coding is moving necessarily away from grid-based structures, even if the underlying code is similarly gridlike.
The points seem to be as follows:
- Grids are easy to navigate
- They are not, however, necessarily the most vibrant or the most æsthetically pleasing (a number of grid-based versus freeform examples are cited, most of them achieved with CSS box models of varying complexity)
- “[W]e’ve not yet learned to design for the web. What we’re just beginning to understand—particularly those of us who come to CSS layouts after years of working with tables—is that the visual model for CSS is far more conducive to breaking out of the grid and designing for discrete, semantic elements.”
You’ll forgive me if I’m a bit skeptical of the importance of these points, or even their validity. Holzschlag seems distracted by the a priori assertion that a) logical, æsthetic, and semantic structure are interchangeable concepts and b) that rethinking the method of organizing (think code) an æsthetic presentation is tantamount to rethinking the presentation itself.
The CSS visual model is all lines and boxes. That’s the stuff of grids, right? Well sure, if we want it to be. This is where the fundamental difference is. CSS allows us to take a box—any box—and do with it what we want, independent of its surrounding boxes (Figure 7).
I have difficulty with the idea of CSS as a “visual model.” The author sets CSS and traditional table-based design as polar opposites, but remember that one can just as easily use CSS to define elements of tables as well. Tables are bad for anything but data sets in content areas for the reason that they are not very flexible and quite crufty. Moreover, their markup is not in the spirit of the new semantic web. Use <div> or <span> or <p> or <li> or <h1> instead.
Most troubling about the article, though, is the author’s insistence that a scattered presentation is somehow a positive thing. She uses Dave Shea’s Bloodlust at CSS Zen Garden as an example. Sure, it’s an interesting proof of concept; at a place like CZG, it might make a visitor linger a few extra moments before moving on; but you could hardly expect that such an approach could even begin to fit the needs of a website with content, even if it’s artsy. Consider this:
2. “We have art content, so let’s create an artistic navigation.”
You know, sometimes the navigation is the content, for example when you’re playing an (online or offline) adventure game. Then, a player wants to have a hard time defeating barriers.
An art website, however, is not an adventure game, and artful navigation (yeah, we get the point, the website is part of the artwork) can really hurt the experience. Even when you have drastic, challenging, and unusual content to show off… there’s nothing that says you can’t simply link to a well-made web video or similar content.
Not long ago, I came across a specific Japanese artist website. There was so much neon blinking and movement, at first I didn’t even understand that it was completely broken and not showing as intended. Then I switched to Internet Explorer, and the blinking and movement started to make a little sense… but still gave me a hard time trying to locate the contact info.
The fact of the matter is, if your website is trying to convey information in any meaningful fashion, then you have (or should have) a grid-based layout. Whether this underlying grid is composed of crufty tables or of tasty semantic, Web 2.0-happy markup is one matter; whether the visual layout is in recognizable grids or aligned boxes (every decent design is doing it, from the latest and greatest blog themes to truly content-based sites like CNET (which, if you’ll notice, breaks a bit out of the traditionally column-based approach, but still with recognizable and visually-separated sections.
As powerful as CSS is in determining how we can accomplish new tasks in terms of design and extensibility, it doesn’t change the underlying goals for said design, which is improving the human interface aspect of the project, and offhand I can’t think of any situation where that would be improved by the making of a muddled presentation.
