imasashi.net

新バンド用のサイト作って、ついでにレスポンシブでスマホ対応の練習した

dsp_thumb

ちゅうわけで、新しくジャズカルテット組んだのでサイト作ってみましたよ、と。

» Dynamite Satan plus

こう見えて、いちおうジャズバンドです。

本職がコーダーじゃないので、たまにコーディングしとかないといろいろ忘れそう、
ということでリハビリがてらやってみました。
全く情報量が無いなりに、いろいろと新しいことに手を出そうという目論見もあります。

  • とにかく単純でシンプルなの作りたい。画像は使わない。
  • 静的サイトでの、phpによる共通テンプレ化
  • 効率的なcssの組み方
  • 生まれて初めてのサブドメイン
  • レスポンシブデザインでスマートフォン対応

メインは最後にあるレスポンシブです。最近仕事で使ったんで、プライベートでもいっちょやってみようかと。レスポンシブについては今更わたくしが説明するのもアレなんで、こういったサイトをご覧頂ければと思います。

» CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

viewportのスケール指定とかは、このサイトが詳しく検証して下さってます。

» Viewport [iPhone生活]

レスポンシブでのスマホ対応の長所と短所(私見)

検証もしてないし、特に情報源も無いですが、思いつくままに。

長所

  • トラフィックが一元化できる。なので、ディレクトリを分けるよりSEO対策の効果が期待できる(多分)。これ言うとクライアントは結構うなずいてくれる。
  • ソースが一元化できる。なので、リンクや要素のチェックが1回で済む。制作目線でいくとかなりありがたい。
  • 実装側にとっては、パーツごとにPCとスマホ表示の対応ルールさえ決めれば、あとは勝手にスマホレイアウトになる(1ページずつ確認する必要がない)。

短所

  • 例えばGoogle Analytics入れてる場合でPCとスマホでのアクセスを別々にカウントしたい場合は設定がめんどくさい。OSとかブラウザで判別かけるより、ディレクトリで判別する方が明確、ということ。
  • 対応可能な技術ベースを低い方(スマホ)に合わせないといけない。
  • 長所の裏返しだが、ソースが一元化されるので、PCとスマホそれぞれに対して最適化されたコードとならない場合が多い。
  • PCに比べてスマホの方が表示要素は少なくなるケースが圧倒的だと思うが、未表示としてもソースは読まれているわけで、その分不必要に重くなっている(たぶん)。