レスポンシブWebデザインの設計

レスポンシブWebデザインは、制作の前の設計が大切です。

どこまで対応するかを決める

すべてのデバイスとOSとブラウザ、そしてその各バージョンに対応することは事実上不可能です。どこまで対応するのかを事前に決めておくことで、以降の作業がやりやすくなります。

コンテンツを絞る

スマートフォンではコンテンツが多すぎると表示に時間が掛かり、アクセシビリティに影響します。本当に必要なコンテンツのみ選択することが必要になってきます。

スマートフォンの時に”display:none”でコンテンツを非表示にする場合がありますが、この場合もレンダリングされるので、コンテンツを表示しているのと速度は変わりません。

参考サイト

This is Responsive.

色々なデザインが用意されており、実際にウィンドウサイズを変えることで、レスポンシブ対応のパターンとそのコードを確認できます。

bradfrost.github.io

 

Responsivator

 レスポンシブになっているかを確認できるサイトです。

responsivator.werstnet.com

 

URLを入力すると以下のサイズの表示をしてくれますので、レスポンシブになっているかどうかを確認できます。

  • 320 x 480 Phone (portrait)
  • 480 x 320 Phone (landscape)
  • 480 x 800 Small Tablet (portrait))
  • 800 x 480 Small Tablet (landscape)
  • 768 x 1024 Large Tablet (portrait)
  • 1024 x 768 Large Tablet (landscape)
  • 1280 x 800 Desktop