coolest webpage auto-adjusting layout ever

[Darren Dirt]

http://web.archive.org/web/20070929141144/http://www.nique.net/issues/2005-11-18/entertainment/2


If you resize your browser window to be really wide but not tall, watch what happens. Then adjust to be really tall and not very wide. Then try very wide and very tall.

Now that?s the way a "newspaper" website should handle different display sizes!




edit: doesn't seem to work correctly in FF, and I noticed it's just a simple "window.onreload=location.reload" so it's all about the CSS doing some pretty intelligent re-arranging of content. So a slight blink as it refreshes, but a cool result imo.

[Mr. Analog]

Man, if you think that's cool you gotta check out Twitter Bootstrap, it has resizing features and a whole lot more:

http://twitter.github.com/bootstrap/

[Darren Dirt]

I know nowadays there's tons of awesome cool gadgets out there, just found this when looking into a musical standup comic from his Wikipedia page, and realized that "it just works" in contrast to TONS of Big Name Corporations/NewsSites that I've seen over the years. If some little magazine/localnews type of website can auto-layout intelligently, why can't Microsoft or CNN? 

[Lazybones]

http://web.archive.org/web/20070929141144/http://www.nique.net/issues/2005-11-18/entertainment/2


If you resize your browser window to be really wide but not tall, watch what happens. Then adjust to be really tall and not very wide. Then try very wide and very tall.

Now that?s the way a "newspaper" website should handle different display sizes!




edit: doesn't seem to work correctly in FF, and I noticed it's just a simple "window.onreload=location.reload" so it's all about the CSS doing some pretty intelligent re-arranging of content. So a slight blink as it refreshes, but a cool result imo.

? Tried it in IE and Firefox ? is that the right link? It looked like crap even with the way back banner killed off.

[Thorin]

Okay, so I tried it in Chrome, and it doesn't look so hot to me.

Wide and Short: Page 1 of Infinity?  There appears to be something wrong there!  I turned off the Wayback banner to show that there was no actual text on the page.

Skinny and Tall: No text visible, just part of a headline and then white.  Not all that good either, as you would expect the text at least to align on the left, no?

Wide and Tall: Why is the picture way over on the right with all that white space in between?  Is it an advertisement?  Should I ignore it?

Yeah, so, I dunno what you're so excited about with this page.  I'd much rather see them center the content and let me scroll up and down, since every mouse in existence these days appears to have a scroll wheel (and touch devices including laptops are now jumping on the two-finger-slide-to-scroll, which is actually super easy).

Maybe they're just really trying to make it look like a newspaper with variable-spaced font and multiple columns.  But that's like trying to make a TV show look like the radio show it's based on.

[Mr. Analog]

Try resizing the Twitter Bootstrap page, it condenses menus, alters buttons and layout on the fly

One of my co-workers put together a cool demo yesterday, he used it in this election dashboard site (he built it over a weekend!)
http://abvoteresults.mastermaq.ca/

Pretty neat stuff!

[Lazybones]

Try resizing the Twitter Bootstrap page, it condenses menus, alters buttons and layout on the fly

One of my co-workers put together a cool demo yesterday, he used it in this election dashboard site (he built it over a weekend!)
http://abvoteresults.mastermaq.ca/

Pretty neat stuff!

That dynamic layout isn't bad.

[Mr. Analog]

Try resizing the Twitter Bootstrap page, it condenses menus, alters buttons and layout on the fly

One of my co-workers put together a cool demo yesterday, he used it in this election dashboard site (he built it over a weekend!)
http://abvoteresults.mastermaq.ca/

Pretty neat stuff!

That dynamic layout isn't bad.

It's the best I've seen in a long time, and it's compatible with JQuery

...and if you want to get up to speed with JQuery...

http://www.codeschool.com/courses/jquery-air-first-flight