Netscape DevEdge チームは、、高度な CSSやXMLの技術を使ってW3C標準に準拠したクロス・ブラウザのサイト作成をすることを目的としている世界中のウェブ開発者の役に立つことを考え、比較的短期間に大掛りなサイトの再デザインを実行しました。この再デザインの目的は、下記のようなことを実例で示すことにあります：
この再デザインは私達のチームが時折議論してきたことですが、2002年10月に再デザインされた wired.com を作成した Douglas Bowman さんの仕事に大変影響されたことも認めざるを得ません。(Bowman さんのインタービュ記事を読めばもっと詳しい情報が得られますので、ご参照ください。) ある意味でここで私達がやろうとしていることはこのデベロッパー向けのサイトでCSSを主に使用したレイアウトとクリーンなマーク付けで何が可能で何が可能ではないのかを探る最先端技術の試みといっていいと思います。
このプロジェクトを起こすにあたって幾つかの基本的なゴールがありました。それらは、
現時点の自己評価は上記の6つのゴールのうち4つまでを達成したということです。恐らく5つ目も殆ど達成しています。現在適っていないのは、XHTML 1.0 Transitional を使うこと、そして文書の長さを平均25％減少させることです。
XHTMLを使用していない理由は？これは主にこのサイトの昔のコンテンツが HTML 4.xで作成されたもので、これらを全て変換するのは時間的にも有益ではないと判断したからです。その代わり、 HTML 4.01 Transitional を使うことにしました。このように古い HTML 4.xのコンテンツを残している事情からこのサイトの全てのコンテンツはW3Cの標準に対して検証されません。これらの古い文書も徐々に「掃除」をして行き、最終的には全て標準に照らし合わせて検証できるサイトにする計画です。
ページの長さを削減するゴールは野心的なものでした。ゴールには近くなったのですが、目的の5割程度で終わっています。その主な理由は以前から結構「痩せた」マーク付けだったからです。テーブルは使っていましたが、構造がすでに極めて単純化されたものだったのです。厳密に言えば、全てのページに使用される「テンプレート」のマーク付けだけならば、このサイトのナビゲーションをここまで便利にしなければ、50%の削減が達成できたはずなのです。この後者の点については又後で触れます。
ユーザの皆さんがお試しになれる新しい仕様を幾つか述べてみます：
ユーザがコントロールできるルック・エンド・フィールを見せるために、「スタイル・スイッチ」を使うことにしました。これでユーザは4つのテーマから選べことができ、デフォルトのフォントのサイズも変えることができます。 この効果を可能にしているのは基本的には Paul Snowdon さんの JS スクリプトですが、幾つかこのサイト用にカスタマイズしたところもあります。 もっと複雑なカスタマイゼーションも考慮しました。例えば、任意の要素をユーザの定義する色にする等です。しかし、最終的には比較的単純なデザインを使うことに落ち着きました。より高度なカスタマイゼーションも将来的に考えています。
ユーザがテーマを選択するとそのチョイスはnde-styleと呼ばれるクッキーに保存されます。このコンセプトを拡張すればこのサイトの違ったセクション毎に
スタイル・シートを保存することも可能ですし、ユーザの好みに合わせてサイトのレイアウトを殆ど完全に変えてしまうスタイル・シートを作ることも可能です。
同様なメカニスムでフォント・サイズを覚えておくことができます。クッキーの名前はnde-textsizeと言います。
クロス・ブラウザなメニューの利点を謳歌することは簡単ですが、実際に高度 CSSのテクニックを使ってを書き始めると、さほど標準準拠でもない古いブラウザをサポートする為にしなければいけない努力の苦しさが良く分かりました。 完全に CSS のみのメニューと従来の JavaScriptを使用するメニューをいろいろと試した結果、DevEdge チームは高度 CSS に加えて JavaScriptを使用するというテクニックで Netscape Gecko、Internet Explorerそして Operaできれいに作動するメニューを作ることに成功しました。
このアプローチの一番の利点はメニューのマーク付けが入れ子の順不同リストに基づいていることです。これにより、マーク付けは軽いものになり、ビジュアルではないブラウザ、或いは携帯電話、パームなどの他のデバイス用の構造としても使えるからです。この実装を行うにあたって、私達は css/edge の「純粋 CSSメニュー」のデモと gazingus.org にある ダイナミック HTML メニューを参考にして、更に向上しました。 これにより比較的簡単にスタイルを変えることができて、複数のブラウザで利用可能な「軽い」JavaScriptを使ったメニューができ上がりました。 更に、JavaScriptの使用がＯＦＦになっているブラウザでも、CSS-2 標準に準拠したブラウザであればこのメニューは作動します。私達の経験から学び、あなたのサイトもこのコードを使用して向上させることができますので、ご利用ください。
現行の再デザインの大きな目標の一つは以前にも増して DevEdgeのコンテンツをアクセシブルにするということでした。このゴールを可能にするために、デザイン・チームは最初から CSS のポジションニングを使ってレイアウトをすることに決めていました。これにより、ビジュアルにリッチなコンテンツを提供すると共に線的なアクセスしかできないノンビジュアルなスクリーン・リーダーのようなデバイスにも利用できるサイトにでき上がっています。
例を上げれば、最近のブラウザで見ると「検索」と「テーマ/スキン」のボックスは隣合わせに見えます。文書のソースを見ますと、「検索」は最上部のイメージのマストヘッドの一部であり、文書の最初の辺にあります。これに比べて、「テーマ/スキン」はページの最後のフッターの部分の前にあります。同様に、マストヘッドの直ぐ下にくるナビゲーション用のメニューはソースではページの全コンテンツの後にあります。
このサイトの見た目はページのソースの要素などの順序とは大幅に違っているために、DevEdgeは以前にも増してCSSを使わない無線や他のオルタナティブなブラウザでも利用できるようになっています。しかも、サイトの全レイアウトはマーク付けをノータッチで大幅に変えることができます。つまり、スタイルを修正してビジュアルな部分をいくら変えても、アクセシビリティはそのまま保持できるということになります。
更に、「記事」カテゴリーの文書を印刷するときにはプリント・フレンドリーなスタイル・シートが自動的に応用されます。[訳者注：西洋語のページにはこの機能をチェックするリンクが右下のボックスにありますが、日本語のページには現在リンクが存在しません。しかしこの機能自体は作動しています。] 印刷の時にはハイパーリンクをリンクのテキストの後に現すようになっていて、ウェブページ同様に印刷後もリンクが見れます。
表には現れていませんが、再デザインプロジェクトは他にも沢山の向上点があります。例えば：
このような向上はユーザ経験に直接のインパクトがないとしても、私達 DevEdge を維持するチームにとってはサイトをスムースに運営することに非常に役に立ち、このサイトの情報を世界の更に多くの人に見てもらうことができるという大きな利点があります。
基本的にはどのブラウザでも DevEdge にアクセスできます。しかしながら、ビジュアルの観点からは DevEdge は最近の標準準拠のブラウザで最も効果を発する技術を使用しています。どのユーザ・エイジェントでもコンテンツは完全に閲覧できます。しかし、このサイトの CSS レイアウトは下記のブラウザやプラットフォームで特にその高度な仕様が利用できます。
設定：このサイトのデザイン効果をフルに楽しんでいただくには、クッキーと JavaScript 使用をＯＮにしておく必要があります。特にテーマ・スイッチはこれらが必要です。JavaScript を無効にしていても Netscape 7 以上 Mozilla 1 以上ではセクション・インデックスや CSSベースのメニューを通してサイトをナビゲートできます。
注意書き： 既知のバグや不完全な W3C CSS, DOM 標準の実装の為に、これらや他のブラウザで些細な問題があることはご了承ください。最近の標準を利用するために、また、7.xのユーザが劇的に増えている状況から、更にNetscape 4.x バージョンのブラウザのユーザが極端に減っていることからも、 4.x 用に特別処置をしないことに決定しました。Netscape 4.x をご使用のユーザもコンテンツを閲覧することはできますが、スタイルの効果は見れません。
上記以外のブラウザ/プラットフォームでこのサイトが効果的に閲覧できるときとか、サイトのクロス・ブラウザ用のコードの向上案とか、その他のフィードバックがありましたら、ご自由にお寄せください。
Netscape DevEdge で使われている CSS や JavaScript のコードを通して、このサイトを構築した過程での決定事項やそのプロセスをもっと学ぶことができます。