随分と前になるのですが、銀座のApple StoreにてレスポンシブWebデザインについての講演を聞きまして。
レスポンシブWebデザインってのは、MediaQueryを使ってレイアウトを制御して、ひとつのHTMLファイルでスマホ版、PC版のデザインを実現しましょうという技術ですね。
詳細は@amachangさんの「MediaQueryまとめ」を見てもらうのが良いかと思います。

直近の業務で使う事はまずないだろうとは思いながらも、colissさんの「2011年のウェブのトレンドを振り返る」にもあるように、2011年のトレンドのひとつとしても挙げられるような技術なので、ちょっとやってみようと思い立ってみたわけです。

HTML・CSSの設計

俺の悪いとこなんですが、無計画すぎましたね。
スマホ版に変換するにあたって、PC版でのHTMLの設計やなんかがズボラだったので、結構強引に変換してたりします。ちゃんとしたエンジニアさんが見ると無駄なことやってんなーって思われそうなとこが散見気味。
これから作るって時には、柔軟でシンプルなHTML設計を心がけたいところ。
まぁ、今回やりたかった、ウィンドウサイズを小さくしていくとカタッとレイアウトが変換される気持いいアレを見たいっていう欲求はクリア出来たので良しとする。
iPad版…は気が向いたら…。

実は、ブログ書くモチベーションあげたいからリニューアルしよう！ってのと、じゃぁついでにレスポンシブやってみよう！てのと、スマホ版作るならCSSアニメーションとかもぶっこんでみよう！って目的が場当たり的に湧いてきたもんで、こんなことになったわけです。
Webだけじゃないけど、衝動的なモチベーションてのも大事だけど、冷静で緻密な設計力ってのも大事ですよね。

せっかく作ったので、スマホ持ってる方はスマホでも見てみて貰えれば。
あと、ウインドウを小さくしてカタッとするやつもね。
デザインのクオリティに関してはノーコメ。