Posts Tagged “html5”

nanapiリニューアルは単なるモダン化じゃなくて綿密に計算されたユーザ行動のリデザインだった

あのnanapiが2011年4月にリニューアルして、やれモダンだ、やれHTML5だ、やれFacebook連携だともてはやされてましたが、うーん、そういう話じゃなくね? だってあの(計算高い)nanapiがだぜ、そんなデザインやソーシャル連携の話題性のためにわざわざ手間のかかるリニューアル作業をするだろうか? と引っかかっていたのですが、1か月ほど経ってようやく分かりました。

ビフォーアフター

beforeafter

モヤモヤしていた部分は3つ。

HTML5時代のPCサイトHTMLコーディングを真剣に考えてみた

HTML5がほぼIE以外のブラウザで動く時代になっているので、IEユーザが少ないサイトではそろそろ積極的に使っていくべきだと思ってます。YoutubeやTwitterやnanapiがHTML5に振り切ったというのは、ユーザがよく使うサイトこそHTML5化することでユーザビリティを高められるという事実だと思うし(話題性だけだったらGoogleは動かないだろうし)、B2Bのコーポレートサイト以外はもうHTML5オンリーでいいんじゃないかな、と思ってきました。
だけど、実際にお仕事となるとIEユーザは無視できないし、IEユーザ=リテラシ低め=だけど売り上げを上げるにはこの層はやっぱり取り込む必要あるよね、という話になるのでフルHTML5で書くのは2011年現在でも気が引けます。
ではどうするかというと、互換性のあるタグを使えばいい、というだけのことのように思えてきたのでまとめます。

今すぐできる! HTML5への移行レベルの7ステップ

HTML4またはXHTML1からHTML5へ移行するとき、いきなり実行しちゃうと古いブラウザ(IE)ユーザを置いてけぼりにしてしまうので、順を追って移行するのが現実的です。

でも、最近はHTML5対応のサイトが増えてきたので、いい傾向だと思ってます。

誰もが知ってるサイトやサービスがHTML5になっていけば、自然と今後は増えていきますよね。

ステップ1:CSS3をアクセントに使う

border-radius、text-shadow、box-shadow、gradientなど、大きなレイアウト崩れの原因にならない部分を移行します。

実際は、サイト内のボタンや小さいブロックをCSS3化していきます。
HTMLコーディング影響度はなんとゼロ。
CSSコーディングも現在の設定に追記するだけなので簡単。

実施しているサイト

Twitter,youtube

step1