Responsive Web DesignとはMediaQueryで
ウィンドウ幅によってcssを出し分けるデザイン方法です。
基本的に、PC、タブレット、スマートフォンで分けています。
あくまで幅なので、PCで見ても、幅を狭くすればスマホ向けのデザインが見れます。
以下、まとめサイトです。
▽Responsive Web Design: 50 Examples and Best Practices
http://designmodo.com/responsive-design-examples/
▽Media Queries
http://mediaqueri.es/
おもしろいけど、UI的にちょっとびっくりしますね。
私的に考えられるメリット/デメリットを出してみました。
メリット
・cssを作るだけで、デバイスごとに対応できる
・HTMLは1つになり、管理しやすくなる
・更新個所が減り、運用の時間が減る
・更新時にデバイス別のHTMLと差異が出ることはなくなる
デメリット
・HTMLを組むときにしっかり先を見通す必要がある
・PCで見ても幅によってスマホ向けになってしまう
・スマホで見たときにPC向けページは見れない
・レイアウトが大幅に変わるときは困難
・デバイスごとでモジュールを出し分ける場合は、display:none;を使う必要がある
こちらのような、ボックスが何個も並んでるデザインのサイトには適しているように思います。
▽Mr. Simon Collison
http://colly.com/
構造的に無理がなく、幅によって見やすくしてくれているというかんじですね。
Responsive Web Designは、
サイトの構造や、運用の頻度/内容によって熟慮した方がよさそうですね。
Responsive Web Designとは
Webデザイン