画面サイズによってレイアウトが変化するレスポンシブデザインが、どうも苦手です。
(とはいえ、できますよ、の主張のために自分のサイトで使ってたりしますが。)
うつらうつら考えてたのでまとめときます。

どうしてかというと、1つには見ている方のブラウザサイズでレイアウトが変わってしまうからです。
サポート系の業務をしているクライアントさんにとっては、これは命取りです。
お客様に電話で説明しながら、「右上の赤いボタンをクリックして……」「ボタンなんてありませんよ」となってしまいます。

また、私は会社ではPCですが、家ではスマートフォンしか使っていません。
会社で見たサイトを家で見た時に、「右上にあったメニューの……あれ?どれだろ?」となることがあります。その時に「PC版を表示」で同じ画面にして利用することが多いのですが、この機能はUAを切り替えているので、画面サイズでの切り替えをしているレスポンシブデザインのwebサイトにはこれが効きません。
スマートフォンでもPCでの表示が見ることができるようにするってことは結構大事なんじゃないかな、と思うのです。

じゃぁどういった風にしてるか、というとMTやWPなどCMSを使った構築の場合はそれぞれのテーマを作って書き出しています。
HTMLもCSSもPC版、モバイル版と分けて書き出すということです。
切り替えはプラグインで切り替えたり、物理的リンクをつけたり、色々です。
URLが違う場合でも、GoogleではPCの場合はPC用ページが、モバイルの場合はモバイル用ページが検索結果に出てきます。(この辺参考に記述しています

静的にHTMLを作る場合は、HTMLが二つになると更新がややこしいので、HTMLは1つでCSSは2パターン、JavaScriptでUAによってCSSを切り替えることが多いです。(PCとモバイルで全く別のHTMLを作成する場合もあります。特にあとからモバイルだけ作る場合など、どうにもできない場合。)

時々レスポンシブを採用することはあります。
モバイルでの利用がほとんどを占めると考えられるwebサイトで、はじめからモバイル用に作る場合です。その場合は画面サイズで切り替えるというよりも、リキッドデザインにして、PCでも間延びしないように調整します。一部は画面サイズによって調整したりもします。

制作者の数だけやり方はあると思うのですが、私はこんな感じにしています。


webデザインのトレンドを知ることや、それに対応できることは、この仕事をやってる以上とても大事ですが、自分の頭でしっかり考えてから採用したいなぁと思っています。
一度採用すると年単位で使われる物ですから。

ブログランキング このエントリーをはてなブックマークに追加