「モバイル用Webサイトをどれだけキチンと作ってあるか」が叫ばれる昨今
Webサイトの制作側としてPC用サイトとモバイル用サイトをどう分けるかが悩みどころです。
クライアントへの説明がね(´・ω・｀)
そもそもどうやって分けるのか
大雑把に分けるとすると別アドレスでモバイル用ページを作る方法と1つのページを両方（PC&モバイル）に見せる方法となります。
両方が一長一短で良いとこ悪いとこがあったり、どちらか片方しか出来ないわけでもなかったりするので
説明が面倒くさくなります。
別アドレスでモバイル用ページを作る方法（振り分け）
navigator.userAgent.indexOf～を使う方法。
javascriptを使ってユーザーエージェントによる振り分けを行います。
利点としてはそれぞれの専用ページに誘導することでそれぞれのユーザーの一番見やすい形（であろうレイアウト）に見せる・誘導することが出来ます。
欠点としては2個のサイトを作らないといけないことサイト数は単純に倍です。修正が出ればそれも倍です。
もう一つの欠点はAgentが新しくなったときにドキドキしないといけないこと
例えばAgentとして「iPhone」と入れた場合、同じiPhoneでも画面の小さいSEや大きいplusは同じiPhone
スマートフォンサイズなら「まぁ無視してもいいかな？」レベルで済みましたがタブレットになるとそれこそPCサイズからスマホサイズなタブレットと出てきているのでその辺りの管理をどうするか問題になります。
1つのページを両方（PC&モバイル）に見せる方法（切り分け）
cssで@media screen and～を使う方法。
cssでスクリーンサイズで掛かるcssを切り分けます。
利点としては1つのページで済むので更新管理がしやすい。また、同じアドレスになるのでURLの複雑化・複数可が防げます。
欠点としてはcssの冗長化とPCでもブラウザ幅を変えると切り分けが発生してしまう事。
結局どっちを使うの？
結論としては好きな方をご自由にと何処かに丸投げです。
いかんせんHTML5である程度まとまった感のあるHTMLもまだまだ進化中
ユーザーの使うガジェットもまだまだ進化中
コレが完璧なんてまだ出てない訳で…
この辺に来るとコーダーとしてどっち？と言うよりディレクターとしてそのサイトはどういったサイトで云々を重要視したほうが筋道がしっかりするんですよ。
スマートフォン閲覧を想定しているのならPCで多少見難くてもいいじゃん？
そこまで言い切れるディレクションをしないと振り分けと切り分けの説明ループで時間が終わってしまう意味のない打ち合わせをする羽目になります…