Oh I see.

By grid you mean a layout device -- a "typographic grid" as Khoi Vinh calls it. I read this as some kind of "grid control" or repeater, such as "asp:GridView" and friends.

Anyway -- here's a modern tip: use html's table element to achieve your desired grid layout. bewdiful. (/sarcasm).

lb

Recently I migrated to using Yahoo! UI Library's "Grids CSS" library. Though it works well and offers full "A-Grade Browser" support, I find it constraining. Why should side-bar navigation column only be limited to the following width (160px, 180px, 300px)?

I miss the good old days of table layouts. Accessibility problems aside, they are much easier to understand than all the voodoo browser hacks I have to deal with.

I notice that even you can't resist the use of <table> tag in this blog entry and your blog's footer.

By the way, I really really like your blog's plain layout.

anyone do a view-source on the Yeeah examples? what's with all the non-visible cialas links?

Here's another link on grids as web layout tools, from alistapart: http://www.alistapart.com/articles/settingtypeontheweb

As a side note, I suspect that all the talk about grid layouts is great for web sites, but has quite a reduced value for web *applications*. Granted, the law of thirds, or law of threes ( http://www.homestead.com/fixaphoto/digitalcameratips.html ) implies that a 3x3 grid is a good starting point for all layouts, be it a web site, or a web app, but in web apps, where you end up with data entry forms and (/sigh) large data tables/worksheets, there's only so much gridding you can do :(

F.O.R.

I recently started using Grids in my site designs, and built a website dedicated to the technique, which you may find interesting:

http://www.designbygrid.com

I don't like "fixed box centered" template. So many websites use it, and they usually fix the box to about 50% of the screen, leaving so much wasted space on the sides. I tend to sit back from my monitor, so I like to increase the font size, which breaks a lot of web pages. Even at the normal font size, the text is often so squished that it's a chore to read.

>"But basic CSS grid layouts are a fairly well understood science by now."

Not by me they're not!

I could never get a handle on CSS...

I'm with Telos. Modern CSS layout is all a magic cloud to me. The Yahoo grid design too is excellent for getting started. They also include instructions on how to set up custom styles for the grid so you can change the width and other properties on grid elements.

"anyone do a view-source on the Yeeah examples? what's with all the non-visible cialas links?"

That's what we call 'They got hacked'. Bots are usually sent out to add those types of links to the bottom of any page they manage to get access to - have reported it to the webmaster.

Interesting...I guess when I think of grid I think of Excel-like constructs. Your post shows the term to be far more versatile.

One type of grid which I am really beginning to despise is the dreaded Editable Grid.

This is often asked for by users who want the power of a spreadsheet-like data entry on a web application screen. This usually means everything is editable at all times and can be navigated via the keyboard.

Unfortunately it's consistently been my experience that editable grids are markup intensive and require multiple transactions to get consistent CRUD behavior. Also testing a grid can often be a lesson in frustration.

I'd love to see a better UI construct for data entry that works better than a fully editable grid.

"That's what we call 'They got hacked'. Bots are usually sent out to add those types of links to the bottom of any page they manage to get access to - have reported it to the webmaster."

No, that's what's called 'getting paid'. All sorts of people sell their pagerank to asshat spammers.

I've gotta disagree with the Yeeaahh! design. For one, the colors. The yellow at the top draws attention away from everything else on the page. Also, it makes reading the news headline painful.

And I understand their point, that grids can be more flexible, but they've sacrificed any ease of use to make their point. That Yeeaahh homepage is a catastrophe of elements. Nothing flows naturally or easily from anything else. The reason more rigid grids are used is because it makes it very easy for the brain to digest quickly and navigate. Looking at the Yeeaahh page, I have no idea what the focus is supposed to be when looking at any one element. I feel like my eyes are getting pulled from one element to the next to the next to the next without ever letting me stop and see anything.

I appreciate the point they're trying to make, I just don't think they've made it well.

I prefer the Yahoo site, much simpler.

I only have a couple of years exp. with >html< and I've been able to use simple CCS to design www.borealimagery.com. (Sorry about the giant gif, a lot of work to be done.) I started with grids, but found them to rigid for the kind of site I had envisioned.

@Andrew: "I only have a couple of years experience with html..."

No kidding... your site kinda sucks... sorry.

Go pick up a design guide.

:)

I prefer the original Yahoo page to the "grid" one. The personals page is a bit more interesting in that it has images that "appear" to go outside the lines a touch.

However: "The point wasn't to improve on Yahoo's design. The idea was to use the redesign to illustrate the various methods and principles that experienced designers use in grid layouts. "

Wouldn't it be more effective to show that this grid layout system can make a more usable, 'improved' page, rather than using it just because?

Ermm... pages have layout, which menas somebody selected a container, but still the content is king.

