Webデザインの基本セオリー
CSS+(X)HTML その1
CSSを使ってのデザインが主流になってきました。
よく考えられた非常に理にかなった方法論だと思いますが、CSSデザイン型と既存のtableを多用したハイブリット型とでは、運用上どんな点で違うか検証したことありますか?
多分CSSを売りにしている会社や大手などでは統計データなどを出していると思いますが、私のようなフリーやSOHOではそこまではできませんよね。そこで体感的な部分で私なりに検証してみた結果をちょっとだけ紹介します。

まず、更新のしやすさ。ちょっと分かっている人であれば、簡単にタイトルを増やしたり、メニューを編集したりができるという点です。CSSでデザイン部分を外に出しているので、フォーマット化されているのと同じ感覚なのでしょう、クライアント側で頻繁に更新する会社などでは結構重宝するようです。

次に表示スピード。今どき表示スピードなんて、というかもしれませんが、回線が込み合っていたり、安いサーバでデータ転送が遅い場合などは、同時接続数でスピードががた落ちします。込み合っている時間帯にネットサーフィンしていると、大手でも表示するのに多少時間を食ってしまったりする経験をしたことがあるでしょう? この場合、さすがにHTMLに書き込み数が少ないCSSデザイン型の方が早く表示されますね。

ここで面白いことを発見。ほとんどのブラウザで共通しているのですが、tableで囲まれているものの場合、画像などは全部読み込んだ順番で表示する、つまり、HTMLの上から順番に表示するというわけではないということです。これに反して、CSSデザインの場合は、HTMLの上から順番にテキストを除いて順番に表示していくという違いがあります。また、この法則はバックグラウンド処理した場合、tableは、バックグラウンド処理を一番後回しにされるのに対して、CSSは他の画像処理と同じ順番で表示処理していくという点です。面白いことにインタレース処理しても同じでした。これはブラウザの処理方法の違いなのでしょうが、数秒間の違いです。
例えばトップページのタイトル文字テキストが白で背景に画像で色を持ってきて初めて読める場合など、CSSでは上から表示されてくるのですぐ分かりますが、ハイブリット型でtableに背景を指定していると、中身が表示されながらワンテンポ遅れてタイトルが見えてくるといった具合です。
たかが数秒と思うかもしれませんが、サービス紹介やショッピングの商品説明などでは結構大きな違いになってしまいます。特にショッピングサイトなどで売上に神経をすり減らしている方には気になる部分ですよね。その数秒の違いでお客が違うサイトに行ってしまう可能性すらあるわけですから。この辺を踏まえて考えていくと、瞬間的にお客を取り込んでおかなくてはならない部分ではCSSデザイン型が優勢。細かなデザインや凝った構成、ユーザに納得させる部分ではハイブリット型の方がまだまだ優勢ということになるのでしょうか。まあ、処理の仕方と考え方の違いといったところだとは思いますが。

賛否両論あるかとは思いますが、いろいろ試してみると面白い発見があるのでぜひ自分でも実験してみてはいかが?