スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeウェブデザイン基礎講座 > より適応性の高いウェブサイトの構築

より適応性の高いウェブサイトの構築

投稿日:2006年6月20日   レベル:初級    ソフトウェア:DreamWeaverGoLiveFrontPage


ウェブデザイナーにとって直面する最も難しい問題の1つが、多くのウェブブラウザにおいて有効な新しい技術や効果を導入することでしょう。例えば、有効なタグであるIFRAMEタグなどがあります。このタグはInternetExploreでしか動作しません。他には、Netscapeのみで使えるLAYERタグなんかを使ってページを作成することもあるでしょう。ウェブデベロッパーにとっても、サポートしていないブラウザに関しては無視することになり、しっかりとしたイントラネットの構築を行っていなければ、難しい問題なのです。

NetscapeからInternetExploreへの移行期間には、多くのNetscapeユーザーが世の中にはいました。デザイナーとして動的なHTML,ブラウザの能力を生かしたHTMLを書きたいと感じていたのですが、対応してないブラウザを使っている、小数のユーザーを無視したくなかったのです。

100_101_027_1.jpg

これらを考えていくには次の方向性において、いくつかの方法があります:
1.全く特徴のないページを作る
2.より綿密に考慮されたサイトを作るために、余分に時間をかける
ここまでに、IFRAMESやLAYERSといった、特徴あるタグについても触れてきましたので、私は、2の方向性で話を進めていきます。それに対する答えは、Javascriptやメタタグを使って、訪問者を適切なページに導くということが挙げられると思います。

この手法においては、最適なモノを選択させるために、いくつかのバージョンを持った最初のページが必要になります。私がこのような仕事をするときには、コピーを利用し、サデザインをおこないます。つ私のページに関しては、3つのバージョンを作成しました。

1.IntenetExplore 4.0拡張のHTML4.0(ie4_index.html)
2.Netscape拡張のHTML4.0(ns4_index.html)
3.特別なタグや拡張のない標準的なページ(standard.thml)

メモ:このページでは、3.0で閲覧可能なJavascriptを使っています、なぜなら、ほとんどの旧型のブラウザではコメントタグ<!-- -->中への配置は無視されてしまうからです。Javascriptの使用は2.0においてはさらなる最適化が必要になります。
では、やってみましょう

まず、Javascriptを使わない標準的なページに行くためのモノです、headにメタタグを追加します(次のコードを最初のページのHEADに入れてください)。

<meta http-equiv="refresh" content="2;http://mydomain.com/standard.html">

そして、4.0ブラウザに関して適切なページに移動するためのJavascript、また3.0以下は標準的なページへ行きます。

<!-- ignore
<script language=javascript>

manufacturer=navigator.appName;
version=navigator.appVersion;

// Communicator
if (manufacturer.indexOf('Netscape')>=0 &&
version.indexOf('4.0')>=0)
location.href='http://mydomain.com/ns4_index.html';

// IE4
if (manufacturer.indexOf('Microsoft')>=0 &&
version.indexOf('4.0')>=0)
location.href='http://mydomain.com/ie4_index.html';

// 3.x browsers
if (version.indexOf('3.0')>=0)
location.href='http://mydomain.com/standard.html';

</script>
-->

最後に、NOSCRIPTとして、metaリフレッシュに対応していないブラウザでも、適切なページに移動できるようにしています。

<noscript>
Your browser does not support scripting. However, we do have a special area of our site for you to visit.
</noscript>

私は古いブラウザを使っている人が、時代に遅れているとか言うつもりは全くありません。ただ、時々、新しいブラウザを使っているにもかかわらず、Javascriptを有効に設定していない人もいます。旧式のブラウザを使用している人達には、なんらかの理由があるでしょう、アップグレードを知らないから、というわけでないこともあると思います。実際には、彼はなんらかのサイトを訪れるたびに、ブラウザのアップグレードを行ってくれと言われているはずですから。他に理由があるのです。訪問者のことをなにより考慮して作成されたページは、より多くのヒットを得ることになると思います。

サイトの始めに、簡単な仕掛けをいれることで、より多くの訪問者に気持ちよくサイトを利用してもらうことができるのです。ここで、紹介したコードをコピーアンドペーストすれば、誰にでもできるはずです。

みなさんの役に立てることを期待しています!


引用:Web Design Library著者:Jennifer Kyrnin翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング