Responsive Web Designとは？

閲覧環境に応じたデザインを適用する、という考え方。

例えば、PC・スマートフォン・タブレットでは以下の様な違いがある。

観点	PC	スマートフォン	タブレット
ユーザーの状態（ざっくりと）	会社や家庭で使う。座って使う事が多い。	移動中に使う。屋外で歩いているかもしれない。急いでいる。思いついた時にサッと出して使う。	家庭やカフェで使う。くつろいでいる。複雑な入力はしたくない。
画面の大きさ	広い。幅は1000px以上ある場合がほとんど。参考：2011年のとある記事	狭い。幅は320pxから1024px程度まで様々。	結構広い。幅は1000px以上ある場合がほとんど。各種デバイスの値はここ。
操作方法	マウスとキーボードで操作。	画面を指でタップしたりスワイプしたりピンチしたり。
ポインタ	マウスポインタがある。	マウスポインタはない。
ブラウザ	IE8以下など、古いIEがアレだから困る。	webkitベースのブラウザがほとんど。IEは10以降だけに対応すれば良い（Windows8）なので、あまり心配がいらない。
css	IE8以下に対応するならjavascriptでなんとかする。css-PIEやhtml5.jsなど。	html5、css3が安心して使える。hoverは使えない（ポインタが無い）。
Flash	2012年末では、まだ使える。	iOSでは使えない。Androidは4.0以降で標準対応をやめた。Windows 8のIE10はFlashを内蔵している。
javascript	jQueryをはじめ、基本的に何でも使える。	javascriptはブラウザ依存なので動作にはバラツキがある。2012年末時点では、まだ非力なマシンが多いので、PCに比べて動作が重い。
画像	jpag,gif,pngなど。svgも使える。AppleのRetina Displayは1インチあたりに表示できるピクセル数をギュッと押し込んで増やしたもの。

これまでの振り分けとの違い

PCと携帯を判別したり、OSやブラウザを判別して、別のURLに飛ばしていたのがこれまでの「振り分け」。別のhtmlを用意しておく必要がある。

Responsive Web Designでは、media queryという仕組みを使って、閲覧環境を取得し、同じコンテンツ（htmlやphp）をCSSで違う見た目にする。

One Contents multi useとも言える。逆に、閲覧環境ごとに別のコンテンツを見せたいのならば、これまで通りの「判別」をして別のURLに誘導する方が良い。

media query の使い方

色々なまとめがあるので見てみましょう。例えばココ

headタグ内に以下のmeta viewportタグを貼る

<meta name="viewport" content="width=device-width">

cssを以下の様に{ }で分ける。この分ける条件の事をブレイクポイントと呼ぶ。

@media screen and (max-width: 1000px) {
	#container{
		width : 95%;
	}
}
@media screen and (max-width: 760px) {
	/* 幅760px以下のstyleを書く */
}
@media screen and (max-width: 480px) {
	/* 幅760px以下のstyleを書く */
}
@media screen and (max-width: 320px) {
	/* 幅760px以下のstyleを書く */
}

基本的なスマートフォン向けデザイン

AppleのiOSヒューマンインターフェイスガイドライン。

この辺も読んでおこう。

指でタップできる様にリンクやボタンを大きくする。最小でも44 x 44pxを確保。
スクロールが容易なので、横には溢れないように1カラムデザインにして縦長のページにする。
コンテンツに必要な画像は1カラム内で幅いっぱいに見せる。
ページタイトルをクリックすれば良いので「ページの先頭へ戻る」リンクは不要。
大きなヘッダ画像やロゴ画像は邪魔なので小さくシンプルにする。
グローバルメニューやサイドメニューは隠すか、ページ最下部にまとめる。
目的のコンテンツにたどり着きやすい様に、サイト内の動線を整理する。
スムーズな読み込みの為に、装飾目的の画像はできるだけCSSで作る。例えばボタン類などもCSS3で充分。
スムーズな動作の為に、アニメーションもできるだけCSSで作る。