1つのウェブサイトで、様々な画面に対応。レスポンシブデザインは、単一のレイアウトを様々なデバイスのサイズや向きに合わせて調整します。この用語は、柔軟なグリッドや流動的な画像に関する以前のアイデアを基に、2010年にイーサン・マルコットによって提唱されました。デスクトップ用とモバイル用に別々のサイトを作成する代わりに、デザイナーはビューポートの幅に基づいて自動的にレイアウトが変化する単一のコードベースを作成します。

3つの技術的な要素が、この仕組みを支えています。流動的なグリッドは、固定ピクセルではなくパーセンテージを使用するため、列が伸縮します。柔軟な画像は、コンテナ内で拡大縮小します。メディアクエリは画面サイズを検出し、定義されたブレークポイントで異なるCSSルールを適用します。デスクトップの3列レイアウトは、スマートフォンでは1列に縮小され、ナビゲーションはハンバーガーメニューに移動します。目標はピクセル単位での完璧な制御ではなく、スムーズな適応です。

コアテクニック

• パーセンテージに基づいた流体グリッド。
• 柔軟な画像とメディア。
• 定義されたブレークポイントにおけるメディアクエリ。
• モバイルファーストのコンテンツ優先順位付け。

レスポンシブデザインは今や標準的な手法となっています。ユーザーは、スマートフォン、タブレット、ノートパソコン、テレビなど、どのデバイスでサイトを開いても正しく表示されることを期待しています。