Responsive Web Designについて

前提用語の説明

プログレッシブ・エンハンスメント

よりよい環境を持っている人にはリッチな演出を.
あまり良くない環境の人には最低限の演出.
ただし,どちらの場合にも提供する情報は減らさない

→要するにIEユーザーには最低限の演出.テキストなどの情報は見られるように配慮するということ
(IEユーザーは地獄の業火で焼きつくされるべきである)

コンディショナル・コメント

htmlタグにIEブラウザによってクラスを振り分けるアレ.

これですな.

メディアクエリとプログレッシブ・エンハンスメント

もう詳しくは下記サイト様にまとめられているのでそちらを参考にしつつ自分用に加筆

Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論
http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/best-practice-of-responsive-design/

『・最初にメディアクエリなしで狭いビューポート用スタイルを定義
・次にメディアクエリで他のデバイス用スタイルを定義
・最後に IE6-8 用スタイルをコンディショナル・コメントで定義』

スタイル定義としてはこの順番で行なうのがベターなんですかな.
また,IE6-8に関しては

『古いブラウザがサポートできない機能を何らかの手段で補う、いわゆる ポリーフィル として一旦は H5BP に採用されました が、プログレッシブ・エンハンスメント の考え方から言っても、古いブラウザにそこまでのハンディキャップを負わせる価値はない、がコミュニティーの決定となったのです。』

ということで,無理してレスポンシブ対応しなくても良いのではないかという考え方が提案されているようですね.
上記をまとめると,
『通常のメディアクエリ(Respond.jsは使わない) + プログレッシブ・エンハンスメント』が現状での解
ということになるのでしょうか.

個人的懸念点

メディアクエリを使って,モバイルファーストに実装した場合にも,ワイドスクリーン用のスタイルがリクエストされてしまう

メディアクエリを使った場合,internalに記述した場合でも,importを使って記述した場合にも,各CSSがダウンロードされてしまう.
特にモバイル端末のように回線速度が期待できない場合,何回もリクエストを生じさせる設計はあまりヨロシクないのでは.
(まあ画像とは違って高々数kbのテキストなのですがね…(というかメディアクエリを使う以上,今回のデザインに関わらずこの問題は生じるわけですが))

その他懸念点

この内容は今回の記事の内容とは直接関係ないのですが,レスポンシブサイトを作る上で気になるところを…

1. メディアクエリのブレークポイントどうすんねん

モバイルファーストとは言っていますが,ウィンドウサイズ何ピクセルまでをモバイルと判断するかですね.
特にportraitモードとlandscapeモードがあるので,もはやカオス.
横幅1280pxのタブレットとかどうやって判断すんねんという話でして…

(userAgantなんか使っても本末転倒ですしね…)

2. 画像の問題

モバイルファーストにした場合,画像も小さいものを用意(または縮小表示するか)するとは思うのですが,それをどう切り替えますねんという話ですな.

・imgタグの切り替え
imgタグでhtml内に配置しておいて,cssのdisplayで切り替えるなどがあるとは思いますが,その場合,両方の画像がリクエストされるのでモバイルには優しくない.

・cssのbackgroundの切り替え
cssのbackgroundで指定して,メディアクエリで画像そのものを切替えるという方法もあるとは思います.cssのbackgroundに指定される画像は,css自体はリクエストされますが,背景画像はリクエストされないので,リクエストの問題はクリアされるかと.
ただし,width:100%のような指定ができないので,ウィンドウサイズに対して可変な画像配置というのが難しいのではないかと

・Javascriptを使って動的に切り替え
ウィンドウサイズを逐次把握して,動的に切り替える・・・リクエストも最低限で済みますし,imgタグそのものをJSで切り替えれば,width:100%も対応できるが,これも本末転倒感が否めない…

(レスポンシブにまつわるマニアックなお話でしたm(_ _)m)