レスポンシブWebデザインの設計
レスポンシブWebデザインは、制作の前の設計が大切です。
どこまで対応するかを決める
すべてのデバイスとOSとブラウザ、そしてその各バージョンに対応することは事実上不可能です。どこまで対応するのかを事前に決めておくことで、以降の作業がやりやすくなります。
コンテンツを絞る
スマートフォンではコンテンツが多すぎると表示に時間が掛かり、アクセシビリティに影響します。本当に必要なコンテンツのみ選択することが必要になってきます。
スマートフォンの時に”display:none”でコンテンツを非表示にする場合がありますが、この場合もレンダリングされるので、コンテンツを表示しているのと速度は変わりません。
参考サイト
This is Responsive.
色々なデザインが用意されており、実際にウィンドウサイズを変えることで、レスポンシブ対応のパターンとそのコードを確認できます。
Responsivator
レスポンシブになっているかを確認できるサイトです。
URLを入力すると以下のサイズの表示をしてくれますので、レスポンシブになっているかどうかを確認できます。