昨日から、サイトデザインを変更している。
大体完了かな…と思っているけど、まだ多少手を加えたいところもある。
もし変更中に見に来た人がいて、崩れていて見られなかったら申し訳ない。
サイトのデザインは時々変えているのだけど、前回変えたのは、今調べてみると2013年5月だったようだ。
その時の日記に書いてあるけど、それ以前は、いわゆる3ペインデザインだった。
左と右に「さして重要ではない」情報が書かれていて、中央に本文があるの。
3年前にデザイン変更して、左側のペインを無くした。
無くした情報の一部は右側に吸収されたし、「画面上のヘッダ部分」にも表示した。
これは、そのころの流行のデザインを踏襲した…つもりだった。
でも、そのころから急にスマホ対応が進み始めたのね。
いわゆる、レスポンシブデザインが時代の潮流になった。
自分でもなんとかしたいなぁ、と思いつつ、忙しさと面倒くささでそのままになっていた。
今回、https/http2化を行ったので、「ついでに」デザインの改修にも乗り出した。
で、結局元の3ペインに戻った。
戻ったのだけど、いわゆるレスポンシブデザイン。
画面幅によって適当に見た目を変化させるようになっている。
まず、以前の3ペインは、本当に画面を…HTML 上の位置を、３つの領域に分けてあるだけだった。
今回は、左と右はスクロールしても画面内にとどまり続ける。
これはレスポンシブとは関係ないけど、最近よく見るデザインだね。
画面が狭くなると、右のペインが消滅し、本文下に異動する。
なぜなら、右のペインの情報の多くは、このサイト内の関連ページの紹介だから。
ずっと見えていて興味を持ってもらえればうれしいのだけど、画面が狭くなったら「読み終わった後に次記事の紹介」でいい。
ちなみに、今までも右のペインはあったのだけど、これは「画面が狭くなったら、余分な情報だから外に追い出されてもいい」というつもりだった。
WEB ブラウザは、ブラウザのウィンドウよりも HTML/CSS の指定のほうが大きい場合、左上から表示して、右側を画面外に追い出すから。
これが、明示的に「下に」追い出されるようになったわけだ。
スマホの場合、フリックで操作すると上下だけでなく、左右に動きやすいため、追い出しを明示して WEB の横幅を画面幅と一致させることには意味がある。
さらに画面が縮むと、左のペインがさらに左に…画面外に逃げる。
と同時に、左下に ⇔ というボタンが常駐するようになる。
ご察しの通り、ここをタップすれば、左からペインがひょっこり顔を出す。
左ペインは、サイト内での現在記事の位置を示す役割と同時に、周辺記事への案内を行っている。
読み進むうえでは一応重要情報なので、いつでも呼び出せるようにしてあるわけだ。
いちおう、Windows 上の Chrome / FireFox / Opera / IE11 / Edge / Safari と、MacOS X 上の Safari で画面が崩れないことを確認している。
IE 以外のブラウザは、自動アップデートの仕組みを持っているので最新版…せいぜい、ここ1年くらいのバージョンしか使われないだろう。
Win の Safari は、とっくにサポートが切れていて、最新版が 2012 年のものだ。
それでも動作しているのだから、まぁ古いバージョンでも大丈夫だと思う。
問題は IE 系列。特に IE 8。
ちなみに、IE 7 以前は SSL 対応に問題があるため、すでに当サイトにアクセスできなくなっている。
そして、サーバーログを見る限り、わずかとはいえまだ IE 8 は使われている。
先にレスポンシブデザインの仕組みを書いたのだけど、実は右ペインが下に落ちた「２ペイン」の状態を基本に作ってある。
IE 8 では、メディアクエリを理解できないので、画面幅を変えても画面構造は変わらない。
…実環境では確認していないので、もし動かなかったら申し訳ない。
その時は諦めて、IE8 でアクセスしている人は、そろそろ新しいマシンの購入を検討してほしい。
＃IE8 も、WinXP もすでにサポート期限を過ぎています。
古いけど使える、ではなく、いつ爆発するかわからない爆弾を抱えている状態です。
同じテーマの日記(最近の一覧)
別年同日の日記
申し訳ありませんが、現在意見投稿をできない状態にしています。 【chrome】 きれいに見れるようになってます。対応ありがとうございます。 (2016-11-10 09:22:17)【あきよし】 報告ありがとうございます。windows chrome では動作確認しているのですが、違う環境かな…できるだけ多くの環境で見られるように整備したいので、確認して修正したいとおもいます。 (2016-11-09 10:12:10) 【chrome】 chromeで見ると左のペインが中央の本文とかぶってしまい、とても見づらい状態です。 (2016-11-08 10:57:50) |