ウィンドウの大きさによってレイアウトが変化するサイト

ちょっと面白いページを見つけたので備忘録がてらの紹介です。

Nokrev という、Jeff Wheeler 氏の運営するサイトなんですが、どこが面白いって、ブラウザのウィンドウをグイっと小さくしていくと、ある大きさでそれまで４ペインだった画面が１ペインにスッと切り替わります。おおっ、これはスゴい！何度やっても痛快。(^o^;)

つまり..

1
2	3	4

こういうレイアウトがスッと、

1
2
3
4

に切り替わるわけですね。(X)HTML のマークアップがレイアウトに関係なく直線的に行われるものという考え方を視覚的に確認できるとても良いサンプルです。

早速、どういう仕掛けになっているのかをチェックしてみると、どうやら JavaScript で CSS を切り替えているようです。
http://www.nokrev.com/design/res-functions.js

（以下、抜粋。）
function checkBrowserWidth()
{
　　var theWidth = getBrowserWidth();
　　if (theWidth > 940) {
　　　　setStylesheet("Regular Layout");
　　}
　　else {
　　　　setStylesheet("Low-Res Layout");
　　}
　　return true;
}
いかがでしょう？ブラウザの幅が 940px 以上の時とそうでない時とで読み込む CSS を切り替えているわけですね。CSS だけで実現している訳ではなかったのがちょっと期待はずれで残念ですが（っていうか、さすがにムリかな..）、それでも充分 UI として面白いものを見せてもらいました。ユーザビリティの応用可能性としては充分だと思います。

最近、UXGA のような巨大な画面で Webページを見る機会がちょくちょくあって、800x600（というより実質的には 780x560）の固定レイアウトに限界を感じつつあります。さりとて 800x600 → 1024x768 に表示サイズを変更しただけでは根本的な解決にはならないので、やはりリキッドレイアウト（ウィンドウサイズに応じてページが伸縮するレイアウト）に移行していくのがいちばんなのかなと思い始めているんですが、リキッドレイアウト（ましてテーブルに依存しない CSS ベースのレイアウト）は固定レイアウトと比べて難易度が非常に高いので、最近、海外のサイトを中心にあちこち波乗りして参考になるサンプルを集めている、という次第です。（どうでもいいことかもしれませんが、どうして国内の企業系サイトは Flash を使ったサイトが多くて参考になるものが少ないんでしょうね。Flash が悪いとはいいませんけど、もう少し情報の転用やリファクタを念頭においた方がいいんじゃないかと思う今日この頃です。SEO や制作コストだけが Web標準準拠のメリットじゃないでしょうに。）

何はともあれ、日々勉強ですね。