kyaido/RWD.md

## RWD.md

      
    Raw
  

              RWD.md
            
          
    むずかしそうで難しくない、ちょっと難しいRWD


RWDとはなにか
なぜRWDか
RWDのメリット
RWDのデメリット
どうしたらRWDになるか
どう実装するべきか
モバイルファーストと向き合う

歴史

まずPCサイトがありました。
いつからかスマートフォンサイトが誕生しました。
初期のスマートフォンサイトは横幅が大体320pxと480pxを考慮しておけば良かったので、PC用・スマホ用サイトをそれぞれ用意して、
ユーザーエージェントを判別してそれぞれのサイトに振り分けをしていました。
時がたち、スマートフォンの横幅も、主にandroidのせいで色々な横幅のものが出てきました。
またiPadなどのタブレット端末も市民権を得たため、実に多様な横幅のサイトを作成する必要が出てきました。
それぞれの横幅用にサイトを用意するのは時間がかかるので、ひとつのサイトで全部の横幅に対応させようという考えが、RWD。
メリット

ひとつのソースですべての端末に対応するので運用コストが低くなる（ことが多い）
URLが分散しない（share、アクセス解析、SEO）
未知のデバイスへも対応が可能
Googleが推奨
デメリット

構築・検証コストが高い
構築作業の切り分けができない
複雑なことができない、デザイン上の制限ができる、諦めも必要
容量が重くなりがち
作成する

viewportを指定する
PC用にページを作成する
可変することを意識する
画像をフルードイメージにする
メディアクエリを駆使してそれぞれのレイアウト用にスタイルを追加・修正していく
参考

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました

http://www.html5-memo.com/html5/responsive/
ASCII.jp：レスポンシブWebデザインとは (1/5)｜ゼロから始めるレスポンシブWebデザイン入門

http://ascii.jp/elem/000/000/697/697463/
レスポンシブ・ウェブデザインでの CSS コードの書き方

http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html
レスポンシブWebデザインのメリット・デメリットをわかりやすく！解説

http://www.coprosystem.co.jp/tipsblog/2013/06/28.html
レスポンシブWebデザインのメリット／デメリットをできるだけ中立的に検証してみた

http://katoshun.com/blog/rwd-20130103.html
年寄りを困らせる「レスポンシブWebデザイン」

http://consult.nikkeibp.co.jp/staffroom/archives/20140218_384/