Why discuss design grid when Yahoo has a different design grid for each of their services? I don’t understand it. Try talking about design grid on MySpace, what is the point?

Some designers tend to focus only on the front page, but if you provide a full blown web service you need to set up a design grid that is fully and strictly integrated.

As someone who doesn't do web design, I don't see a whole heck of a difference between the side-by-side examples (Yahoo! and Yeeaahh!) above. More to the point, the Yeeaahh! example doesn't look any less 'unimaginative' than the Yahoo! page.

I think I prefer the layout of the Yahoo site too (just by visual inspection), my brain can more easily pick out the sections of the page and I can it looks much clearer...

I gotta say, I don't see any real difference between the original and the redesign as far as grid layout goes. No layout tweaking can change the fact that they crammed way too much stuff onto a single page. OK, the redesign has one less ad, which means more room for actual content, but it also made sure the fill in the only real white-space on the original (the bottom-lefthand corner) and is therefore (marginally) worse. As a user, when I go to a site, I want accessibility (not in the Section 508 sense, but really accessibility); I want to be able to quickly find the content I need, not wade through a mess like Yahoo.com's homepage. That is one of the reasons I switched to Google a long time ago. The extra stuff is there if you want it (in the form of iGoogle, which admittedly is similar in nature to my.yahoo.com), but they don't throw every conceivable thing you might possibly want at you immediately.

it seems that all search engines want to be 'portals', meaning you not only search from there, but you use it as your main app-like from page.

I thought that one of the things that "Web 2.0" was supposed to have taught us, in spite of all the ridiculous hype and marketing buzz, was that users don't like to be bombarded with content, they prefer simpler pages with lots of white space. These grid layouts are interesting in the sense of showing what's possible with HTML and CSS, but they all seem to encourage the horrible visual clutter that the web design world has been desperately trying to extricate itself from over the past few years.

These designs are all excessive and overwhelming, they make me feel like the designers care more about proving what great designers they are than they do about the quality of my experience with their designs. It looks like magazine copy and I don't want to read a magazine. Even on the Personals example, which is a bit better than the Yahoo example, I think they could rip out that entire bottom panel and the right side panel and the site would lose nothing in terms of functionality, usability, or visual appeal.

Look at Google's home page compared to either of those Yahoo pages and you'll see why Google's been killing the competition. I know that Google is a cliché example of a cliché design trend, but we *are* talking about search engines and portals here, and Yahoo is practically a textbook case of what NOT to do.

Just my two cents, of course - I'm not the one making big bucks off of shrinkwrapped web design, although I do get to see the effects of it on users firsthand.

wow, so they managed to mangle yahoo's homepage AND drop an above the fold leaderboard.

sorry guys, grids are good, your examples are bad. besides, jakob nielsen has you beat by years on the 'taking industry websites and wrecking them' tip.

While I hate how much crap they are trying to throw at me, Yahoo!'s front page is extremely easy to navigate. If you look away for a second and fix your eyes back at a random section of the page, it's not hard to tell what you are looking at. Everything melds together in the redesign example, it's hard to tell just what you are looking at.

I guess I feel that if you are going to spray content all over the browser, you might as well be blunt in your design. Seamlessness is only good where there aren't a lot of pieces.

And I totally agree with the notion that it is silly to say, "Here's something neat you can do!" and then use that tool extremely poorly.

When I read the title, I assumed this would be about grid computing. ;)

You need to consider the following:

1) Don't expect someone working for the New York Times to be an advocate of "white space". They work very hard to fill all white space with content in the newspaper business.

2) The goal of the exercise was to demonstrate grid layout techniques. Not to redesign the content of the website and make it "better". It wouldn't have been fair to remove content. Just push it around. That makes it virtually impossible to make the Yahoo site "better".

3) With respect to "simple" sites like Google, you need to read up on "Inductive User Interfaces". Google works because the task at hand is "searching". People don't want to see horoscopes, dating advice, and news when all they really want to do is search. So don't think of Google as a "simple" interface. Think of it as an interface that was designed with a single task in mind. Likewise, the purpose of the typical portal is to provide a wealth of information in a single view. It is full/complex on purpose because the task at hand is to get brought up to speed quickly. If you tried to use a Google-style interface for the task of seeing the daily news, it would fail miserably. People wouldn't want to click on individual links and navigate some series of simple screens just to get what they want. It would become way too cumbersome.

So don't get caught up thinking that "simple is always better". What is always better is what helps the user complete the task in a way that they understand. For searching, Google has the right formula. For other things, simple is not always best.

@Matt
On topic number 3, you should check out Google's "customize this page" or whatever the link is called.

I read cnn, fox, drudge report, this blog, lot's of RSS feeds from my Google page.

> I don't see a whole heck of a difference between the side-by-side examples (Yahoo! and Yeeaahh!) above

