レスポンシブ・Webデザイン

スマートフォンが流行り出して、最近一段と注目を浴びているレスポンシブ・Webデザイン、大雑把な構築の流れ。

1. 各レイアウト設計・デザイン
・画面設計時にMediaQueryの指定を含め、画面サイズごとの挙動やレイアウトは決めておく必要がありますね。デザイン時もレスポンシブなデザインを意識して作る必要あり。

2. リキッドレイアウトで構築
・最初は固定レイアウト(px)で作成し、後から%に変換する方法が簡単らしいです。

3. MediaQueryの指定/viewport設定
・MediaQueryは画面設計時に忘れずに決めておかないといけません。
・viewportはリキッドレイアウトならwidth=device-widthが良いようです。

4. 画像の調整/文字サイズの調整/レイアウトの調整
・画像をFluid imageにする場合、スマートフォン用の低解像度画像を用意するのが理想だって・・・。
・文字サイズは画面サイズが小さくになるにつれて小さくするとか。確かに。
・各ブロック内のレイアウトも変更（画面サイズが小さくなるとナビゲーションが縦並びから横並びになるとか）これも画面設計時に決めておくのでしょうね。

いろいろ考えることが増えますね。