Let's Build a Grid

Khoi Vinh, the design director for the New York Times, explains how essential grids are to web design in his SXSW presentation with Mark Boulton, Grids Are Good (Right?).


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html

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 :frowning:

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.

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.

I prefer the Yahoo site, much simpler.

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

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.

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.