In the current Yahoo! design, what I see is a pretty mundane, awfully typical constrained table. That doesn't mean it's bad, or unusable, but the Yeeaah! design is a grid that defies grid conventions-- the placement of elements is more organic and less rigid.

As I see it, the point of Khoi's article is to illustrate how to use a grid without becoming subsurvient to it, where all you see is a grid. The best grid layouds-- as you can see in both examples-- defy the very conventions of the grids they're built on.

I definitely prefer the Yeeaah! design from an aesthetic standpoint. But as Khoi himself and other commenters have pointed out, there's a lot more work to do before changing *any* design "just because".

Still, I do think Yeeaahh! is a much more interesting, organic, and pleasing grid design than the staid, boring grid of the current Yahoo! page.

> So don't get caught up thinking that "simple is always better".

Good point..

In Pursuit of Simplicity:
http://www.codinghorror.com/blog/archives/000529.html

Simplicity as a Force:
http://www.codinghorror.com/blog/archives/000726.html

"I read cnn, fox, drudge report, this blog, lot's of RSS feeds from my Google page."

But you don't read them when all you want to do is search. You just ignore that additional complexity/content because you are an advanced user who has programmed himself to do so. But for the majority of people, they go to Google most often to search and not to read blogs or news. Therefore, when all they want to do is search, that other stuff is just a distraction. The fact that you can set up Google to also be a portal is a different topic. Those expousing the simplicity of the Google interface would no longer call that the "same" simple interface anymore.

My point was not to create a binary world with simple vs. complex or single vs. mutiple task interfaces. It was simply to show that "simple" is relative to the task at hand. Filling out your taxes is never simple. Searching is. Google often gets praise for having a simple interface but this is in my opinion misguided. People then start extrapolating their success to mean that all interfaces should be simple. But their interface is good not because it is "simple" but because it allows the user to complete the task at hand with little thought. That's what is the most important.

> Don't expect someone working for the New York Times to be an advocate of "white space". They work very hard to fill all white space with content in the newspaper business.

Have a look at Khoi Vinh’s own website to get a better feel for his own design preferences. I think it is a much better example of the grid in action. It's not called "Subtraction" for nothing you know.

http://www.subtraction.com/

Also check out Jeff Croft's website for another beautiful example of elegant, simple, grid based design.

http://www2.jeffcroft.com/

I like the original Yahoo page better as well. It is easy to pick a section and check it out. The redesign is a mess and my eyes tend to get lost. I guess these guys are trying to make it look fancy instead of trying to make it usable.

"If you tried to use a Google-style interface for the task of seeing the daily news, it would fail miserably."

Excellent example. Even in this area Google manages to give you a simple interface while at the same time including a page full of information: http://news.google.com/

Note how they make use of the *full* page width. They use two simple grids, one for the top which contains a navigation box and leading headlines, and one for the bottom. The layout is extremely simple and easy to scan for items of interest. Once again, simplicity wins out over creative or complex designs.

Yahoo's page has been "portalized." The idea is that they box up each of the content areas and then they or their users can mix and match them at will. In this case they chose to make their boxes look like individual panels. They could have made them look more like the Yeahhh site.

I personally think the Yeahhh site is worse than the Yahoo even though I don't like Yahoo much either. It may be organic but it is hard to figure out what each of the sections is for and I end up having to read too much to identify what I'm looking at. I think it's the lack of proper gutter space that is most annoying to me.

I think a good re-read of "Don't Make Me Think!" is in order.

Original yahoo site looks good to me..

Thi reminds me of what happened to the Netscape home page. It used to be a simple page full of links in which it was easy to find stuff (a la Yahoo). Then someone redesigned it and made it horrible.

Now I have to say I like the NY Times site. It's excellent. So I'm not knocking the design skills involved. I just don't like the mock up redesign of the Yahoo site.

> Still, I do think Yeeaahh! is a much more interesting, organic, and pleasing grid design than the staid, boring grid of the current Yahoo! page.

Perhaps, but it does all that at the cost of functionality. Sections bleed into each other and become blurred. It doesn't matter much how nice a car looks if you can't find the gas pedal or, worse yet, can't tell it apart from the brake pedal.

Their ideas aren't wrong, but if they wanted to convince anyone, they should have redesigned something more dependent on a nice aesthetic or done a better job.

Did anyone notice that one of the article panels in the Yeeaah! design (the one with the American flag) is titled "America: How Awesome Are We?"

Heh.

until you can actually demonstrate those designs in table-less HTML (and not just a graphic comp) then, really, what's the point?

I must be dumb, but I just dont get wtf is supposed to be new with "grids". Sounds to me like someone just reinvented the concept of "columns" with a cooler new name.

