Movietally and Understanding Web 2.0 Design

haym37 writes "Ajit Jaokar over at the Open Gardens blog has an article up on a growing service called movietally. The service allows users to tag the movies they've seen and receive automatic recommendations for movies they might like to see. He describes it as a 'textbook case of web 2.0 design' and goes into detail about the fundamental principles of web 2.0 design and how movietally relates to them. The interesting part about all of this is that, according to the article, the founder is only fifteen years old and created it in under a month."

Comments

Blog Link

[rjstanford]

Since the summary doesn't see fit to actually post a link to the FA: enjoy.

last.fm anyone?

[MaliciousSmurf]

I am guessing he cribbed the idea from the likes of http://last.fm/ , a music site which has a similar system. (Editorialization: Except better)

Re:The important point...

[Osty]

I wanted to use a modern, CSS-based liquid layout. So I bought a book, and dove in.

There's your first problem. No book is going to give you all of the latest techniques for doing "cool" things with CSS. For that you need to poke around online at places like CSS Zen Garden, A List Apart, Liquid Designs, etc. If you must buy a book, a pocket reference is the best way to go (and even that really isn't necessary, since you can find good references online).

It seems like CSS does OK for fixed layouts but if you want to have a 200 pixel left sidebar and leave the rest of the page for content, I just can't figure out how to do it and have it look as nice as a simple table-driven layout.

Odd, I've done exactly that using a non-table layout, and I certainly didn't invent the technique. It's not purely semantic, as you end up with a couple extra divs to get your layout right, but it's a damn sight closer than table layouts. In fact, your example is actually quite trivial, compared to something like a three-column layout with bounding fixed-size sidebars around a liquid middle (there's a reason that's called the Holy Grail of CSS-based design).

Worse, after playing around with it I could not see where the advantages were over tables. Tables work, they don't take long to code up, and I feel I understand them completely with minimal effort. It seems like with a CSS layout, you waste a lot of time fighting bizarre browser compatibilty issues, while if you use tables, they "just work", far as I can tell -- and I've tested in IE, Safari, FireFox and a few others.

Oddly enough, movietally's table-based layout for its rounded-corner "Discover" box is broken on IE7 (the corners don't line up correctly). So much for "tables work". I'll grant you that CSS-based layouts can run into some funky cross-browser issues, but 9 times out of 10 the problem is not with the layout but with the designer who demands pixel-perfect magazine-like layouts in a medium that was never meant to do that (if you want that, build a PDF). If you get over your obsession for having everything lining up just so and instead focus on making the page accessible and understandable while still looking good, you'll find that CSS is often a lot easier and nicer to work with than table layouts. Besides, it makes it quite a bit easier to give your page a makeover to keep it fresh without having to recode everything (CSS Zen Garden is the prime example, but look at what Slashdot did with the recent site skinning contest -- that was limited to only CSS manipulation, which would've been impossible had Slashdot stuck with its outdated table-based design).

Nobody's saying that tables aren't useful. We're just saying that they should be used semantically. If you have some tabular data you want to display (say, a calendar), knock yourself out with tabley goodness.

Re:Textbook case? Of what?

[BrynM]

Since when did Web 2.0 = forgetting all about usability and going with 'it looks minimal, so therefore cool'

It may look minimal, but it's a monster of table driven madness. Viewing the source reveals that they are thinking of W2.0 in the marketing and social sense only. The page validation shows that their programmers don't really give a care what HTML is and how relates to W2.0 in the first place. There's not even a doctype declared. A textbook of W2.0 design my ass. Movietally is more of a textbook example of jumping on a marketing bandwagon and ignoring how to actually code symantically.