レスポンシブWebデザインを考える際に、IE8以前（IE8～6）の古いブラウザについて、どのように対応するかを考えてみました。
どうすれば、手間が少なく古いブラウザへの対策ができるのか？
レスポンシブWebデザインを作る際の覚書です。
制作のための前提条件
考えるにあたって、下記の条件のクリアを前提としました。
- 旧ブラウザはIE8～IE6を含める。
- IE8～IE6でもCSS3使ったデザインを行う。
- IE6でもpng画像を使用する。
- デバイスはスマートフォン、タブレット、PCの3種類を想定する。
- CSSはモバイルファーストを考慮にいれた記述方法とする。
日本ではまだまだWebページを見るためにIEを使う人が多いです。
デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。
その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。
また、制作者としてはモバイルファーストも意識したいという気持ちあったりします。
レスポンシブに「必要なこと」「不要なこと」
レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。
過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。
- 「必要なこと」
- スマートフォン、タブレット、PCの異なるデバイス間で、それぞれに適したデザインで表示される。
- 「不要なこと」
- PCでブラウザ幅を変えたときに、デザインが変わる。
異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。
その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。
レスポンシブの対象は@media queryに対応しているブラウザ
「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。
- PCでは、PC向けのデザインを見せる。（固定幅のデザインを見せることが出来れば良い）
- IE8以前のブラウザを搭載したスマートフォン、タブレットがない。
「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。
また、IE8以前のブラウザを搭載したデバイスは、PC以外には無いことも考慮すると、無理にjsライブラリでIE8以前の環境で@media queryに対応する必要はなくなりますね。
制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。
（モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。）
画像の扱いから気づいたこと
他に気づいたこととしては、@media queryに対応していないブラウザは「background-size」にも未対応です。
そのため、フルードイメージへの対応も難しく中途半端になってしまいます。
Webサイトを制作する上で、画像を全く使わないということもほとんどないので、フルードイメージに対応出来ないブラウザは、@media queryにも対応しないという制作方針にしてしまうのも１つの方法かなと考えました。（でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます）
画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの？」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。
