レスポンシブデザインとは
レスポンシブウェブデザイン (英: responsive web design、 RWD) はウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、そのタスクに含まれる点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部として閲覧者の「近さ」をRWDの延長部分と見なしている。ニールセン・ノーマン・グループは、「コンテンツ、デザインそしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。
RWDでデザインしたサイトは、比率ベースのフルードグリッド（英語）、フレキシブルイメージ @mediaルールの拡張であるCSS3メディアクエリを以下のように使用することで、レイアウトを表示環境に適応させる。
- フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、百分率等の相対単位を使用する。
- 可変サイズの画像もコンテナ要素の外にはみ出さないように、相対単位を使用して表示する。
- メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用できる。
今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めるため、RWDはますます重要になっている。そのためGoogleは2015年にモバイルゲドンを発表し、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。これには、モバイル機器に優しくないサイトが最終的に不利になる効果がある。RWDは、ユーザーインターフェースプラスティシティの一例である。
関連概念
モバイルファースト、控えめなJavaScript、プログレッシブな拡張
いずれもRWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため推奨される方法は、グレイスフル・デグラデーション（英語）に依存して複雑で画像を多用したサイトを携帯電話で動作させるのではなく、基本のウェブサイトを制作してからスマートフォンやパソコン用に拡張することである
ブラウザ、デバイス、モバイル機器推定に基づくプログレッシブな拡張
ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、ブラウザ (ユーザーエージェント) 判定 (別称「ブラウザ・スニッフィング」（英語）) とモバイル機器判定（英語）[20][23] の2つの方法により、(プログレッシブな拡張の基礎として) HTMLやCSSの特定の機能がサポートされているかどうか推定される。ただし、こうした方法の信頼性はデバイス能力データベースを併用しない限り完全ではない。