レスポンシブWebデザインとは

レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。※ Responsive Web Designは、省略してRWDと呼ばれることもあります。

提供元：developers.google.com

スマートフォンの誕生

レスポンシブWebデザインが注目される背景は、スマートフォンやタブレットの登場です。スマートフォンの急速な普及により、Webサイト制作の現場では、PC向けの従来型のWebサイトに加えて、スマートフォンの小さな画面でも見やすいように設計されたWebサイト「スマートフォン専用サイト」が登場しました。

“振り分け”型スマートフォンサイト

スマートフォンで閲覧できるすべてのサイトがレスポンシブに対応しているのではありません。「振り分け型」を採用している公式サイトも多く存在しています。振り分け型スマートフォンサイトは、ユーザーエージェント（UA）で振り分けることで、多くのデバイスやスクリーンサイズに対応する方法です。JavaScriptやサーバーサイドでユーザーエージェント情報を読み出し、デバイスの種類に応じて用意した専用のWebページ（HTML）へ移動させる手法です。この振り分け型を採用しているサイトは、PC用とスマホ用とそれぞれに(HTML・CSS)個別に制作しておく必要があります。

レスポンシブWebデザインの注目

OSやデバイスをUAで判別してそれぞれのサイトへ振り分けるアプローチに対して、レスポンシブWebデザインでは、あらゆるデバイスに対して共通のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準に CSSだけを切り替えてレイアウトを調整します。
小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。

レスポンシブウェブデザイン（元々は Ethan Marcotte が A List Apart で定義した概念）が採用されたと言われています。