It's not the transition from one layout to another that is graceful. Under normal circumstances, you're not resizing your browser to use a site. What's graceful is the fact that the layout is well suited for each and every resolution you throw at it, whether you're on a full-screen desktop or a mobile phone.

The Globe developed (and released!) an incredibly neat piece of software to let them preview changes on 10+ devices simultaneously.

https://github.com/marstall/shim

You can see it in use very briefly from 1m 18s in:

http://www.boston.com/video/viral_page/?/services/player/bcp...

They should release a video of shim in action. A video explains it much better than words can. (I was lucky enough to get a sneak peak of all their new stuff a little while ago.)

Yes, but it's purpose isn't to resize on the fly as you change your browser window. It's to have one set of HTML that reflows to your device correctly depending on the viewport width. I just checked it on an iPhone 4 and iPad (both portrait and landscape) in addition to a desktop, and it works astonishingly well across screens sized from 3.5" to 27".

Are the media queries a little laggy? Sure. I'll tolerate that over having to hunt down a stupid "view full version"/"view mobile version" link (and I'm sure some optimizations can be done).

I think this will set a new standard for the term "mobile-friendly"

Abrupt in what browser? Chrome doesn't feel abrupt.

For me it doesn't render properly in firefox. It never seems to make it into the single column mode. Chromium on the other hand, smooth like butter.

yikes, bad karma, i was half joking with the negativity. good iOS apps have nice animated transitions between portrait and landscape.

I don't think media queries offer you that functionality, and I can't think of a way to do it within JavaScript. How would you do it?

I don't know much about javascript, I've just seen stuff like this -> http://masonry.desandro.com/demos/animating-jquery.html

Resize that page.

Interesting trick, but I don't think (could be wrong) that's applicable in this instance. I noticed immediately that this doesn't work in the place where you're most likely to see a resize/dimensions-change event: a tablet or phone. When you switch orientation on either, it just resizes the entire page itself. So it's not super useful in the place that most needs it.

Also, though this is much more subjective, I think that really looks terrible. Too much stuff is moving.