未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント
<br />原文: プログレッシブエンハンスメントを理解する
アーロン・ガスタフソン
翻訳: http://lifesinger.org/

1994 年以来、Web 開発コミュニティは Graceful Degradation を推進してきました。このコンセプトはエンジニアリングの世界から生まれたもので、その中心となるアイデアは、最新かつ最も強力なブラウザにフル機能のエクスペリエンスを提供しながら、不幸にもまだ Netscape 4 を使用している人々のために基本的な機能だけを残すことです。これが役割を果たしたことは間違いありません。しかし、これはティム・バーナーズ=リーの「ユニバーサルにアクセス可能な Web」という当初のビジョンとはまったく一致しません。
約 10 年後、一部の賢明な人々が Graceful Degradation に疑問を持ち始め、多くの点でそれが不十分であることに気付きました。コンテンツの可用性、全体的なアクセシビリティ、モバイル デバイス ブラウザーの機能に注力することで、古いデバイスのサポートに口先だけで対応するのではなく、コンテンツを重視する Web 開発への新しいアプローチが生まれました。
2003 年の SXSW カンファレンスで、Steve Champeon 氏と Nick Finck 氏が「未来に向けた本格的な Web デザイン」と題した講演を行いました。そうすることで、彼らは Web 開発へのこの新しいアプローチの青写真を明らかにしました。スティーブはこれに「プログレッシブ エンハンスメント」という名前を付けました。
ここに(微妙な)違いがあります。<br />優雅な劣化とプログレッシブエンハンスメントの違いを理解しようとして頭を悩ませているのであれば、それは見方の​​問題です。グレースフル デグラデーションとプログレッシブ エンハンスメントはどちらも、さまざまなデバイスのさまざまなブラウザーで Web ページがどれだけ適切に動作するかを考慮します。両者の主な違いは、それぞれの焦点と、それがワークフローに与える影響にあります。
グレースフル デグラデーションの観点<br />グレースフル デグラデーションは、最も高度で機能的なブラウザー向けのサイトの構築に重点を置いています。 「古い」または機能が低いと見なされるブラウザでのテストは、開発サイクルの最後まで延期されることが多く、通常は主要なブラウザ (IE、Mozzila など) の最後にリリースされたバージョンに限定されます。
このモードでは、古いブラウザでは、劣悪ではあるものの許容できるエクスペリエンスしか提供できません。特定のブラウザに合わせた小さなパッチがいくつかあるかもしれませんが、結局のところ、これらのブラウザは焦点ではなく、大きなバグを修正する以外には、それ以上の取り組みは行われません。
プログレッシブエンハンスメントの観点<br />プログレッシブエンハンスメントはコンテンツに焦点を当てています。違いに注意してください。ブラウザについては何も言及していません。
そもそも私たちがウェブサイトを作成した理由はコンテンツです。コンテンツを配布するサイト、コンテンツを収集するサイト、コンテンツを要求するサイト、コンテンツを操作するサイト、そしてこれらすべてを行うサイトがありますが、どのサイトにもコンテンツが必要です。ここで、漸進的成長がより適切なモデルになります。そのため、Yahoo! はすぐにこのモデルを採用し、それを使用して段階的ブラウザ サポート戦略を作成しました。
前のページ1 2 次のページ 全文を読む

<<:  MySQL 外部キー設定方法の例

>>:  Kubernetes YAMLファイルの使用

推薦する

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...

挿入前にレコードが既に存在するかどうかを確認するには、SQL ステートメントを使用します。

目次SQL文を挿入する前にレコードが既に存在するかどうかを確認するSQL挿入時の判断の簡単なコレクシ...

Mac+IDEA+Tomcat の設定手順

目次1. ダウンロード2. インストールと解凍3. Tomcatを起動する4番目に、インストールが成...

HTMLテーブルの詳細な説明

機能: データ表示、テーブルアプリケーションシナリオ。 <table> テーブル<...

CSS フォント、テキスト、リストのプロパティの詳細な紹介

1. フォントのプロパティcolorは、div{color:red;}のようにテキストの色を指定しま...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...

JS での filter() 配列フィルターの使用

目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...

Docker-compose は Docker プライベート ウェアハウスのステップを迅速に構築します

docker-compose.ymlを作成し、次の内容を入力します。 バージョン: '3&#...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

js キャンバスは検証コードを実装し、検証コード機能を取得します

この記事の例では、検証コードを作成して取得するためのjsキャンバスの具体的なコードを共有しています。...

Windows に MySQL 5.7.18 の解凍バージョンをインストールするチュートリアル

1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...

CSS 円形ホローイングの実装(クーポン背景画像)

この記事では主に、クーポンの背景画像などでよく使われる CSS 円形ホローイングについて紹介し、皆さ...

MySQLトリガーの使用例の詳細

MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...