レスポンシブウェブデザイン
何?
何?
一つのHTMLで複数のデバイス(ウィンドウ幅)に対応する実装方法
ウィンドウ幅により、デザインが切り替わる
大体2~3段階
歴史
記憶調べ
スマートフォンの流行
デスクトップ(当時。今はラップトップ)とスマートフォンで別ページを出しわける
様々なサイズのデバイスがたくさん登場
iPhone、Androidスマホ、iPad、、、
iPhone向けのページがAndroidで微妙な感じの見た目になる、など
出し分けの限界
最初から限界だったとも
レスポンシブウェブデザインの登場・流行
何故?
モバイル、タブレット、ラップトップで見やすさ、使いやすさが違う
SEO的に正しくない出し分け
-> Googleもレスポンシブを推奨
モバイルとラップトップで見やすさ、使いやすさが違う
ラップトップ用に作って、それを小さい画面で表示するだけでは使い辛い
文字が小さくなるとか
サイドバーがある場合、コンテンツ領域が狭過ぎて見辛いとか
ボタンが小さくて、マウスなら押せるが指だと複数同時にタップしちゃうとか
どうやって?
原則リキッドデザイン
決めたウィンドウ幅(ブレイクポイント)になったら別の形のリキッドデザインにする
文字サイズやボタンサイズなどをリキッドにするかどうか問題
自由なレイアウトのやつをどうするか
デバイス間で縦横比が一致しない
誰が?
きめる?
考える?
アクセシビリティ
僕はこう考えます的な
ウェブは色々な環境でアクセスされる
でかいモニター、パソコン、タブレット、モバイル、リストバンド