So, web designers are finally being held to the standards print designers learn from the start? Slick.

While granted, your concept makes sense, you're too busy trying to shunt and portal users to other sections and other tasks when they want to focus on what they're doing right here and right now.

Take your Personals page for example.

The huge graphic is distracting and the thing which I want or need to use most has the least attention given to it. I could look at that page for a good minute and while I see all the wonderful things there, I feel sort of... How to phrase it.

"brooded" on by the graphical busyness.

Granted, I have a fairly good attention span but as we get older it's proven our attention spans are getting lower and lower and thus it's more important to be clear and utterly coencice.

This is basic basic basic stuff, Jeff which every Web-Designer should know. I'm kind of scratching my head as to why you need to remind web-designers of their 1-2-3's when they're interested in actually getting people to keep looking at their site and keep using it rather than fluttering away in favor of something that "just does" what they want.

While we have personal computers, the calculator apps we see wouldn't be near as popular without the numpad because it's such a direct un-distracted method of pumping in the information we want and it's important we don't lose sight of our original goals or make them any more complex than they really need to be.

I guess it comes off as maybe harsh but that's really my two cents and I think it has a lot to do with why so many people use Google as their home-page as apposed to a busy web-portal which will overwhelm them.

Layout is great but less really is more and provided your users are comfortable in their environment and not overwhelmed, they can still "see" your grid and still "know" how to seperate content without thinking conciously about it.

The Yeeaahh! website is primitive and horrible. The lack of gutter between elements and inconsistent use of font sizes makes it hard to find where one section begins and ends. It forces me to carefully scan every inch trying to find what I want.

The yellow bar across the top screams "look at me! I don't care what you came here for!" and may be acceptable for a sales or news website but not acceptable for a portal.

The overbearing Yeeaahh! logo? blech. If I know what website I'm already looking at, I don't need it screaming at me.

...

Great contribution, thanks.

I AGREE with the simple site being more efficient and looking cleaner. I don't even use yahoo anymore because of the usless buttons and links to nowhere. I appreciate Google's simple layout for there users,and like that their search page is just that.
That's what I was going for when I built borealimagery.com . It's designed to bring out the photography without ripping your eyes out with adds, grids, or flashy backgrounds.

Although I'll take all the suggestions I can get.

Yeah, in DotNetNuke, we call these Skins. They allow you to "grid out" the design of the whole site long before you have to worry about what content goes where and how the site will work.

The example sites are typical of today's web: portal sites crammed as full as possible with crap I don't want to read, all the items competing against each other for attention. Whether you use a grid or any other design technique, it's always going to look a complete mess.

Google's design works because it's clean and minimal and does what I want it to do: it lets me search. There are very few other sites like this.

As for CSS versus tables, it really doesn't matter to anyone except the designer. The average user neither knows nor cares. The average user is looking for information, end of story.

"Heat maps" of web pages and show that people mainly scan an inverted-L shaped part of the page. You could try making it easy for them by leaving out most of the other stuff.

CSS versus tables? That's comparing apples and oranges! For tables and tabular data use TABLE tags styled in CSS and for page grid layout use DIV tags styled in CSS. You could use tables insead of divs for layout and end up with less flexibility. So "tables vs css" is more like table-cells vs floating-carefully-sized-padded-divs.

I agree with this sentiment;

"The example sites are typical of today's web: portal sites crammed as full as possible with crap I don't want to read, all the items competing against each other for attention. Whether you use a grid or any other design technique, it's always going to look a complete mess."

I think Yeeaah looks slightly worse than Yahoo. Grids or no Grids, they both got it wrong.

Notepads based on famous grid alignments:

http://www.37signals.com/svn/posts/511-notepads-based-on-the-grids-used-in-famous-publications

Yup. And fonts, artwork, music, design, and grid layouts are important in a minimalistic layout.

As others have stated, the Yahoo site is a more or less nicer version of a site that is crammed full of junk. Before anyone scoffs at my use of the term "nicer version," check out http://www.5safepoints.com/ for an example of what truly awful junk filler design looks like. I work in the online traffic school industry, so I see a lot of this, and to me, Yahoo looks much better.

However, like many others who have posted comments here, I don't see the Yeeaahh! site as a stylistic improvement over Yahoo. Look carefully at the Yahoo page and you will see that it does have a subtle, well planned rectilinear flow. In the Yeeaahh! model, many of these rectilinear aspects are disrupted, disturbing the presentation and making it seem chaotic.

It seems to me that the Yahoo designers have succeeded in modulating the chaos as well as might be expected, whereas the Yeeaahh! designers have failed.

what is a URL?

I also dont like the stuffed grid view, maybe it has some advantage in seo point of view?

If you look on the developer/designer side, grids can be very useful as you can stick to fixed widths and heights! I think its very useful for webdesign use.