「Web Directions East 2008」のカンファレンス、2番目のトラックでは、Dan Cederholm（ダン・セダーホルム）氏による、『⁠Bulletproof A-Z─あらゆるデバイスに対応できるウェブデザインの考え方』と題した講演が行われた。

ダン氏は「Craftsmanship in implementation」と力強く語る。「⁠デザインも、職人による手作業である。家具で例えてみよう。家具の取っ手の重要性は、使ってみなければわからないだろう。Webもそうだ。使ってみなければ、その重要性に気づくことはない」と述べた。

そして、ダン氏は自身が制作した「Iced or Hot.com」の制作事例を元に、単純な作業で複雑な構造が必要ない柔軟性に富んだサンプルをAtoUで紹介した。

以下に、その一部を紹介するので、参考にしてほしい。

A：ANCHOR LINKS WITH META INFORMATION

メタ情報入りアンカーリンク（データに関してのデータ）をfloatを使って左右に重ならないように配置することで、リスト式ナビゲーションは全ての行が選択できる。

B：BORDER-RADIUS

CSS3で実装されている角丸。これらのデザインが要求される場合には、それぞれのブラウザにあった処理を施す。これらの処理はCSSを分けて記述することで可読性を向上できる。

C：COLOR TRANSPARENCY WITH RGBa

ある要素を透過する場合には、opacityプロパティよりもbackground-colorをRGBaで記述するのが有効だろう。IEなど透過そのものがサポートされていないブラウザでは、ベタの背景色を指定し、要素そのものをユーザーが視認できない状況を回避しなければならない。

D：DO WEBSITES NEED TO LOOK EXACTLY THE SAME IN EVERY BROWSER?

「Webサイトはすべてのブラウザにおいてまったく同じように表示されなければならないのか？⁠」⁠。この恒久的に制作者を悩まし続ける疑問に、「⁠No」と明確に答えた。「⁠Sundance Film Festival 2008（※すでに2009年バージョンのデザインになっている⁠）⁠」や「Foamee」を例にあげて、「⁠可読性に影響しない範囲で、重要な要素でない場合は、それがある種のブラウザで表示されなくても構わない。変にマークアップを使うよりはずっといい」と述べた。

E：EASY-CLEARING FLOATS

floatを解除するテクニックのひとつであるclearfixについて、「⁠CSSの複数適用を用いて、このテクニックを適用するのはスマートではない。ページ内の要素を入れ替えてもお互いに影響を受けないほうが良いので、私は.groupとしてひとまとめにするやりかたをお勧めする」と述べた。

  <div id="container">
  <div id="container">
  <div id="listMenu">
というHTMLに対して、
  div#container:after,
  div#gnav:after,
  div#listMenu:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden; 
  }
といったように、それぞれのIDセレクタにclearfixを設定するのではなく、
  <div id="container" class="group">
  <div id="container" class="group">
  <div id="listMenu" class="group">
とHTML側を記述して、.groupに対してのみclearfixを設定する。
  .group:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

F：FRAMEWORKS A TESTIMONIAL FOR RESET.CSS

「ブラウザにおいて、デフォルトで設定されているCSSをリセットする場合、個別にリセットするのではなく、フレームワークとしてreset.cssでまとめた方がよい。「⁠MTV.com」では、margine:0やpadding:0の記述が合計155カ所も見られ、ソースを圧迫している」と話した。

G：GRIDLASTICNESS

「Mark Boulton DesignのBeautiful, simple design for today's web」「⁠guardian.co.uk」「⁠IKEA.com」などを取り上げ、「⁠きちんとグリッドされたサイトは他のサイトに比べユーザーの記憶に残りやすい」とし、「⁠設計単位にpxではなくemを使うことで、開発が柔軟になるだけでなく、フォントサイズに応じたレイアウトズームも可能になり、ピクセル違って計算も簡単である」と推奨し、「⁠グリッドレイアウトではモジュール単位でコーディングしていくことが大切である」と述べた。

H：HORIZONAL GRID? SURE.VERTICAL GRID? SORT OF.

コーディングではデザイナーが想定しているレイアウトにすることが難しい場合がある。その一つに垂直グリッドがあるが、これらはモジュールごとにクラスを定義することで解決できる。

I：IE 8 BETA STILL REFUSES TO RESIZE SET IN PIXELS

IE8 Betaでは、pixelでフォントサイズを指定しても無視されることがある。これらはemを使い、bodyにフォントサイズを%で指定することによって解決できる。

J：JQUERY

「私はこの素晴らしいライブラリが大好きです」と語るダンは、jQueryをソースとともに紹介。「⁠非常にシンプルにそしてデザイナーライクでわかりやすくセレクタを指定することができる」とし、絶賛した。

K：KITTY

ダンは満面の笑みで、「⁠KITTY」と呟いた。スライドの画面一杯に猫が表示されると、会場もどっと沸きあがりを見せた。

L：.last

先述のAなどで紹介されたメニュー式のリストは、最初や最後のコンテンツには必ずと言っていいほど例外処理が発生する。このような例外では、jQueryのaddClassで自動的に付加する方法を紹介した。

S：SHIFTING BACKGROUNDS

「Silverback」を紹介し、背景をネガティブパーセンテージで位置指定し、多重にすることによって奥行きが発生し、3次元効果が得られることを紹介した。

T:TEXT BLENDING RGBa

テキストの色指定には、RGBaを用い、透過率を90%にさげることで、背景色とマッチし、紙に絵の具で描いたように、馴染ませることができる。

a{
color:rgba(30, 40, 30, 0.9)
}

U：UR STATS

最後のUでは、エリック・メイヤー氏の言葉を引用し「これらの新しい、もしくはブラウザによって差異があるテクニックを使う時期は、対象となるサイトのアクセスログを参照して、ブラウザの種類がそれに見合っているかで判断するべきである」と述べた。

これらの事例はまさに"Bulletproof"、つまり防弾であり、柔軟性と拡張性、そしてユーザビリティを備えた職人の安全指南といえるだろう。