メリット
-
運用ベースであれば1箇所変えれば全デバイスに対応できるので、更新は楽（記事の内容だけとか）
-
googleがレスポンシブを推奨しているため、SEOに強いらしい
-
スマホファーストな設計ができる
-
端末の大きさに影響されなくなる
-
URLがおなじになる
-
デバイス判定が不要
デメリット
-
複雑なサイトになるほど、対応が難しく、設計に負担がかかる。
-
PCサイト向けのファイルや大きな画像も一緒にダウンロードする
-
1つのソースで複数のケースを管理するので、コーディング難易度高め、運用難しめ、テスト項目増加
-
テストは（ブラウザ）ｘ（スクリーンサイズ）ｘ（デバイス出し分け）
-
IE8以下では使えない
-
最適化されたスマホページには適わない
-
開発コストは5倍とか言ってるひとも
-
PC/スマホで
-
それぞれに最適化した画面にできなくなる（最大公約数を目指す）
-
画面を同時に（スマホを先に）設計して、同時に開発が必要になる
-
デザインをガラッと変えるなら、個別に作った方が良い
-
-
PCのソースも読み込んでしまうので、ユーザの環境（3G）とかだと重くなる
-
スマホでPCの画面を見れなくなる（viewportの切り換えモジュールを作ればいけるかも）
-
1ソースで1サービスを扱うとCSSが膨大になりそう
注意点
-
サイト設計時点に決定しなければ利用は難しい
-
かっこいいからでつくってはいけない
-
工数削減のための取り組みではない（ではなに？）
-
スマホから設計し、スマホの拡張がPCという状態であること
-
デバイスきりかえをした後のページはどうなるかの検証も必要
-
PCとスマホで利用シーンが違うサービスは、それぞれ作った方が良い場合も
-
あくまでデバイス毎の見た目の違和感や読みやすさ、操作性を改善
-
ブレイクポイントは、「320px、480px、600px、768px、800px、960px、1200px」
-
viewportを指定しないとだめ
どういうサイト向け？
-
単機能のサイトやコンテンツ量の少ないサイトに向いている
-
大企業よりも中小企業が利用することが多い
-
モダンブラウザだけ対応でも良いもの
感想
-
HTML5ではなく、HTML4.01でレスポンシブは大丈夫？
- 一応HTML5が推奨。でも動きそう
-
cssは分けた方が良い？どっちでもいい？
- メディアクエリでcssを分けるか、pcだけ上書きにするか、とか自由。
- 個別最適化するなら通常の作り方、中間点で良いのであればレスポンシブ。
- 悪いケースで、同じHTML群を別の場所に書き、メディアクエリで出し分けるやつ。そういったケースを多く作るならレスポンシブやめることも検討必要。
-
IE8以下はもうサポートしない方向で、対応しないで良いと思う