21 Ninja Turtles

This is going to sound random, but this line in your closing paragraph reminds me of a quote from the cheezy movie Ninja Turtles II:

“As a combined force, the empowered veteran and today’s spontaneous youth inspire a provocative notion that the way the web looks today is nothing like the way it’s going to look tomorrow.”

The movie quote was from Splinter to a young man named Keno, when he wanted to rush off and help the Turtles fight the bad guys. The line went something like this:

“You have youth, I have experience, but only those who now fight have both.”

Hopefully that’s not too unrelated. My point is this: I think it will be important for those of us who have come out of the table background to continue to teach the upcoming generations how to design with CSS.

I guess I feel a bit nervous that because CSS is a more difficult learning curve, and Wizzy-Wigs make things point-and-click easy, people will continue to be taught methods of the old paradigm. This is especially true in higher education, where the teachers may not be on the innovative cutting-edge, and can’t be bothered to change.

While I hope curriculum will evolve to reflect modern methods, I am sure that there are plenty of tenured professors who could care less, and just want to do the same-old, drawing a paycheck. When I was in college, I asked a professor about CSS-based layouts, and the reply was: “Oh, I’m not requiring that for this class!”

So, I just bought an Eric Meyer book and taught myself. I guess I just want to make sure that the next generation is afforded the opportunity to learn things the right way, so that we won’t continue to see developers who justify table layouts with: “This is how I learned it in school!” Let’s continue to push for CSS and combat mediocrity at the university level, so that one day it will simply be the de-facto standard.

posted at 04:15 pm on December 20, 2005 by Nathan Smith

22 Terminology?

Molly, there are two big problems with this article. One, there have been many tables-using designers who created designs breaking the “grid” (or rather table, as grid is not really what you’re talking about in your article) – that is the first and biggest misconception. You can’t just write an article based on something that is not true, even if you want to believe it. Two, the layouts you presented as the ones breaking the grid are not even breaking it. Maybe you wanted to say “layouts breaking the table”. I think you should read Mark Boulton’s articles once again and learn from them. Because you clearly have lacking information on grid-based designing. In addition your diagrams don’t illustrate grids, they illustrate tables – or rather “frames” (not in the html meaning).

With that said, I understand what you’re trying to say, but I don’t understand why untrue statements have to be used in order to support it.

posted at 04:46 pm on December 20, 2005 by Anatoli Papirovski

23 Sources?

I’d like to have citation URLs for more of your examples. Specifically Figure 6.

posted at 04:51 pm on December 20, 2005 by Jeff Blaine

24 Further on the City Analogy

I think the city planning analogy was interesting, but would like to point out a notable difference between places.

Grids in city planning are a rational choice to alleviate traffic congestion – when one major artery becomes blocked by construction or an accident, one street on either side of the major route provides a bypass.

A city like London has a high population density where most of its citizens can get around by large scale public transport: tube, train, or walking – largely independent of automobiles and less confined by a road map.

In most North American cities a majority of people rely on automobiles for day to day transportation, confined by the road map – and the grid is the most sensible design for this. Having a London city layout in a city like Tucson would cause widespread congestion.

Relating to design: the grid provides the most sensible and rational way to direct traffic. Whether that’s a city or a website, you can’t advocate using one or the other without considering who’s using it, and how they are going to use it.

In the web the grid makes it more navigable and legible. If you know you’re audience are web savvy you might depart from the grid for original appeal; however, you decisions on how to design should be user centric.

posted at 05:31 pm on December 20, 2005 by Jason Pfeifer

25 More column control coming to CSS

As always, the impeccable Molly has impeccable timing. For those wanting more CSS controls to enable grids, see the very early working draft of “CSS3 module: Multi-column layout.”

http://www.w3.org/TR/2005/WD-css3-multicol-20051215/

This is one of Håkon Wium Lie’s modules and he’s open for comments. This is an ideal time to let your voices be heard so you can get the column control you want.

Then, we can use it to make interesting places, even if they are layed out like Tucson. :)

posted at 06:53 pm on December 20, 2005 by Bob Easton

26 griddi no politti

“the constraints of Tucson’s grid do not encourage the emergence of alternative neighborhoods and communities”

What the heck does that mean?

posted at 07:13 pm on December 20, 2005 by Mike Hairston

27 Amen

I am glad that someone has written about the very concept that I have spent the past two years on trying to do. It has been hard to break out of the old mindset and create new ideas. I have only recently developed a layout to break out of the grid layout. It uses newly support CSS a lot to achive the results.

posted at 07:59 pm on December 20, 2005 by Seamus Leahy

28 Are grids the problem?

I’m not so sure that the problem is one of too many designers using grids. I think it’s actually the opposite problem. So many designs seem as though more thought has been put into the “oh-my-god-can-i-get-these-divs-to-line-up” phase, and not enough into the actual design process. How many designers measure their target page width, then divide that number into columns and margins? How many stick to those measurements reliably throughout a site?

Thoughtful grid-based design is a thing of beauty. The AIGA Los Angeles site is most definitely a successful design because of the very fact that it honors its grid.

There are a handful of sites out there that are completely free-form and do so effectively. Unfortunately, they usually consist of a simple HTML page with an enormous Flash file in the middle. In the interest of learning the rules before one breaks them, I can only hope that more designers emulate (emulate, not duplicate) sites like Subtraction or Ryan Brill.

posted at 08:08 pm on December 20, 2005 by Matt Thomas

29 Molly got it right

Molly got it right. Table layouts are confining. CSS layouts allow grids, but don’t confine you to slicing and dicing, or fitting elements into the grid inside a table layout.

Your grid can be in the background, where it belongs. Images can be attached to the background of any element, breaking the grid, yet related to it. Both absolute and relative ositioning allows much greater flexibility.

All we need is browsers that fully support CSS (sending off a little prayer to you know who). With any luck, the work that Molly et al have been doing will bring that about sooner rather than later. You go, girl!

posted at 10:24 pm on December 20, 2005 by Marilyn Langfeld

30 No she didn't :^)

As many others pointed out, the article touches some interesting issues, but spreads too much confusion.

Spatial relationship between discrete visual elements is one of the key elements of design.
Wheter or not you use a grid system for assistance in designing your layout, you just create spatial relationships, seeking for whatever effect (harmony, balance, scanability, or why not disorder, noise, disturb) you think or feel is right for the purpose of your design work.

Grid systems exist for helping designers tackling spatial composition of content in a rational and organized way: as usual, rules support instinct, and help dealing with complexity.

The freedom of CSS positiong and the power of the CSS box model really help implementing grid systems in web design (at least, on the horizontal axis).
We all know that HTML tables were a badly primitive tool for placing content in a web page, adopted only for the lack of anything better.
Stretching the comparision a bit, it is just like switching from Excel to a dtp app for publishing a corporate gazette :)

Table-based web authoring indeed leaded to a tendency of boxes-based web design, but the limitation was in the cell system adopted for authoring, not in the grid system which was infact often neglected for designing.

My view is that before CSS tools, web design often ended up somewhat resembling software interface design: something like “this row is for menu bar, this narrow box hosts a sidebar, and this big cell here is ready for content. Skin the borders of the cells with some chrome, et voila, here is the web site”.

CSS and a more mature approach to web design have indeed let us think outside the cells, but this whole process has nothing to do with thinking outside the grid.

Cheers

posted at 12:11 am on December 21, 2005 by Riccardo Poli