遂に。レスポンシブなウェブデザインに手を付けた
今まで避けていたレスポンシブなウェブデザインに手を付けてみた。
モデルはテスト用に作っていたワンカラムのサンプル。
まあ、このサンプル見てるうちに、レスポンシブに向いてそうなデザインだと思ったのが切欠です。
今のところ数時間いじってみての所感をば。
・思ったより悪くない。クライアントの要望によって、レスポンシブか否か、是々非々という感じかな。
・viewportについて。切り分けの横幅は極力シンプルにすべきか。PC版のカラム数によって考えるか?
・メディアクエリに対応していないIE8以下の糞ブラウザに関して。
・IE6〜8ユーザーでも、さすがに横幅768px以下で見ることは無いんちゃうか?
・一般に流通しているスマホでもIE6〜8を搭載している機種って無いんちゃう?
・ということで、768px幅未満についてはIEを切り捨てる。
・そのために、PC表示(今回は768px以上)用のCSSをデフォで読み込むようにして、スマホ用をメディアクエリで記述。これでうまくいった。問題は、設計から丁寧にやる場合に「モバイルファースト」で考えると、設計と構築の順序が入れ替わること。
・CSSのいろんなセレクタについて、メディアクエリを後に記述してプロパティを上書きするが、プロパティを初期化したいケースも多いので、以外と勉強になった。
・2カラムまでのサイトだったら、768px以下(ワンカラム)、768以上(2カラムでタブ・PC共通)の二通りのみで分けるのがシンプルで良いという仮説を立ててみた。
・3カラムのサイトの場合でも、3つまでに抑えるべき。
そんなところかな。レスポンシブありきで設計するのをやってみたら印象変わるかもしんないけど。
とりあえず、以上。