肉とビールとパンケーキ by @sotarok

少し大人になった「肉とご飯と甘いもの」

mixiリニューアル後のHTMLが素敵じゃない件


リニューアルされましたねーmixi
デザインや使い勝手の良し悪しは、まぁ好みもあるし、きっと慣れもあるんでしょうから、言及しないとしても、ちょっとHTML微妙じゃない?と思ったのですが。。

というのも、一番上のメニュー。グローバルメニューとローカルナビゲーション*1


いまどき画像の差し替えをJavascriptでやるのはどうなのかと…。


ちゃんと横並びメニューをliで書いているのはいいとして、画像ですが、


  • それぞれのメニューにつきロールオーバー前と後の2枚を用意
  • onMouseOverとonMouseOutで画像差し替えのためjavascriptを呼ぶ


これはちょっと微妙(笑)なにか訳あってのこと?それともCSSでメニュー作る方法を知らない?メニューにマウスが乗るたびにスクリプトが動くと、それなりにスペック低めのPCだと結構もっさもっさです。

やっぱり、リストタグでメニュー作るなら、画像は背景にして、テキスト流し込んだほうが普通じゃないかな。
さらに言うなら、アメリカのyahoo.comみたいに、ロールオーバー画像とかは、On画像とOff画像をつなげてつくり、a:hover時に background-position をズラして表示してあげる方法をとれば、トラフィック面でのオーバヘッドも少なくなると思います。
アクセスするたび*2に27個の画像にGETかける*3って、結構トラフィック的にキツいと思います。たぶん。笑 これくらいのgifなら一枚につなげたほうが、オーバヘッド少なくていいと思うんですけどね。


まぁmixiさんは技術力があるからそのへんもうまくやってるのかな:) *4

*1:ソースにそう書いてあったからきっとそういう名称だ。

*2:コメントでのご指摘のとおりですが、「リクエストのたび」ではありません。実際にはキャッシュもされてますし。

*3:jsの場合マウス乗せたときGETだから、ロールオーバー画像はアクセス時には取りにいかないのかな。ただしアクセスした人がマウスをメニュー全部通り過ぎるようにのせちゃったら、54個です。

*4:でも昨日は久々に500エラー見たよ。全体的に重いのかな。