レスポンシブデザインのメリットデメリット

メリット

  • 運用ベースであれば1箇所変えれば全デバイスに対応できるので、更新は楽(記事の内容だけとか)
  • googleがレスポンシブを推奨しているため、SEOに強いらしい
  • スマホファーストな設計ができる
  • 端末の大きさに影響されなくなる
  • URLがおなじになる
  • デバイス判定が不要

デメリット

  • 複雑なサイトになるほど、対応が難しく、設計に負担がかかる。
  • PCサイト向けのファイルや大きな画像も一緒にダウンロードする
  • 1つのソースで複数のケースを管理するので、コーディング難易度高め、運用難しめ、テスト項目増加
  • テストは(ブラウザ)x(スクリーンサイズ)x(デバイス出し分け)
  • 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以下はもうサポートしない方向で、対応しないで良いと思う